diff --git a/src/App.vue b/src/App.vue
index 69ec64ffa..43d59c3a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,7 +36,11 @@ const checkNetworkHealth = async () => {
     const background = theme?.primary || '#0099FF';
     const color = theme?.color || 'white';
     // print in console with background #8B3F98 and white text the following message: Using indexer {health.data.version} with {health.data.secondsBehind} seconds behind
-    console.debug(`%cUsing indexer ${health.data.version} for '${chainName}' with ${health.data.secondsBehind} seconds behind`, `background: ${background}; color: ${color};`);
+    console.debug(
+        `%cUsing indexer ${health.data.version} for '${chainName}' ` +
+        (health.data?.secondsBehind > 3 ? `%cwith ${health.data.secondsBehind} seconds behind` : ''),
+        `background: ${background}; color: ${color};`,
+    );
 
     if (health.data?.secondsBehind > 3) {
         let behindBy = moment(health.data.secondsBehind * 1000).utc().format('HH:mm:ss');
@@ -64,7 +68,7 @@ const checkNetworkHealth = async () => {
 };
 
 onMounted(async () => {
-    // await checkNetworkHealth();
+    await checkNetworkHealth();
 
     // On login we must set the address and record the provider
     getCore().events.onLoggedOut.subscribe(() => {
@@ -97,6 +101,7 @@ watch(
         }
     },
 );
+
 </script>
 
 <template>
diff --git a/src/boot/core.ts b/src/boot/core.ts
index 431a12c9a..2cb6dec6e 100644
--- a/src/boot/core.ts
+++ b/src/boot/core.ts
@@ -7,7 +7,6 @@ export default boot(({ app }) => {
 
     const defaultNetwork = Object.keys(evmSettings)[0];
     let network = new URLSearchParams(window.location.search).get('network') ?? process.env.NETWORK_EVM_NAME;
-    console.log('Multichain initMultichain()', { network, NETWORK_EVM_NAME: process.env.NETWORK_EVM_NAME });
     if (network) {
         const exists = Object.keys(evmSettings).some(key => evmSettings[key].getNetwork() === network);
         if (!exists) {
diff --git a/src/components/AddressField.vue b/src/components/AddressField.vue
index 41957b0dc..af97eace1 100644
--- a/src/components/AddressField.vue
+++ b/src/components/AddressField.vue
@@ -114,7 +114,7 @@ const getDisplay = async () => {
 };
 
 const loadDisplayInfo = async () => {
-    let info = await useChainStore().currentChain.settings.getContractManager().getContractDisplayInfo(props.address);
+    let info = useChainStore().currentChain.settings.getContractManager().getContractDisplayInfo(props.address);
 
     if (info) {
         contractName.value = info.name ?? '';
diff --git a/src/components/MinimumVersionRequired.vue b/src/components/MinimumVersionRequired.vue
new file mode 100644
index 000000000..1fbaad9a2
--- /dev/null
+++ b/src/components/MinimumVersionRequired.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useChainStore } from 'src/core';
+
+const { t: $t } = useI18n();
+const loadingComplete = ref(false);
+
+defineProps({
+    required: {
+        type: String,
+        required: true,
+    },
+});
+
+const current = ref('N/A');
+const settings = computed(() => useChainStore().currentChain.settings);
+const state = computed(() => settings.value.indexerHealthState);
+
+const updateData = async () => {
+    loadingComplete.value = false;
+    try {
+        if (typeof state.value.version === 'undefined') {
+            return;
+        }
+        current.value = state.value.version;
+        loadingComplete.value = true;
+    } catch(e) {
+        console.error(e);
+    }
+};
+
+onBeforeMount(async () => {
+    useChainStore().currentChain.settings.indexerReady$.subscribe(() => {
+        updateData();
+    });
+});
+
+watch(() => useChainStore().currentChain.settings.indexerHealthState.version, () => {
+    updateData();
+});
+
+</script>
+
+<template>
+<q-card class="c-minimum-version-required c-minimum-version-required__card">
+    <q-card-section class="c-minimum-version-required__card-section c-minimum-version-required__card-section--title">
+        <q-icon name="info" class="c-minimum-version-required__not-supported-icon" />
+        <div class="c-minimum-version-required__not-supported-text">
+            {{ $t('pages.indexer_outdated_title', {
+                network: settings.getDisplay(),
+            }) }}
+        </div>
+    </q-card-section>
+    <q-card-section class="c-minimum-version-required__card-section">
+        <!--
+            indexer_outdated_desc_1: '(Need version { version } but ',
+            indexer_outdated_desc_2: '{ apiUrl }',
+            indexer_outdated_desc_3: ' is version { current })',
+        -->
+        <span class="c-minimum-version-required__not-supported-text">
+            {{ $t('pages.indexer_outdated_desc_1', {
+                version: required,
+            }) }}
+        </span>
+        <a
+            color="primary"
+            class="c-minimum-version-required__not-supported-text"
+            :href="`${settings.getIndexerApiEndpoint()}/v1/health`"
+            target="_blank"
+        >
+            {{ $t('pages.indexer_outdated_desc_2', {
+                apiUrl: settings.getIndexerApiEndpoint(),
+            }) }}
+        </a>
+        <span class="c-minimum-version-required__not-supported-text">
+            {{ $t('pages.indexer_outdated_desc_3', {
+                current: current,
+            }) }}
+        </span>
+    </q-card-section>
+</q-card>
+</template>
+
+<style lang="scss">
+.c-minimum-version-required {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__card {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 20px;
+        &-section {
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            flex-direction: column;
+            gap: 6px;
+            word-wrap: break-word;
+            &--title {
+                flex-direction: row;
+                padding: 25px 0 10px 0;
+                font-size: 18px
+            }
+        }
+    }
+
+    &__not-supported-icon {
+        font-size: 24px;
+    }
+
+    @media screen and (min-width: $breakpoint-md-min) {
+        width: 70%;
+        &__card-section {
+            flex-direction: row;
+        }
+    }
+}
+</style>
diff --git a/src/components/Token/HolderList.vue b/src/components/Token/HolderList.vue
index 9d3df9fb9..6f66ea193 100644
--- a/src/components/Token/HolderList.vue
+++ b/src/components/Token/HolderList.vue
@@ -1,322 +1,713 @@
-<script>
-import AddressField from 'components/AddressField';
-import DateField from 'components/DateField';
-import { formatWei } from 'src/lib/utils';
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- src/components/Token/HolderList.vue -->
+<script lang="ts" setup>
+// We import the needed libraries
+import { ref, computed, onBeforeMount, onMounted, Ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import AddressField from 'components/AddressField.vue';
+import MinimumVersionRequired from 'components/MinimumVersionRequired.vue';
+import TablePagination from 'src/components/Token/TablePagination.vue';
 import BigDecimal from 'js-big-decimal';
 import { BigNumber, ethers } from 'ethers';
-import { useChainStore } from 'src/core';
-export default {
+import { INDEXER_SUPPORT_TIME_OUT, useChainStore } from 'src/core';
+import {
+    EvmHolder,
+    IndexerHoldersResponse,
+    NativeCurrencyAddress,
+    ContractDisplayInfo,
+} from 'src/core/types';
+import {
+    pagination,            // Reactive pagination object. Represents current pagination state
+    default_rows_per_page_options,
+    setPaginationTotalNumber,
+} from 'src/lib/pagination';
+
+defineOptions({
     name: 'HolderList',
-    components: {
-        AddressField,
-        DateField,
+});
+
+// Default decimals
+const DEFAULT_DECIMALS = 18;
+
+// Default columns if user does not provide any
+const defaultColumns = ['rank', 'holder', 'balance', 'percentage_bar'];
+
+type Alignment = 'left' | 'center' | 'right';
+
+interface ContractProps {
+    address: string
+    properties?: {
+        decimals?: number
+        supply?: string
+        total_supply_ibc?: string
+        symbol?: string
+        price?: string
+    }
+}
+
+interface TableColumn {
+    name: string
+    label: string
+    align: Alignment
+    field: string
+    sortable?: boolean
+}
+
+// We define the props, including a new 'columns' array
+const props = withDefaults(
+    defineProps<{
+            contract?: ContractProps
+            columns?: string[]
+        }>(),
+    {},
+);
+
+// Access i18n
+const { t: $t, locale } = useI18n();
+
+// We will keep track of the system token from chain settings
+const systemToken = computed(() => useChainStore().currentChain.settings.getSystemToken());
+
+// We define a reference for system token contract
+const systemTokenContract = ref<ContractProps>({
+    address: systemToken.value.contract,
+    properties: {
+        decimals: systemToken.value.decimals || DEFAULT_DECIMALS,
+        supply: '0',
+        total_supply_ibc: '0',
+        symbol: systemToken.value.symbol,
     },
-    props: {
-        contract: {
-            type: Object,
-            required: true,
+} as ContractProps);
+
+// Our contract data
+const contract: Ref<ContractProps> = ref<ContractProps>(
+    props.contract
+        ? props.contract
+        : {
+            address: NativeCurrencyAddress,
+            properties: {
+                decimals: DEFAULT_DECIMALS,
+                supply: '0',
+                total_supply_ibc: '0',
+                symbol: '',
+                price: '',
+            },
         },
+);
+
+// Minimum version for the indexer
+const minimumVersion = '1.2.9';
+
+// Reactive references
+const weHaveIndexerSupport = ref(false);
+const holders = ref<EvmHolder[]>([]);
+const loadingRows = ref<number[]>([]);
+const loading = ref(true);
+const systemContractsList = ref('');
+const showSystemContracts = ref(false);
+
+
+// Chain settings
+const chainSettings = computed(() => useChainStore().currentChain.settings);
+
+// Decide which columns to show (either user-provided or default)
+const visibleColumns = computed(() => {
+    if (!props.columns || props.columns.length === 0) {
+        return defaultColumns;
+    }
+    return props.columns;
+});
+
+// Dictionary that maps each column name to a Quasar TableColumn
+const columnsDict: Record<string, TableColumn> = {
+    rank: {
+        name: 'rank',
+        field: 'rank',
+        label: 'Rank',
+        align: 'left',
     },
-    created(){
-        for (var i = 1; i <= this.pagination.rowsPerPage; i++) {
-            this.loadingRows.push(i);
-        }
+    holder: {
+        name: 'holder',
+        field: 'holder',
+        label: $t('components.holders.holder'),
+        align: 'left',
     },
-    async mounted() {
-        let list = await useChainStore().currentChain.settings.getContractManager().getSystemContractsList();
-        for(const contract in list.contracts){
-            this.systemContractsList += list.contracts[contract].address + ',';
-        }
-        this.systemContractsList.substr(this.systemContractsList.length -2, this.systemContractsList.length - 1);
-        await this.onRequest({
-            pagination: this.pagination,
-        });
+    address: {
+        name: 'address',
+        field: 'address',
+        label: 'Address',
+        align: 'left',
     },
-    data() {
-        let columns = [
-            {
-                name: 'holder',
-                label: this.$t('components.holders.holder'),
-                align: 'left',
-            },
-            {
-                name: 'balance',
-                label: this.$t('components.holders.balance'),
-                align: 'left',
-                sortable: true,
-            },
-            {
-                name: 'telos_supply_share',
-                label: '% ' + this.$t('components.holders.telos_supply'),
-                align: 'left',
-            },
-            {
-                name: 'supply_share',
-                label: '% ' + this.$t('components.holders.global_supply'),
-                align: 'left',
-            },
-            {
-                name: 'updated',
-                label: this.$t('global.updated'),
-                align: 'left',
-            },
-        ];
-        if(!this.contract.properties?.total_supply_ibc){
-            columns.splice(3, 1);
+    tag_name: {
+        name: 'tag_name',
+        field: 'tag_name',
+        label: 'Contract Name',
+        align: 'left',
+    },
+    balance: {
+        name: 'balance',
+        field: 'balance',
+        label: 'Balance',
+        align: 'left',
+    },
+    quantity: {
+        name: 'quantity',
+        field: 'quantity',
+        label: 'Quantity',
+        align: 'left',
+    },
+    percentage: {
+        name: 'percentage',
+        field: 'percentage',
+        label: 'percentage',
+        align: 'left',
+    },
+    percentage_bar: {
+        name: 'percentage_bar',
+        field: 'percentage_bar',
+        label: 'percentage',
+        align: 'left',
+    },
+    txn_count: {
+        name: 'txn_count',
+        field: 'txn_count',
+        label: 'Txn Count',
+        align: 'left',
+    },
+    value: {
+        name: 'value',
+        field: 'value',
+        label: 'Value (USD)',
+        align: 'left',
+    },
+};
+
+// This computed array transforms the visibleColumns into an array of Quasar columns
+const tableColumns = computed<TableColumn[]>(() =>
+    visibleColumns.value.map((colName) => {
+        if (columnsDict[colName]) {
+            return columnsDict[colName];
         }
+        // Fallback if the user passes a column not in the dictionary
         return {
-            columns: columns,
-            holders: [],
-            loadingRows: [],
-            loading: true,
-            systemContractsList: '',
-            showSystemContracts: false,
-            filterBy: this.filter,
-            pagination: {
-                sortBy: 'balance',
-                descending: true,
-                page: 1,
-                rowsPerPage: 10,
-                rowsNumber: 0,
-            },
+            name: colName,
+            field: colName,
+            label: colName,
+            align: 'left',
         };
-    },
-    methods: {
-        async onRequest(props) {
-            this.loading = true;
+    }),
+);
 
-            const { page, rowsPerPage, sortBy, descending } = props.pagination;
+// Prepare skeleton rows (loading placeholders)
+const updateLoadingRows = () => {
+    loadingRows.value = [];
+    for (let i = 1; i <= pagination.value.rowsPerPage; i++) {
+        loadingRows.value.push(i);
+    }
+};
 
-            const indexerApi = useChainStore().currentChain.settings.getIndexerApi();
-            let response = await indexerApi.get(this.getPath(props));
+onBeforeMount(() => {
+    updateLoadingRows();
+});
 
-            this.pagination.page = page;
-            this.pagination.rowsPerPage = rowsPerPage;
-            this.pagination.sortBy = sortBy;
-            this.pagination.descending = descending;
-            if (response.data?.total_count && this.pagination.rowsNumber !== response.data?.total_count) {
-                this.pagination.rowsNumber = response.data.total_count;
-            }
-            let holders = [];
-            for (let holder of response.data.results) {
-                holders.push(holder);
-            }
-            this.holders = holders;
-            this.loading = false;
-        },
-        getPath(props) {
-            const { page, rowsPerPage, descending } = props.pagination;
-            let path = `/v1/token/${this.contract.address}/holders?limit=${
-                rowsPerPage === 0 ? 10 : rowsPerPage
-            }`;
-            path += `&includeAbi=true&offset=${(page - 1) * rowsPerPage}`;
-            path += '&includePagination=true';
-            path = (!this.showSystemContracts) ? path + '&not=' + this.systemContractsList : path;
-            path += `&sort=${descending ? 'desc' : 'asc'}`;
-            return path;
-        },
-        formatWei,
-        displaySupplyShare(balance, supplies, decimals, fixed){
-            let share = new BigDecimal(balance).divide(new BigDecimal(supplies)).multiply(new BigDecimal('100'));
-            if(fixed){
-                if(share.compareTo(new BigDecimal('0.01')) ===  -1){
-                    return '< 0.01%';
-                }
-                share = share.round(fixed);
-            }
-            if(share.compareTo(new BigDecimal('0.000000000000000001')) === -1){
-                return '< 0.000000000000000001%';
+onMounted(async () => {
+    // Build a list of system contracts
+    const list = await chainSettings.value.getContractManager().getSystemContractsList();
+    for (const c in list.contracts) {
+        systemContractsList.value += list.contracts[c].address + ',';
+    }
+    // Remove trailing comma
+    if (systemContractsList.value.endsWith(',')) {
+        systemContractsList.value = systemContractsList.value.slice(0, -1);
+    }
+
+    // Remove the value column if no price is provided
+    if (!contract.value.properties?.price) {
+        const index = tableColumns.value.findIndex(col => col.name === 'value');
+        if (index !== -1) {
+            tableColumns.value.splice(index, 1);
+        }
+    }
+
+    // Check indexer support
+    weHaveIndexerSupport.value = chainSettings.value.hasIndexerSupportOver(minimumVersion);
+
+    // Listen for indexer readiness
+    chainSettings.value.indexerReady$.subscribe(() => {
+        weHaveIndexerSupport.value = chainSettings.value.hasIndexerSupportOver(minimumVersion);
+        console.log('HoldersList.onMounted() --> chainSettings.value.indexerReady$', { pagination: pagination.value });
+        onRequest();
+    });
+
+    setTimeout(() => {
+        console.log('HoldersList.onMounted() --> setTimeout() !!!!');
+        weHaveIndexerSupport.value = false;
+        loading.value = false;
+    }, INDEXER_SUPPORT_TIME_OUT);
+
+    // Retrieve total supply from chain for system token
+    chainSettings.value.getTelosApi().get('supply/total').then((res) => {
+        if (systemTokenContract.value.properties) {
+            const supplyNum = Number(res.data).toFixed(systemToken.value.decimals);
+            // Turn it into a string with no decimal point
+            const supply = supplyNum.split('.').join('');
+            systemTokenContract.value.properties.supply = supply;
+
+            // If no contract is provided, assume it's native
+            if (!props.contract && contract.value.properties) {
+                contract.value.properties.total_supply_ibc = supply;
+                contract.value.properties.supply = supply;
             }
-            return share.getValue() + '%';
-        },
-        displayBalance(balanceString, tokenDecimals){
-            const locale = this.$i18n.global.locale.value;
-            const bn = BigNumber.from(balanceString);
-            const formatted = ethers.utils.formatUnits(bn.toString(), (tokenDecimals));
-            return parseFloat(formatted).toLocaleString(locale);
-        },
+        }
+    });
+});
+
+// Internal pagination model
+const pagination_model = {
+    sortBy: 'balance',
+    descending: true,
+    page: 1,
+    rowsPerPage: 25,
+    rowsNumber: 0,
+};
+
+// Update URL query if pagination changes
+watch(
+    () => pagination.value,
+    (a) => {
+        pagination_model.page = pagination.value.page;
+        pagination_model.rowsPerPage = pagination.value.rowsPerPage;
+        pagination_model.rowsNumber = pagination.value.rowsNumber || 0;
+        onRequest();
     },
+    { deep: true },
+);
+// Our method for requesting the data
+const last = {
+    path: '',
 };
+async function onRequest() {
+    if (!weHaveIndexerSupport.value) {
+        console.log('onRequest() NO INDEXER; ----------------');
+        return;
+    }
+
+    const indexerApi = chainSettings.value.getIndexerApi();
+
+    const new_path = getPath();
+    if (new_path === last.path) {
+        return;
+    } else {
+        last.path = new_path;
+    }
+
+    // prepare skeleton rows
+    updateLoadingRows();
+    console.log('loading.value = true; ----------------');
+    loading.value = true;
+
+    const response = await indexerApi.get(new_path) as { data?: IndexerHoldersResponse };
+    if (response.data?.total_count && pagination_model.rowsNumber !== response.data?.total_count) {
+        pagination_model.rowsNumber = response.data.total_count;
+        setPaginationTotalNumber(pagination_model.rowsNumber);
+    }
+    const resultHolders: EvmHolder[] = [];
+    for (const entry of response.data?.results || []) {
+        const holder: EvmHolder = {
+            rank: 0,
+            txn_count: 0,
+            ...(entry as Partial<EvmHolder>),
+        } as EvmHolder;
+        resultHolders.push(holder);
+    }
+    holders.value = resultHolders;
+    loading.value = false;
+    console.log('loading.value = false; ----------------');
+}
+
+// Build the URL path for the request
+function getPath(): string {
+    const { page, rowsPerPage, descending } = pagination.value;
+    let basePath = '';
+
+    if (contract.value.address === NativeCurrencyAddress) {
+        basePath = '/v1/balances';
+    } else {
+        basePath = `/v1/token/${contract.value.address}/holders`;
+    }
+
+    let path = `${basePath}?limit=${rowsPerPage === 0 ? 10 : rowsPerPage}`;
+    path += '&includeAbi=true';
+    path += `&offset=${(page - 1) * rowsPerPage}`;
+    path += '&includePagination=true';
+
+    if (!showSystemContracts.value) {
+        path += `&not=${systemContractsList.value}`;
+    }
+
+    path += `&sort=${descending ? 'desc' : 'asc'}`;
+    return path;
+}
+
+// Utility to display the supply share
+function displaySupplyShare(
+    _balance: string,
+    _supplies: string,
+    decimals: number | undefined,
+    fixed: number | boolean,
+): string {
+    const balance = _balance.split('.').join('');
+    const supplies = _supplies.split('.').join('');
+    let result = '';
+
+    // Check if balance is zero
+    if (new BigDecimal(balance).compareTo(new BigDecimal('0')) === 0) {
+        return '0%';
+    }
+
+    const share = new BigDecimal(balance)
+        .divide(new BigDecimal(+supplies > 0 ? supplies : 1), decimals ? decimals : 0)
+        .multiply(new BigDecimal('100'));
+    const shareFixed = share.round(2);
+
+    if (share.compareTo(new BigDecimal('0.00001')) === -1) {
+        result = '< 0.00001%';
+    } else if (share.compareTo(new BigDecimal('0.0001')) === -1) {
+        result = '< 0.0001%';
+    } else if (share.compareTo(new BigDecimal('0.001')) === -1) {
+        result = '< 0.001%';
+    } else if (share.compareTo(new BigDecimal('0.01')) === -1) {
+        result = '< 0.01%';
+    } else if (+supplies > 0) {
+        if (fixed) {
+            result = shareFixed.getValue() + '%';
+        } else {
+            result = share.getValue() + '%';
+        }
+    } else {
+        result = '--%';
+    }
+
+    return result;
+}
+
+// Utility to display the quantity
+function displayQuantity(balanceString: string, tokenDecimals?: number): string {
+    const bn = BigNumber.from(balanceString);
+    const formatted = ethers.utils.formatUnits(bn.toString(), tokenDecimals || 0);
+    const result = parseFloat(formatted).toLocaleString(locale.value);
+    return result;
+}
+
+// Function that returns the symbol for the current token or fallback
+function getSymbol(): string {
+    return contract.value.properties?.symbol
+            || systemToken.value.symbol
+            || '???';
+}
+
+// Function to get contract name if available
+function getContractName(holderAddress: string): string {
+    const info = chainSettings.value
+        .getContractManager()
+        .getContractDisplayInfo(holderAddress) as never as ContractDisplayInfo | null;
+    return info?.name || '';
+}
+
+// Function to truncate an address
+function truncateAddress(address: string, chars = 6): string {
+    if (address.length <= chars * 2) {
+        return address;
+    }
+    const start = address.slice(0, chars);
+    const end = address.slice(-chars);
+    return start + '...' + end;
+}
+
+// Function to compute the fraction for percentage bar
+function computeBarValue(balanceString: string): number {
+    // We can attempt to parse a fraction from displaySupplyShare
+    // For simplicity, just parse it as a float if possible
+    const shareStr = displaySupplyShare(
+        balanceString,
+        contract.value.properties?.supply || '0',
+        contract.value.properties?.decimals || DEFAULT_DECIMALS,
+        false,
+    );
+        // If it starts with '<', assume a very small fraction
+    if (shareStr.startsWith('<')) {
+        return 0.0001;
+    }
+    if (shareStr === '--%') {
+        return 0;
+    }
+    // Remove '%' sign
+    const numeric = parseFloat(shareStr.replace('%', ''));
+    return numeric / 100;
+}
+
+function calculateDollarValue(row: EvmHolder): string {
+    try {
+        const token_price = contract.value.properties?.price || '0.0';
+        const token_decimals = contract.value.properties?.decimals || 0;
+        const price_decimals = token_price.split('.')[1]?.length || 0;
+        const balance = BigNumber.from(row.balance);
+        const price = BigNumber.from(token_price.split('.').join(''));
+        const value = balance.mul(price).div(BigNumber.from(10).pow(price_decimals));
+        const partial_result = ethers.utils.formatUnits(value.toString(), token_decimals);
+        const result = '$' + parseFloat(parseFloat(partial_result).toFixed(0))
+            .toLocaleString(locale.value);
+        return result;
+    } catch (e) {
+        console.error('HolderList.calculateDollarValue()', e);
+        return '--';
+    }
+}
 </script>
 
 <template>
-<q-table
-    v-if="!loading"
-    v-model:pagination="pagination"
-    :rows="holders"
-    :rows-per-page-label="$t('global.records_per_page')"
-    :binary-state-sort="true"
-    :row-key="row => row.address"
-    :columns="columns"
-    :rows-per-page-options="[10, 20, 50]"
-    @request="onRequest"
->
-    <template v-slot:header="props">
-        <q-tr :props="props">
-            <q-th
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-            >
-                <div class="u-flex--center-y">
-                    {{ col.label }}
-                </div>
-            </q-th>
-        </q-tr>
-    </template>
-    <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"
-                    :useHighlight="false"
-                />
-            </q-td>
-            <q-td key="balance" :props="props">
-                <span v-if="contract?.properties?.decimals">
-                    {{ displayBalance(props.row.balance, contract.properties?.decimals) }}
-                </span>
-                <span v-else>
-                    {{ props.row.balance }}
-                </span>
-            </q-td>
-            <q-td key="telos_supply_share" :props="props">
-                <span v-if="contract?.properties?.supply">
-                    <span>
-                        {{ displaySupplyShare(
-                            formatWei(
-                                props.row.balance,
-                                contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            formatWei(
-                                contract.properties.supply,
-                                contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            contract.properties?.decimals,
-                            2,
-                        )}}
-                    </span>
-                    <q-tooltip>
-                        {{ displaySupplyShare(
-                            formatWei(
-                                props.row.balance,
-                                contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            formatWei(
-                                contract.properties.supply,
-                                contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            contract.properties?.decimals,
-                            false,
-                        )}}
-                    </q-tooltip>
-                </span>
-            </q-td>
-            <q-td v-if="contract?.properties?.total_supply_ibc" key="supply_share" :props="props">
-                <span>
-                    <span>
-                        {{ displaySupplyShare(
-                            formatWei(
-                                props.row.balance,
-                                contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            contract.properties?.total_supply_ibc, // Already formatted
-                            contract.properties?.decimals,
-                            2,
-                        )}}
-                    </span>
-                    <q-tooltip>
-                        {{ displaySupplyShare(
-                            formatWei(
+<template v-if="!weHaveIndexerSupport && !loading">
+    <MinimumVersionRequired
+        class="c-minimum-version-required"
+        required="1.2.9"
+    />
+</template>
+<template v-else>
+    <div class="c-holder-list">
+        <!-- Table with data -->
+        <q-table
+            v-if="!loading"
+            v-model:pagination="pagination_model"
+            class="c-holder-list__table"
+            :rows="holders"
+            :columns="tableColumns"
+            :rows-per-page-label="$t('global.records_per_page')"
+            :binary-state-sort="true"
+            :hide-bottom='true'
+            :row-key="row => row.address"
+            :rows-per-page-options="default_rows_per_page_options"
+        >
+            <!-- Table header -->
+            <template v-slot:header="props">
+                <!-- Table pagination buttons in header -->
+                <q-tr>
+                    <q-td :colspan="tableColumns.length">
+                        <TablePagination/>
+                    </q-td>
+                </q-tr>
+                <q-tr :props="props">
+                    <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        class="c-holder-list__cell"
+                    >
+                        <div class="u-flex--center-y">
+                            {{ col.label }}
+                            <!-- Add downward arrow for 'balance' or 'quantity' columns -->
+                            <q-icon
+                                v-if="col.name === 'balance' || col.name === 'quantity'"
+                                name="arrow_downward"
+                                size="16px"
+                                class="q-ml-xs"
+                            />
+                        </div>
+                    </q-th>
+                </q-tr>
+            </template>
+
+            <!-- Table body -->
+            <template v-slot:body="props">
+                <q-tr :props="props">
+                    <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        class="c-holder-list__cell"
+                    >
+                        <!-- rank -->
+                        <div v-if="col.name === 'rank'" class="c-holder-list__cell-content">
+                            {{ props.row.rank }}
+                        </div>
+
+                        <!-- holder -->
+                        <div v-else-if="col.name === 'holder'" class="c-holder-list__cell-content">
+                            <AddressField
+                                :key="props.row.address + 'c'"
+                                :address="props.row.address"
+                                :truncate="DEFAULT_DECIMALS"
+                                :useHighlight="false"
+                            />
+                        </div>
+
+                        <!-- address -->
+                        <div v-else-if="col.name === 'address'" class="c-holder-list__cell-content">
+                            <router-link
+                                :to="{
+                                    name: 'address',
+                                    params: { address: props.row.address }
+                                }"
+                            >
+                                {{ truncateAddress(props.row.address) }}
+                            </router-link>
+                        </div>
+
+                        <!-- tag_name -->
+                        <div v-else-if="col.name === 'tag_name'" class="c-holder-list__cell-content">
+                            {{ getContractName(props.row.address) }}
+                        </div>
+
+                        <!-- balance (with symbol) -->
+                        <div v-else-if="col.name === 'balance'" class="c-holder-list__cell-content">
+                            {{ displayQuantity(props.row.balance, contract.properties?.decimals) }} {{ getSymbol() }}
+                        </div>
+
+                        <!-- quantity (just the number) -->
+                        <div v-else-if="col.name === 'quantity'" class="c-holder-list__cell-content">
+                            {{ displayQuantity(props.row.balance, contract.properties?.decimals) }}
+                        </div>
+
+                        <!-- percentage (old telos_supply_share) -->
+                        <div v-else-if="col.name === 'percentage'" class="c-holder-list__cell-content">
+                            {{ displaySupplyShare(
                                 props.row.balance,
-                                contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            contract.properties?.total_supply_ibc, // Already formatted
-                            contract.properties?.decimals,
-                            false,
-                        )}}
-                    </q-tooltip>
-                </span>
-            </q-td>
-            <q-td key="updated" :props="props">
-                <DateField :epoch="props.row.updated / 1000" />
-            </q-td>
-        </q-tr>
-    </template>
-    <template v-if="holders.length > 0" v-slot:bottom-row>
-        <q-toggle
-            v-model="showSystemContracts"
-            :label="$t('components.holders.show_system_contracts')"
-            color="primary"
-            checked-icon="visibility"
-            unchecked-icon="visibility_off"
-            @update:model-value="onRequest({pagination: pagination})"
-        />
-    </template>
-</q-table>
-<q-table
-    v-else
-    v-model:pagination="pagination"
-    :rows="loadingRows"
-    :rows-per-page-label="$t('global.records_per_page')"
-    :columns="columns"
-    :rows-per-page-options="[10, 20, 50]"
->
-    <template v-slot:header="props">
-        <q-tr :props="props">
-            <q-th
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-            >
-                <div class="u-flex--center-y">
-                    {{ col.label }}
-                </div>
-            </q-th>
-        </q-tr>
-    </template>
-    <template v-slot:body="">
-        <q-tr>
-            <q-td key="holder">
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="balance">
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="telos_supply_share">
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="supply_share" >
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="updated">
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-        </q-tr>
-    </template>
-</q-table>
+                                contract.properties?.supply || '0',
+                                contract.properties?.decimals || DEFAULT_DECIMALS,
+                                true
+                            ) }}
+                        </div>
+
+                        <!-- percentage_bar -->
+                        <div v-else-if="col.name === 'percentage_bar'" class="c-holder-list__cell-content">
+                            <div class="c-holder-list__cell-content-num">
+                                {{ displaySupplyShare(
+                                    props.row.balance,
+                                    contract.properties?.supply || '0',
+                                    contract.properties?.decimals || DEFAULT_DECIMALS,
+                                    true
+                                ) }}
+                            </div>
+                            <q-linear-progress
+                                class="c-holder-list__cell-content-bar"
+                                :value="computeBarValue(props.row.balance)"
+                                color="primary"
+                                track-color="grey-2"
+                            />
+                        </div>
+
+                        <!-- txn_count -->
+                        <div v-else-if="col.name === 'txn_count'">
+                            {{ props.row.txn_count }}
+                        </div>
+
+                        <!-- value -->
+                        <div v-else-if="col.name === 'value'">
+                            {{ calculateDollarValue(props.row) }}
+                        </div>
+
+                        <!-- fallback if user passes something not handled -->
+                        <div v-else>
+                            {{ props.row[col.field] }}
+                        </div>
+                    </q-td>
+                </q-tr>
+            </template>
+
+            <!-- Bottom row with table pagination buttons -->
+            <template v-slot:bottom-row>
+                <q-tr>
+                    <q-td :colspan="tableColumns.length" class="pagination-container">
+                        <TablePagination/>
+                    </q-td>
+                </q-tr>
+            </template>
+        </q-table>
+
+        <!-- Table skeleton when loading -->
+        <q-table
+            v-else
+            v-model:pagination="pagination"
+            :rows="loadingRows"
+            :columns="tableColumns"
+            :rows-per-page-label="$t('global.records_per_page')"
+            :rows-per-page-options="[10, 25, 50, 100]"
+        >
+            <template v-slot:header="props">
+                <q-tr :props="props">
+                    <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        class="c-holder-list__cell"
+                    >
+                        <div class="u-flex--center-y">
+                            {{ col.label }}
+                            <!-- Add downward arrow for 'balance' or 'quantity' columns -->
+                            <q-icon
+                                v-if="col.name === 'balance' || col.name === 'quantity'"
+                                name="arrow_downward"
+                                size="16px"
+                                class="q-ml-xs"
+                            />
+                        </div>
+                    </q-th>
+                </q-tr>
+            </template>
+            <template v-slot:body="">
+                <q-tr>
+                    <q-td
+                        v-for="col in tableColumns"
+                        :key="col.name"
+                        class="c-holder-list__cell"
+                    >
+                        <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                    </q-td>
+                </q-tr>
+            </template>
+        </q-table>
+    </div>
 </template>
+</template>
+
+<style lang="scss">
+.q-table .q-td.pagination-container {
+    padding: 4px 14px;
+}
+
+.c-holder-list {
+    &__cell {
+        padding: 7px 9px !important;
+        &-content {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+            &-num {
+                font-size: 14px;
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+.q-table .q-toggle {
+    font-size: 12px;
+    position: absolute;
+    bottom: 4px;
+}
 
-<style scoped lang="sass">
-.q-table .q-toggle
-    font-size: 12px
-    position: absolute
-    bottom: 4px
-.sortable
-    height: 60px
-    display: flex
-    align-items: center
+.sortable {
+    height: 60px;
+    display: flex;
+    align-items: center;
+}
 
-@media only screen and (max-width: 764px)
-    .q-table .q-toggle
-        display: none
+@media only screen and (max-width: 764px) {
+    .q-table .q-toggle {
+        display: none;
+    }
+}
 
+.c-minimum-version-required {
+    align-self: center;
+}
 </style>
diff --git a/src/components/Token/TablePagination.vue b/src/components/Token/TablePagination.vue
new file mode 100644
index 000000000..d8e886462
--- /dev/null
+++ b/src/components/Token/TablePagination.vue
@@ -0,0 +1,273 @@
+<script lang="ts" setup>
+// Import reactive shared pagination state and helper methods
+import {
+    pagination,
+    default_rows_per_page_options,
+    onPaginationChange,
+    setRouterInstances,
+    // setRouterInstances,
+} from 'src/lib/pagination';
+import { Pagination } from 'src/types';
+// import { useRouter, useRoute } from 'vue-router';
+
+import { onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+// Available rows per page options (10, 25, 50, etc.)
+const rowsPerPageOptions = default_rows_per_page_options;
+const isOnLastPage = ref(false);
+const endRow = ref(0);
+const isOnFirstPage = ref(true);
+const startRow = ref(0);
+
+// Internal pagination model
+const pagination_model = {
+    sortBy: 'balance',
+    descending: true,
+    page: 1,
+    rowsPerPage: 25,
+    rowsNumber: 0,
+};
+
+watch(
+    () => pagination.value,
+    (a) => {
+        console.log('TablePagination.watch() page:', pagination.value?.page, 'rowsPerPage:', pagination.value?.rowsPerPage, 'a:', a);
+        updatePaginationModel();
+    },
+);
+
+const updatePaginationModel = () => {
+    pagination_model.page = pagination.value.page;
+    pagination_model.rowsPerPage = pagination.value.rowsPerPage;
+    pagination_model.rowsNumber = pagination.value.rowsNumber || 0;
+    isOnLastPage.value = pagination_model.page === Math.ceil(
+        (pagination_model.rowsNumber ?? 0) / pagination_model.rowsPerPage,
+    );
+    endRow.value = Math.min(
+        pagination_model.page * pagination_model.rowsPerPage,
+        pagination_model.rowsNumber ?? 0,
+    );
+    isOnFirstPage.value = pagination_model.page <= 1;
+    startRow.value = (pagination_model.rowsNumber === 0) ? 0 : (pagination_model.page - 1) * pagination_model.rowsPerPage + 1;
+    console.log('TablePagination.updatePaginationModel()', {
+        pagination_model: JSON.parse(JSON.stringify(pagination_model)),
+        isOnLastPage: isOnLastPage.value,
+        endRow: endRow.value,
+        isOnFirstPage: isOnFirstPage.value,
+        startRow: startRow.value,
+    });
+};
+
+
+onMounted(() => {
+    updatePaginationModel();
+});
+
+// setPaginationChange
+const setPaginationChange = (props: { pagination: Pagination }) => {
+    onPaginationChange(props);
+    updatePaginationModel();
+};
+
+// Go to first page
+const goToFirstPage = () => {
+    if (isOnFirstPage.value) {
+        return;
+    }
+    setPaginationChange({
+        pagination: {
+            ...pagination.value,
+            page: 1,
+        },
+    });
+};
+
+// Go to previous page
+const goToPreviousPage = () => {
+    if (isOnFirstPage.value) {
+        return;
+    }
+    setPaginationChange({
+        pagination: {
+            ...pagination.value,
+            page: pagination.value.page - 1,
+        },
+    });
+};
+
+// Go to next page
+const goToNextPage = () => {
+    if (isOnLastPage.value) {
+        return;
+    }
+    setPaginationChange({
+        pagination: {
+            ...pagination.value,
+            page: pagination.value.page + 1,
+        },
+    });
+};
+
+// Go to last page
+const goToLastPage = () => {
+    if (isOnLastPage.value) {
+        return;
+    }
+    const lastPage = Math.ceil(
+        (pagination.value.rowsNumber ?? 0) / pagination.value.rowsPerPage,
+    ) || 1;
+    setPaginationChange({
+        pagination: {
+            ...pagination.value,
+            page: lastPage,
+        },
+    });
+};
+
+// Called when user changes rows-per-page in the <select>
+const onRowsPerPageChange = (newValue: number) => {
+    setPaginationChange({
+        pagination: {
+            ...pagination.value,
+            rowsPerPage: newValue,
+            // Always reset to the first page when changing the rowsPerPage
+            page: 1,
+        },
+    });
+};
+
+onMounted(() => {
+    setRouterInstances(useRouter(), useRoute());
+});
+
+</script>
+
+<template>
+<!-- This component displays pagination controls at the bottom of a table -->
+<div class="c-table-pagination">
+    <div class="c-table-pagination__page-size">
+        <span class="c-table-pagination__page-size-label">Records per page:</span>
+        <q-btn
+            flat
+            dense
+            round
+            color="default"
+            :label="pagination.rowsPerPage"
+            rightIcon="chevron_down"
+            class="c-table-pagination__page-size-select"
+        >
+            <q-menu cover anchor="center middle">
+                <q-item
+                    v-for="option in rowsPerPageOptions"
+                    :key="option"
+                    clickable
+                    @click="onRowsPerPageChange(option)"
+                >
+                    <q-item-section>{{ option }}</q-item-section>
+                </q-item>
+            </q-menu>
+            <i class="q-icon notranslate material-icons q-select__dropdown-icon" aria-hidden="true" role="presentation">arrow_drop_down</i>
+        </q-btn>
+    </div>
+
+    <div class="c-table-pagination__info">
+        <span class="c-table-pagination__info-range">
+            {{ startRow }}-{{ endRow }} of {{ pagination.rowsNumber }}
+        </span>
+    </div>
+
+    <div class="c-table-pagination__nav">
+        <!-- Go to first page -->
+        <q-btn
+            flat
+            dense
+            round
+            class="c-table-pagination__nav-button c-table-pagination__nav-button--first"
+            :disabled="pagination.page === 1"
+            icon="first_page"
+            @click="goToFirstPage()"
+        />
+
+        <!-- Go to previous page -->
+        <q-btn
+            flat
+            dense
+            round
+            class="c-table-pagination__nav-button c-table-pagination__nav-button--prev"
+            :disabled="pagination.page === 1"
+            icon="chevron_left"
+            @click="goToPreviousPage()"
+        />
+
+        <!-- Go to next page -->
+        <q-btn
+            flat
+            dense
+            round
+            class="c-table-pagination__nav-button c-table-pagination__nav-button--next"
+            icon="chevron_right"
+            @click="goToNextPage()"
+        />
+
+        <!-- Go to last page -->
+        <q-btn
+            flat
+            dense
+            round
+            class="c-table-pagination__nav-button c-table-pagination__nav-button--last"
+            icon="last_page"
+            @click="goToLastPage()"
+        />
+    </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+.c-table-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    font-size: 12px;
+
+    &__page-size {
+        display: flex;
+        align-items: center;
+        margin-right: 9px;
+
+        &-label {
+            margin-right: 6px;
+        }
+
+        &-select {
+            padding-left: 5px;
+        }
+    }
+
+    &__info {
+        margin-right: 16px;
+
+        &-range {
+            font-weight: 400;
+        }
+    }
+
+    &__nav {
+        display: flex;
+        align-items: center;
+        color: var(--pagination-buttons-color);
+    }
+
+    &__page-size-select {
+        .q-focus-helper {
+            display: none;
+        }
+    }
+
+    .q-select__dropdown-icon {
+        padding-right: 7px;
+        padding-left: 6px;
+    }
+}
+</style>
+
diff --git a/src/components/TransactionTable.vue b/src/components/TransactionTable.vue
index e190fcccd..b946c1019 100644
--- a/src/components/TransactionTable.vue
+++ b/src/components/TransactionTable.vue
@@ -1,5 +1,6 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
+// src/components/TransactionTable.vue
 import { useQuasar } from 'quasar';
 import { useRoute, useRouter } from 'vue-router';
 import { onBeforeMount, ref, watch } from 'vue';
diff --git a/src/config/chains/telos-evm/index.ts b/src/config/chains/telos-evm/index.ts
index 8211d75be..e01b221a1 100644
--- a/src/config/chains/telos-evm/index.ts
+++ b/src/config/chains/telos-evm/index.ts
@@ -205,6 +205,10 @@ const config: NetworkConfig =
                         'label': 'components.header.blocks',
                         'internalLink': 'blocks',
                     },
+                    {
+                        'label': 'components.header.accounts',
+                        'internalLink': 'accounts',
+                    },
                 ],
             },
             {
diff --git a/src/config/chains/telos-zkevm-testnet/index.ts b/src/config/chains/telos-zkevm-testnet/index.ts
index 813e1d0a2..18cc77f73 100644
--- a/src/config/chains/telos-zkevm-testnet/index.ts
+++ b/src/config/chains/telos-zkevm-testnet/index.ts
@@ -72,7 +72,7 @@ const config: NetworkConfig =
         'explorer': 'https://zktest.teloscan.io',
         'ecosystem': 'https://www.telos.net/ecosystem',
         'bridge': 'https://bridge.telos.net/bridge',
-        'indexer': 'https://api.zktest.teloscan.io/',
+        'indexer': 'https://api.zktest.teloscan.io',
         'contractsBucket': 'https://verified-evm-contracts.s3.amazonaws.com',
         'monitor': 'https://api.monitor-test.telos.net',
     },
diff --git a/src/core/chains/EVMChainSettings.ts b/src/core/chains/EVMChainSettings.ts
index eb35b5db6..d35d156d9 100644
--- a/src/core/chains/EVMChainSettings.ts
+++ b/src/core/chains/EVMChainSettings.ts
@@ -28,7 +28,7 @@ import { dateIsWithinXMinutes } from 'src/core/stores/utils/date-utils';
 import { createTraceFunction } from 'src/core/mocks/FeedbackStore';
 import { getCore } from 'src/core';
 import { WEI_PRECISION, PRICE_UPDATE_INTERVAL_IN_MIN } from 'src/core/stores/utils';
-import { BehaviorSubject, filter } from 'rxjs';
+import { BehaviorSubject, filter, take } from 'rxjs';
 import { TelosEvmApi } from '@telosnetwork/telosevm-js';
 
 import ContractManager from 'src/lib/contract/ContractManager';
@@ -88,6 +88,12 @@ export default abstract class EVMChainSettings implements ChainSettings {
     // This observable is used to check if the indexer health state was already checked
     indexerChecked$ = new BehaviorSubject(false);
 
+    // This observable is used to check if the indexer is ready
+    indexerReady$ = this.indexerChecked$.pipe(
+        filter(checked => checked),
+        take(1),
+    );
+
     // This function is used to trace the execution of the code
     trace = createTraceFunction('EVMChainSettings');
 
@@ -267,6 +273,56 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return this._indexerHealthState.state;
     }
 
+    hasIndexerSupportOver(version:string): boolean {
+        // version is a string like '1.2.3'
+        console.log('hasIndexerSupportOver', this.indexerHealthState.version, version);
+        if (this.indexerHealthState.version === undefined) {
+            return false;
+        } else {
+            const pass = this.compareVersions(this.indexerHealthState.version, version) >= 0;
+            if (!pass) {
+                console.error('Indexer API version not supported for this chain:', {
+                    network: this.network,
+                    version: this.indexerHealthState.version,
+                    required: version,
+                });
+            }
+            return pass;
+        }
+    }
+
+    compareVersions(v1: string, v2: string): number {
+        // We divide in parts A, B and C, and convert to number.
+        // If any part does not exist or is not a number, we use 0 by default
+        const [major1, minor1, patch1] = v1.split('.').map(num => parseInt(num, 10) || 0);
+        const [major2, minor2, patch2] = v2.split('.').map(num => parseInt(num, 10) || 0);
+
+        // Compare from left to right
+        if (major1 > major2) {
+            return 1;
+        }
+        if (major1 < major2) {
+            return -1;
+        }
+
+        if (minor1 > minor2) {
+            return 1;
+        }
+        if (minor1 < minor2) {
+            return -1;
+        }
+
+        if (patch1 > patch2) {
+            return 1;
+        }
+        if (patch1 < patch2) {
+            return -1;
+        }
+
+        // If we reach here, they are equal
+        return 0;
+    }
+
     isNative() {
         return false;
     }
diff --git a/src/core/mocks/ChainStore.ts b/src/core/mocks/ChainStore.ts
index a681d1b08..ed988c009 100644
--- a/src/core/mocks/ChainStore.ts
+++ b/src/core/mocks/ChainStore.ts
@@ -4,7 +4,7 @@
 declare const fathom: { trackEvent: (eventName: string) => void };
 
 import { RpcEndpoint, UAL } from 'universal-authenticator-library';
-import { TokenClass, Theme, Themes, SocialLink, FooterLinksConfig, HeaderMenuConfig, HeaderIndicators } from 'src/core/types';
+import { TokenClass, Theme, Themes, SocialLink, FooterLinksConfig, HeaderMenuConfig, HeaderIndicators, IndexerHealthResponse } from 'src/core/types';
 import TelosEVM from 'src/config/chains/telos-evm';
 import TelosEVMTestnet from 'src/config/chains/telos-evm-testnet';
 import { ethers } from 'ethers';
@@ -12,6 +12,9 @@ import { TelosEvmApi } from '@telosnetwork/telosevm-js';
 import { AxiosInstance } from 'axios';
 import ContractManager from 'src/lib/contract/ContractManager';
 import TelosZkEVM from 'src/config/chains/telos-zkevm-testnet';
+import { Observable } from 'rxjs';
+
+export const INDEXER_SUPPORT_TIME_OUT = 5000;
 
 export interface TeloscanEVMChainSettings {
     getStakedSystemToken(): TokenClass;
@@ -38,6 +41,7 @@ export interface TeloscanEVMChainSettings {
     getFooterLinks: () => FooterLinksConfig;
     getHeaderIndicators: () => HeaderIndicators;
     getHeaderMenuConfig: () => HeaderMenuConfig;
+    hasIndexerSupportOver(version:string): boolean;
     // Telos Specific
     getEthAccountByNativeAccount: (account: string) => Promise<string>;
     getNativeSupport(): TelosEvmApi | null;
@@ -47,6 +51,8 @@ export interface TeloscanEVMChainSettings {
     getContractManager(): ContractManager;
     getUAL(): UAL | null;
     getMonitorUrl(): string;
+    indexerHealthState: IndexerHealthResponse;
+    indexerReady$: Observable<boolean>;
 }
 
 export const evmSettings: { [network: string]: TeloscanEVMChainSettings } = {
diff --git a/src/core/types/Api.ts b/src/core/types/Api.ts
index ff81d4458..f6ea417e8 100644
--- a/src/core/types/Api.ts
+++ b/src/core/types/Api.ts
@@ -29,6 +29,11 @@ import {
 
 export const NativeCurrencyAddress = '___NATIVE_CURRENCY___';
 
+export interface ContractDisplayInfo {
+  name: string;
+  symbol?: string;
+}
+
 export type AccountCreatorInfo = {
   creator: string;
   timestamp: string;
diff --git a/src/core/types/EvmHolders.ts b/src/core/types/EvmHolders.ts
new file mode 100644
index 000000000..5a94b9ab2
--- /dev/null
+++ b/src/core/types/EvmHolders.ts
@@ -0,0 +1,25 @@
+import { IndexerContractData } from 'src/core/types/EvmTransaction';
+
+export interface EvmHolder {
+    rank: number;
+    address: string;
+    balance: string;
+    updated: number;
+    trxCount: number;
+}
+
+export interface IndexerHoldersResponse {
+    abi: {
+        [code: string]: string
+    };
+    code: number;
+    contracts: {
+        [contractHash: string]: IndexerContractData
+    };
+    message: string;
+    more: boolean;
+    results: EvmHolder[]
+    success: boolean;
+    total_count: number;
+}
+
diff --git a/src/core/types/IndexerTypes.ts b/src/core/types/IndexerTypes.ts
index 671238cff..e8b0ea424 100644
--- a/src/core/types/IndexerTypes.ts
+++ b/src/core/types/IndexerTypes.ts
@@ -149,6 +149,7 @@ export interface IndexerHealthResponse {
     blockNumber: number;
     blockTimestamp: string;
     secondsBehind: number;
+    version: string;
 }
 
 export interface IndexerTokenHoldersResponse {
diff --git a/src/core/types/index.ts b/src/core/types/index.ts
index f1e550cef..28eb70e38 100644
--- a/src/core/types/index.ts
+++ b/src/core/types/index.ts
@@ -6,6 +6,7 @@ export * from 'src/core/types/ChainInfo';
 export * from 'src/core/types/ChainSettings';
 export * from 'src/core/types/EvmBlockData';
 export * from 'src/core/types/EvmContractData';
+export * from 'src/core/types/EvmHolders';
 export * from 'src/core/types/EvmLog';
 export * from 'src/core/types/EvmRexDeposit';
 export * from 'src/core/types/EvmTransaction';
diff --git a/src/css/app.scss b/src/css/app.scss
index fcab94e42..06ce8a780 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -40,6 +40,8 @@ body.body--light {
     --notify-neutral: #4D4D4D;
     --notify-info: #008888;
 
+    --pagination-buttons-color: #{$grey-8};
+
     a:hover {
         color: $a-hover-light;
     }
@@ -79,11 +81,13 @@ body.body--dark {
         color: $a-hover-dark;
     }
 
+    --pagination-buttons-color: #{$grey-8};
+
     .vjs-tree-node.is-highlight,.vjs-tree-node:hover{
         background-color:#313436
     }
 
-    
+
 }
 
 a {
diff --git a/src/i18n/de-de/index.js b/src/i18n/de-de/index.js
index 23b09d203..7a73e095e 100644
--- a/src/i18n/de-de/index.js
+++ b/src/i18n/de-de/index.js
@@ -473,6 +473,8 @@ export default {
             home: 'Heim',
             more: 'Mehr',
             network: 'Netzwerk',
+            accounts: 'Top-Konten',
+            accounts_title: 'Top-Konten nach {symbol}-Saldo',
             open_language_switcher: 'open language switcher',
             search_failed: 'Suche fehlgeschlagen, bitte geben Sie einen gültigen Suchbegriff ein.',
             search_placeholder: 'Suche alles auf Telos',
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index b4f240fdc..656bba7de 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -62,6 +62,10 @@ export default {
             title: 'Page not found.',
             subtitle: 'Please double-check the URL. If it looks correct, try again later.',
         },
+        indexer_outdated_title: 'The current page is not supported on { network }.',
+        indexer_outdated_desc_1: '(Need version { version } but ',
+        indexer_outdated_desc_2: '{ apiUrl }/v1/health',
+        indexer_outdated_desc_3: ' is version { current })',
         issuer: 'Issuer',
         account_not_found: 'We could not find this account',
         approvals: 'Approvals',
@@ -472,6 +476,8 @@ export default {
             home: 'Home',
             more: 'More',
             network: 'Network',
+            accounts: 'Top Accounts',
+            accounts_title: 'Top Accounts by {symbol} Balance',
             open_language_switcher: 'Open language switcher',
             search_failed: 'Search failed, please enter a valid search term.',
             search_placeholder: 'Search Address/Block/TxnHash',
diff --git a/src/i18n/es-es/index.js b/src/i18n/es-es/index.js
index c2743c7dc..197739202 100644
--- a/src/i18n/es-es/index.js
+++ b/src/i18n/es-es/index.js
@@ -473,6 +473,8 @@ export default {
             home: 'Inicio',
             more: 'Más',
             network: 'Red',
+            accounts: 'Cuentas principales',
+            accounts_title: 'Principales cuentas por saldo de {symbol}',
             open_language_switcher: 'Abrir el selector de idioma',
             search_failed: 'La búsqueda falló, ingrese un término de búsqueda válido.',
             search_placeholder: 'Busca cualquier cosa en Telos',
diff --git a/src/i18n/fr-fr/index.js b/src/i18n/fr-fr/index.js
index 5eaa27ced..1b12b36f2 100644
--- a/src/i18n/fr-fr/index.js
+++ b/src/i18n/fr-fr/index.js
@@ -473,6 +473,8 @@ export default {
             home: 'Accueil',
             more: 'Plus',
             network: 'Réseau',
+            accounts: 'Comptes principaux',
+            accounts_title: 'Comptes principaux par solde de {symbol}',
             open_language_switcher: 'Ouvrir le sélécteur de language',
             search_failed: 'La recherche a échoué, veuillez saisir des mots clés de recherche corrects.',
             search_placeholder: 'Adresse, Tx, Bloc',
diff --git a/src/i18n/pt-br/index.js b/src/i18n/pt-br/index.js
index b993e1905..526f3758f 100644
--- a/src/i18n/pt-br/index.js
+++ b/src/i18n/pt-br/index.js
@@ -473,6 +473,8 @@ export default {
             home: 'Início',
             more: 'Mais',
             network: 'Rede',
+            accounts: 'Principais contas',
+            accounts_title: 'Principais contas por saldo de {symbol}',
             open_language_switcher: 'Abrir o seletor de idioma',
             search_failed: 'A busca falhou, insira um termo de pesquisa válido.',
             search_placeholder: 'Pesquise qualquer coisa no Telos',
diff --git a/src/lib/contract/ContractManager.js b/src/lib/contract/ContractManager.js
index 1015949a6..141cf1fc4 100644
--- a/src/lib/contract/ContractManager.js
+++ b/src/lib/contract/ContractManager.js
@@ -334,7 +334,7 @@ export default class ContractManager {
         }
         return null;
     }
-    async getContractDisplayInfo(address) {
+    getContractDisplayInfo(address) {
         const addressLower = typeof address === 'string' ? address.toLowerCase() : '';
         if (this.nullContractsManager.existsContract(addressLower)) {
             return this.nullContractsManager.getContractInfo(addressLower);
diff --git a/src/lib/pagination.ts b/src/lib/pagination.ts
new file mode 100644
index 000000000..4815f6f94
--- /dev/null
+++ b/src/lib/pagination.ts
@@ -0,0 +1,162 @@
+// Pagination
+
+import { Pagination } from 'src/types';
+import { Ref, ref, toRaw, watch } from 'vue';
+import { Router, RouteLocationNormalizedLoaded } from 'vue-router';
+
+export const internal_pagination: Pagination = {
+    sortBy: 'balance',
+    descending: true,
+    page: 1,
+    rowsPerPage: 25,
+    rowsNumber: 0,
+};
+
+export const pagination = ref<Pagination>({ ...internal_pagination });
+
+// default pagination options
+export const default_rows_per_page_options = [10, 25, 50];
+export const default_rows_per_pages = 25;
+
+const router: Ref<Router | null> = ref(null);
+const route: Ref<RouteLocationNormalizedLoaded | null> = ref(null);
+
+export const setRouterInstances = (rr: Router, rt: RouteLocationNormalizedLoaded) => {
+    console.log('pagination.setRouterInstances()', { rr, rt });
+    router.value = rr;
+    route.value = rt;
+    checkRouters();
+};
+
+// check if router instances are set
+const checkRouters = () => {
+    if (!router.value || !route.value) {
+        throw new Error('Router instances are not set');
+    }
+};
+
+// this function takes current pagination values and push them to the URL
+export const updateUrlParams = (newPage: number, newRows: number) => {
+    checkRouters();
+    const query = { ...route.value?.query ?? {} };
+
+    console.log('pagination.updateUrlParams()', { newPage, newRows });
+
+    // If page is 1, remove param; otherwise set it
+    if (newPage !== 1 || newRows !== default_rows_per_pages) {
+        // only if they are different from each other
+        if (query.p !== newPage.toString()) {
+            query.p = newPage.toString();
+            console.log('pagination.updateUrlParams() -> query.p: ', query.p);
+        }
+        if (query.ps !== newRows.toString()) {
+            query.ps = newRows.toString();
+            console.log('pagination.updateUrlParams() -> query.ps: ', query.ps);
+        }
+    } else {
+        delete query.p;
+        delete query.ps;
+    }
+
+    if (router.value) {
+        console.log('pagination.updateUrlParams() -->', { query });
+        router.value.replace({ query });
+    }
+};
+
+// this function takes the URL query and updates the pagination values
+export const takeUrlParams = () => {
+    checkRouters();
+    const query = route.value?.query;
+    let dirty = false;
+    if (query?.p) {
+        const p = parseInt(query.p as string, 10);
+        if (p !== internal_pagination.page) {
+            internal_pagination.page = p;
+            dirty = true;
+            console.log('pagination.takeUrlParams() -> page: ', internal_pagination.page);
+        }
+    } else {
+        console.log('pagination.takeUrlParams() -> page: 1');
+        dirty = true;
+        internal_pagination.page = 1;
+    }
+    if (query?.ps) {
+        const ps = parseInt(query.ps as string, 10);
+        if (ps !== internal_pagination.rowsPerPage) {
+            dirty = true;
+            internal_pagination.rowsPerPage = ps;
+            console.log('pagination.takeUrlParams() -> rowsPerPage: ', internal_pagination.rowsPerPage);
+        }
+    } else {
+        console.log('pagination.takeUrlParams() -> rowsPerPage: default');
+        dirty = true;
+        internal_pagination.rowsPerPage = default_rows_per_pages;
+    }
+
+    if (dirty) {
+        const value = { ...internal_pagination };
+        console.log('pagination.takeUrlParams() ---> final', value);
+        pagination.value = value;
+    }
+};
+
+export const onPaginationChange = (props: { pagination: Pagination }) => {
+    console.log('pagination.onPaginationChange()', {
+        rowsNumber: props.pagination.rowsNumber,
+        props_pagination: props.pagination,
+        rowsPerPage: pagination.value.rowsPerPage,
+        page: pagination.value.page,
+    });
+    if (
+        internal_pagination.page === props.pagination.page &&
+        internal_pagination.rowsPerPage === props.pagination.rowsPerPage &&
+        internal_pagination.sortBy === props.pagination.sortBy &&
+        internal_pagination.descending === props.pagination.descending
+    ) {
+        // No change
+        console.log('pagination.onPaginationChange() No change');
+        return;
+    }
+    // internal_pagination.page = props.pagination.page;
+    internal_pagination.page = props.pagination.page;
+    internal_pagination.rowsPerPage = props.pagination.rowsPerPage;
+    pagination.value.rowsNumber = internal_pagination.rowsNumber;
+    pagination.value.rowsPerPage = internal_pagination.rowsPerPage;
+    pagination.value.descending = internal_pagination.descending;
+    pagination.value.sortBy = internal_pagination.sortBy;
+    pagination.value.page = props.pagination.page;
+    console.log('pagination.onPaginationChange() pagination.value: ', { pagination: toRaw(pagination.value) });
+    updateUrlParams(props.pagination.page, props.pagination.rowsPerPage);
+};
+
+
+// set pagination total number
+export const setPaginationTotalNumber = (total: number) => {
+    internal_pagination.rowsNumber = total;
+    onPaginationChange({
+        pagination: {
+            ...internal_pagination,
+        },
+    });
+};
+
+// Update URL query if pagination changes
+watch(
+    () => [route.value?.query],
+    () => {
+        if (route.value?.query) {
+            console.log('pagination.watch(route.query)', { query: route.value?.query, rowsPerPage: pagination.value.rowsPerPage, page: pagination.value.page });
+            if (
+                internal_pagination.page === +(route.value?.query?.p ?? '') &&
+                internal_pagination.rowsPerPage === +(route.value?.query?.ps ?? '')
+            ) {
+                // No change
+                console.log('pagination.watch(route.query) No change');
+                return;
+            }
+            takeUrlParams();
+        }
+    },
+    { deep: true, immediate: true },
+);
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 73be988e7..3ef6f5b1d 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -32,15 +32,22 @@ export const LOGIN_DATA_KEY = 'loginData';
 export const DEFAULT_CHAIN_ID = '40'; // Telos Mainnet
 
 export function formatWei(bn, tokenDecimals, displayDecimals) {
-    const amount = BigNumber.from(bn);
-    const formatted = ethers.utils.formatUnits(amount.toString(), (tokenDecimals || WEI_PRECISION));
-    let str = formatted.toString();
-    str = str.padEnd(str.length + displayDecimals, '0');
-    if(displayDecimals > 0 && str.includes('.')) {
-        const parts = str.split('.');
-        return parts[0] + '.' + parts[1].slice(0, displayDecimals);
+    try {
+        const amount = BigNumber.from(bn);
+        const formatted = ethers.utils.formatUnits(amount.toString(), (tokenDecimals || WEI_PRECISION));
+        let str = formatted.toString();
+        str = str.padEnd(str.length + displayDecimals, '0');
+        if(displayDecimals > 0 && str.includes('.')) {
+            const parts = str.split('.');
+            return parts[0] + '.' + parts[1].slice(0, displayDecimals);
+        }
+        console.log('formatWei()', { str, bn, tokenDecimals, displayDecimals });
+        return str;
+    } catch (e) {
+        console.log('formatWei()', { bn, tokenDecimals, displayDecimals, e });
+        console.error('formatWei() error', e);
+        return '0';
     }
-    return str;
 }
 
 export function isValidAddressFormat(ethAddressString) {
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index 76eb51cde..6994201fd 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -321,7 +321,11 @@ async function loadAccount() {
                 <NFTList :address="contract.address" filter="contract" />
             </q-tab-panel>
             <q-tab-panel v-if="isToken" name="holders">
-                <HolderList v-if="contract" :contract="contract" />
+                <HolderList
+                    v-if="contract"
+                    :contract="contract"
+                    :columns="['holder','quantity','percentage_bar','value']"
+                />
             </q-tab-panel>
             <q-tab-panel v-else name="internaltx">
                 <InternalTransactionFlatTable
diff --git a/src/pages/Holders.vue b/src/pages/Holders.vue
deleted file mode 100644
index 19e55414b..000000000
--- a/src/pages/Holders.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-export default {
-    name: 'HoldersPage',
-    components: {},
-    data() {
-        return {};
-    },
-};
-</script>
-
-<template>
-<div></div>
-</template>
-
-<style lang="sass" scoped></style>
diff --git a/src/pages/HoldersPage.vue b/src/pages/HoldersPage.vue
new file mode 100644
index 000000000..12924cae8
--- /dev/null
+++ b/src/pages/HoldersPage.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// src/pages/HoldersPage.vue
+
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useChainStore } from 'src/core';
+import HolderList from 'components/Token/HolderList.vue';
+
+
+
+const { t: $t } = useI18n();
+const systemToken = computed(() => useChainStore().currentChain.settings.getSystemToken());
+const symbol = computed(() => systemToken.value.symbol);
+
+</script>
+
+<template>
+<q-page class="c-holders">
+    <div class="c-holders__header">
+        <span class="c-holders__header-title">{{ $t('components.header.accounts_title', { symbol }) }}</span>
+    </div>
+
+    <div class="c-holders__main-container">
+        <div class="c-holders__main-content">
+            <HolderList
+                :columns="['address','tag_name','balance','percentage']"
+            />
+        </div>
+    </div>
+
+</q-page>
+</template>
+<style lang="scss">
+
+.c-holders {
+    @include page-container;
+
+    &__header {
+        @include page-header;
+        &-block-num {
+            font-size: 1.5rem;
+            margin-left: 10px;
+        }
+    }
+    &__main-container {
+        background: transparent !important;
+    }
+    &__main-content {
+        padding: 0px;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+</style>
+
diff --git a/src/router/routes.js b/src/router/routes.js
index d86a3b143..5ff68a855 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -86,12 +86,12 @@ const routes = [
         }],
     },
     {
-        path: '/holders',
+        path: '/accounts',
         component: () => import('layouts/MainLayout.vue'),
         children: [{
             path: '',
-            name: 'holders',
-            component: () => import('pages/Holders.vue'),
+            name: 'accounts',
+            component: () => import('pages/HoldersPage.vue'),
             meta: { networkChange: null },
         }],
     },
diff --git a/src/types/Pagination.ts b/src/types/Pagination.ts
index 0afc4a894..6b150e009 100644
--- a/src/types/Pagination.ts
+++ b/src/types/Pagination.ts
@@ -3,7 +3,7 @@ export type Pagination = {
     descending: boolean;
     page: number;
     rowsPerPage: number;
-    rowsNumber: number;
+    rowsNumber?: number;
 }