diff --git a/.eslintrc.js b/.eslintrc.js
index f5746a21f..d2f28d9c4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -7,6 +7,7 @@ module.exports = {
         sourceType: 'module',
     },
     env: {
+        'es2020': true,
         'browser': true,
         'es2021': true,
         'amd': true,
@@ -35,7 +36,6 @@ module.exports = {
         'comma-dangle': ['error', 'always-multiline'],
         'indent': ['error', 4],
         'quotes': ['error', 'single'],
-        'max-len': ['error', { 'code': 120 }],
         'eol-last': ['error', 'always'],
         'object-curly-spacing': ['error', 'always'],
         'array-bracket-spacing': ['error', 'never'],
@@ -55,7 +55,8 @@ module.exports = {
         }],
         'no-return-assign': ['error', 'always'],
         'no-param-reassign': 'error',
-
+        'no-unused-vars': 'off',
+        '@typescript-eslint/no-unused-vars': ['error'],
 
         'vue/html-indent': ['warn', 4, { 'baseIndent': 0 }],
         'vue/max-attributes-per-line': ['warn', {
diff --git a/.gitignore b/.gitignore
index c53a8a538..cfc0e8afc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,9 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# Locks
+yarn.lock
+
 # Editor directories and files
 .idea
 *.suo
diff --git a/env.js b/env.js
index 7fc74a2ee..f1df1cf4a 100644
--- a/env.js
+++ b/env.js
@@ -25,9 +25,11 @@ const TESTNET = {
     HYPERION_ENDPOINT: 'https://testnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer-test.telos.net',
     TELOS_API_ENDPOINT: 'https://api-dev.telos.net/v1', //'http://localhost:9999/v1', //for local instance of api
+    INDEXER_API_ENDPOINT: 'https://api.testnet.teloscan.io/v1',
     VERIFIED_CONTRACTS_BUCKET: 'verified-evm-contracts-testnet',
     STAKED_TLOS_CONTRACT_ADDRESS: '0xa9991E4daA44922D00a78B6D986cDf628d46C4DD',
     TELOS_ESCROW_CONTRACT_ADDRESS: '0x7E9cF9fBc881652B05BB8F26298fFAB538163b6f',
+    MULTICALL_CONTRACT_ADDRESS: '0x39b0CF441E616e4e21a5f7b37c9CE0Ca750bd05B',
     OREID_APP_ID: 't_1e0417d2456e401893ec106e5e4c6314',
     OREID_APP_ID_NATIVE: 't_a61e9926d5204387a9ac113dfce7cbc5',
 };
@@ -45,10 +47,12 @@ const MAINNET = {
     NETWORK_EVM_NAME: 'telos-evm',
     HYPERION_ENDPOINT: 'https://mainnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer.telos.net',
-    TELOS_API_ENDPOINT: 'https://api.telos.net/v1', //'http://localhost:9999/v1', //for local instance of api
+    TELOS_API_ENDPOINT: 'https://api.telos.net/v1',  //'http://localhost:9999/v1', //for local instance of api
+    INDEXER_API_ENDPOINT: 'https://api.teloscan.io/v1',
     VERIFIED_CONTRACTS_BUCKET: 'verified-evm-contracts',
     STAKED_TLOS_CONTRACT_ADDRESS: '0xB4B01216a5Bc8F1C8A33CD990A1239030E60C905',
     TELOS_ESCROW_CONTRACT_ADDRESS: '0x95F5713A1422Aa3FBD3DCB8D553945C128ee3855',
+    MULTICALL_CONTRACT_ADDRESS: '0xdDCbf776dF3dE60163066A5ddDF2277cB445E0F3',
     OREID_APP_ID: 'p_b5cfbadeb17a44bdaf01e73b3120d202',
     OREID_APP_ID_NATIVE: 'p_751f87258d5b40998b55c626d612fd4e',
 };
diff --git a/package.json b/package.json
index e70f1ac4c..5562a09bb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "teloscan",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "description": "Teloscan block explorer",
   "productName": "Teloscan",
   "author": "Jesse Schulman <jesse@caleos.io>",
@@ -37,9 +37,11 @@
     "fs": "^0.0.1-security",
     "highlight.js": "10",
     "highlightjs-solidity": "^2.0.3",
+    "js-big-decimal": "^1.4.1",
     "moment": "^2.29.4",
     "oreid-js": "^4.7.1",
     "oreid-webpopup": "^2.4.0",
+    "qrious": "^4.0.2",
     "quasar": "2",
     "rxjs": "^7.8.0",
     "ual-anchor": "^1.0.0",
@@ -48,9 +50,9 @@
     "vue": "3",
     "vue-i18n": "^9.0.0",
     "vue-inline-svg": "^3.1.2",
+    "vue-json-pretty": "^2.2.4",
     "vue-json-viewer": "3",
     "vue-router": "4",
-    "vue3-click-away": "^1.2.4",
     "vuex": "4",
     "web3": "^4.0.1"
   },
@@ -60,6 +62,7 @@
     "@babel/preset-env": "7.19.3",
     "@babel/preset-typescript": "^7.23.0",
     "@quasar/app-webpack": "3.6.2",
+    "@quasar/quasar-app-extension-qmediaplayer": "^2.0.0-beta.6",
     "@types/jest": "29.1.1",
     "@types/lodash": "^4.14.182",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
diff --git a/public/branding/stlos.png b/public/branding/stlos.png
deleted file mode 100644
index e1bc8030b..000000000
Binary files a/public/branding/stlos.png and /dev/null differ
diff --git a/public/branding/telos-logo-dark.svg b/public/branding/telos-logo-dark.svg
deleted file mode 100644
index 881e57253..000000000
Binary files a/public/branding/telos-logo-dark.svg and /dev/null differ
diff --git a/public/branding/telos-logo.svg b/public/branding/telos-logo.svg
deleted file mode 100644
index 716843365..000000000
Binary files a/public/branding/telos-logo.svg and /dev/null differ
diff --git a/public/branding/telos.png b/public/branding/telos.png
new file mode 100644
index 000000000..2be9c2c7c
Binary files /dev/null and b/public/branding/telos.png differ
diff --git a/quasar.conf.js b/quasar.conf.js
index a962062c9..df0aa4be3 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -44,7 +44,7 @@ module.exports = function(/* ctx */) {
         ],
 
         // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
-        css: ['fonts/silka/silka.css', 'app.sass'],
+        css: ['fonts/silka/silka.css', 'app.scss'],
 
         // https://github.com/quasarframework/quasar/tree/dev/extras
         extras: [
@@ -70,6 +70,11 @@ module.exports = function(/* ctx */) {
                 chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin);
             },
 
+            scssLoaderOptions: {
+                additionalData: '@import "~src/css/global/global-index.scss";',
+                sourceMap: false, // prevent issue where changing style in devtools breaks page styles
+            },
+
             // transpile: false,
 
             // Add dependencies for transpiling with Babel (Array of string/regex)
@@ -98,7 +103,14 @@ module.exports = function(/* ctx */) {
         framework: {
             iconSet: 'material-icons', // Quasar icon set
             lang: 'en-US', // Quasar language pack
-            config: {},
+            config: {
+                brand: {
+                    // brand colors
+                    primary: '#8B3F98',
+                    secondary: '#348DCC',
+                    accent: '#73C58F',
+                },
+            },
 
             // Possible values for "importStrategy":
             // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives
@@ -118,7 +130,7 @@ module.exports = function(/* ctx */) {
 
         // animations: 'all', // --- includes all animations
         // https://quasar.dev/options/animations
-        animations: [],
+        animations: ['fadeIn', 'fadeOut'],
 
         // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
         ssr: {
diff --git a/quasar.extensions.json b/quasar.extensions.json
index 7a73a41bf..9cef7b836 100644
--- a/quasar.extensions.json
+++ b/quasar.extensions.json
@@ -1,2 +1,3 @@
 {
+  "@quasar/qmediaplayer": {}
 }
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 3c670a318..5829078c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,42 +1,77 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import moment from 'moment';
 
 import { getAntelope, useChainStore } from 'src/antelope';
 import { TELOS_NETWORK_NAMES } from 'src/antelope/mocks/chain-constants';
+import { indexerApi } from 'src/boot/telosApi';
+import { ual } from 'src/boot/ual';
+import { providerManager } from 'src/boot/evm';
 
-export const isTodayBeforeTelosCloudDown = new Date().getTime() < new Date('2023-12-31').getTime();
-
-export default defineComponent({
-    name: 'App',
-    mounted() {
-        const network = useChainStore().currentChain.settings.getNetwork();
-        if (TELOS_NETWORK_NAMES.includes(network)) {
-            const script = document.createElement('script');
-            script.src = 'https://cdn.usefathom.com/script.js';
-            script.dataset.site = 'PDKJSBKL';
-            script.dataset.spa = 'auto';
-            script.defer = true;
-            document.body.appendChild(script);
+const $store = useStore();
+const { t: $t } = useI18n();
+const $q = useQuasar();
+
+// computed
+const isNative = computed(() => $store.getters['login/isNative']);
+
+onMounted(async () => {
+    const network = useChainStore().currentChain.settings.getNetwork();
+    if (TELOS_NETWORK_NAMES.includes(network)) {
+        const script = document.createElement('script');
+        script.src = 'https://cdn.usefathom.com/script.js';
+        script.dataset.site = 'PDKJSBKL';
+        script.dataset.spa = 'auto';
+        script.defer = true;
+        document.body.appendChild(script);
+    }
+
+    const health = await indexerApi.get('/health');
+
+    if (health.data?.secondsBehind > 3) {
+        let behindBy = moment(health.data.secondsBehind * 1000).utc().format('HH:mm:ss');
+        if (health.data?.secondsBehind > 86400) {
+            const behindByHours = Math.round(health.data.secondsBehind / 60 / 60);
+            const behindByDays = Math.floor(health.data.secondsBehind / 60 / 60 / 24);
+            const behindByLeft = behindByHours - (behindByDays * 24);
+            const behindByLeftStr = (behindByLeft === 0)
+                ? ''
+                : $t('global.and') + ' ' + behindByLeft + ' ' + $t('global.hours');
+            behindBy = (behindByDays > 0)
+                ? behindByDays + ' ' + $t('global.days') + ' ' + behindByLeftStr
+                : behindByHours + ' ' + $t('global.hours');
         }
+        $q.notify({
+            type: 'negative',
+            timeout: 12000,
+            progress: true,
+            message: $t('global.not_synced'),
+            caption: $t('global.data_behind_by') + ' <strong>' +
+                behindBy + '</strong>. <br>' + $t('global.try_reloading'),
+            html: true,
+        });
+    }
 
-        if (isTodayBeforeTelosCloudDown) {
-            getAntelope().config.notifyRememberInfoHandler(
-                this.$t('temporal.telos_cloud_discontinued_title'),
-                [{
-                    tag: 'p',
-                    class: 'c-notify__message--subtitle',
-                    text: this.$t('temporal.telos_cloud_discontinued_message_title'),
-                }, {
-                    tag: 'p',
-                    class: '',
-                    text: this.$t('temporal.telos_cloud_discontinued_message_body'),
-                }],
-                '',
-                'telos-cloud-discontinued',
-            );
+    // On login we must set the address and record the provider
+    getAntelope().events.onLoggedOut.subscribe(() => {
+        const loginData = localStorage.getItem('loginData');
+        if (isNative.value) {
+            if (!loginData) {
+                return;
+            }
+            const loginObj = JSON.parse(loginData);
+            const wallet = ual.getAuthenticators().availableAuthenticators.find(a => a.getName() === loginObj.provider);
+            wallet?.logout();
         }
-    },
+        $store.commit('login/setLogin', {});
+        localStorage.removeItem('loginData');
+        providerManager.setProvider(null);
+    });
 });
+
 </script>
 <template>
 <div id="q-app">
diff --git a/src/antelope/mocks/AccountStore.ts b/src/antelope/mocks/AccountStore.ts
index 230e2f5a2..f3fa33482 100644
--- a/src/antelope/mocks/AccountStore.ts
+++ b/src/antelope/mocks/AccountStore.ts
@@ -65,7 +65,6 @@ class AccountStore {
     }
 
     logout() {
-        console.log('AccountStore.logout()');
         currentAuthenticator.logout();
         currentAuthenticator = {} as EVMAuthenticator;
         currentAccount = null;
diff --git a/src/antelope/types/EvmContractData.ts b/src/antelope/types/EvmContractData.ts
index 9c081b5d2..5961e1c00 100644
--- a/src/antelope/types/EvmContractData.ts
+++ b/src/antelope/types/EvmContractData.ts
@@ -82,20 +82,26 @@ export interface EvmContractCalldata {
     symbol?: string;
 }
 
-export interface EvmContractFactoryData {
+export interface EvmContractData {
+    symbol?: string;
+    creator?: string;
     address: string;
+    fromTrace?: boolean;
     abi?: string | EvmABI
-    block?: number;
-    calldata?: string;
-    creator?: string;
+    trace_address?: string; // same attribute (raw)
+    traceAddress?: string;  // same attribute (processed)
+    logoURI?: string;
+    supply?: string; // string representation of number
+    calldata?: string; // string holding JSON
     decimals?: number | null;
-    fromTrace?: boolean;
-    metadata?: string;
-    name?: string;
+    name?: string | null;
+    block?: number;
     supportedInterfaces?: string[];
-    symbol?: string;
-    traceAddress?: string;
     transaction?: string;
+}
+
+export interface EvmContractFactoryData extends EvmContractData {
+    metadata?: string;
     timestamp?: string;
     manager?: EvmContractManagerI;
 }
diff --git a/src/antelope/types/EvmTransaction.ts b/src/antelope/types/EvmTransaction.ts
index 2fe5a9958..5b8051b0d 100644
--- a/src/antelope/types/EvmTransaction.ts
+++ b/src/antelope/types/EvmTransaction.ts
@@ -1,7 +1,7 @@
 import { ethers } from 'ethers';
 import { NftTokenInterface } from 'src/antelope/types';
 
-export type EvmTransactionTopic = string[];
+export type EvmTransactionTopic = string;
 
 export interface EvmTransactionLog {
     address: string;
@@ -21,7 +21,7 @@ export interface EvmTransaction {
     from: string;
     gasLimit: string; // string representation of hex number
     gasPrice: string; // string representation of hex number
-    gasused: string; // string representation of hex number
+    gasUsed: string; // string representation of hex number
     hash: string;
     index: number;
     input: string;
@@ -32,11 +32,26 @@ export interface EvmTransaction {
     s: string;
     status: string; // string representation of hex number
     timestamp: number; // epoch in milliseconds
-    to: string;
+    to: string | null; // null if contract creation
     v: string;
     value: string; // string representation of hex number
 }
 
+export interface EvmTransactionParsed extends EvmTransaction {
+    gasLimitBn: ethers.BigNumber;
+    gasPriceBn: ethers.BigNumber;
+    gasUsedBn: ethers.BigNumber;
+    valueBn: ethers.BigNumber;
+    logsArray: EvmTransactionLog[];
+}
+
+export interface EvmContractFunctionParameter {
+    name: string;
+    type: string;
+    arrayChildren: string | false;
+    value: (string | number | boolean | null | ethers.BigNumber)[];
+}
+
 export interface TransactionValueData {
     amount: number;
     symbol: string;
diff --git a/src/antelope/wallets/authenticators/OreIdAuth.ts b/src/antelope/wallets/authenticators/OreIdAuth.ts
index b1561bee9..dca668bc9 100644
--- a/src/antelope/wallets/authenticators/OreIdAuth.ts
+++ b/src/antelope/wallets/authenticators/OreIdAuth.ts
@@ -96,7 +96,7 @@ export class OreIdAuth extends EVMAuthenticator {
     }
 
     async login(network: string): Promise<addressString | null> {
-        console.log('login', network);
+        this.trace('login', network);
         const chainSettings = this.getChainSettings();
         const trackSuccessfulLogin = () => {
             this.trace('login', 'trackAnalyticsEvent -> generic login succeeded', TELOS_ANALYTICS_EVENT_NAMES.loginSuccessful);
diff --git a/src/antelope/wallets/authenticators/WalletConnectAuth.ts b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
index 8a2fe4776..f0d9a4737 100644
--- a/src/antelope/wallets/authenticators/WalletConnectAuth.ts
+++ b/src/antelope/wallets/authenticators/WalletConnectAuth.ts
@@ -63,9 +63,6 @@ export class WalletConnectAuth extends EVMAuthenticator {
         this.options = options;
         this.wagmiClient = wagmiClient;
         this._debouncedPrepareTokenConfigResolver = null;
-
-        console.log('this.options, this.wagmiClient', this.options, this.wagmiClient);
-
         this.web3Modal = new Web3Modal(this.options, this.wagmiClient);
     }
 
diff --git a/src/antelope/wallets/init.ts b/src/antelope/wallets/init.ts
index 3031536dd..632611e42 100644
--- a/src/antelope/wallets/init.ts
+++ b/src/antelope/wallets/init.ts
@@ -20,7 +20,6 @@ export function initAntelope(app: App) {
     };
 
     const projectId = process.env.PROJECT_ID || '14ec76c44bae7d461fa0f5fd5f8a9da1';
-    console.log('process.env', process.env);
     const chains = [telos, telosTestnet];
 
     const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
diff --git a/src/antelope/wallets/utils/currency-utils.ts b/src/antelope/wallets/utils/currency-utils.ts
index 5d54ccdad..be3f2c673 100644
--- a/src/antelope/wallets/utils/currency-utils.ts
+++ b/src/antelope/wallets/utils/currency-utils.ts
@@ -129,7 +129,7 @@ export function prettyPrintCurrency(
     }
 
     const decimalSeparator = getDecimalSeparatorForLocale(locale);
-    const trailingZeroesRegex = new RegExp(`\\${decimalSeparator}?0+(\\D|$)`, 'g');
+    const trailingZeroesRegex = new RegExp(`(\\d)\\${decimalSeparator}0+(\\D|$)`, 'g');
 
     const decimalOptions : Record<string, number | undefined> = {
         maximumFractionDigits: precision,
@@ -165,7 +165,7 @@ export function prettyPrintCurrency(
             }).format(amount);
 
         if ((trimZeroes || precision === 0) && finalFormattedValue.indexOf(decimalSeparator) > -1) {
-            finalFormattedValue = finalFormattedValue.replace(trailingZeroesRegex, '');
+            finalFormattedValue = finalFormattedValue.replace(trailingZeroesRegex, '$1');
         }
 
         return finalFormattedValue;
@@ -205,7 +205,7 @@ export function prettyPrintCurrency(
         }
 
         if ((trimZeroes || precision === 0) && finalFormattedValue.indexOf(decimalSeparator) > -1) {
-            finalFormattedValue = finalFormattedValue.replace(trailingZeroesRegex, '');
+            finalFormattedValue = finalFormattedValue.replace(trailingZeroesRegex, '$1');
         }
 
         if (precision === 2 && tokenDecimals === 2 && currency) {
diff --git a/src/assets/2799006.jpg b/src/assets/2799006.jpg
deleted file mode 100644
index 5a98ca82b..000000000
Binary files a/src/assets/2799006.jpg and /dev/null differ
diff --git a/src/assets/Teloscan_logo.svg b/src/assets/Teloscan_logo.svg
deleted file mode 100644
index 666107983..000000000
--- a/src/assets/Teloscan_logo.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-<svg width="74" height="24" viewBox="0 0 74 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.94978 23.5665H10.3693V21.3984H8.10689C6.22157 21.3984 5.5617 20.3615 5.5617 18.6019V9.33235H10.5892V7.22707H5.5617V2.48234H3.23647V6.4101C3.23647 6.94427 2.89083 7.22707 2.45092 7.22707H0V9.33235H3.07936V18.6333C3.07936 21.9326 4.93326 23.5665 7.94978 23.5665Z" fill="white"/>
-<path d="M21.8936 23.975C25.727 23.975 28.5865 21.8069 29.4977 18.759H26.9211C26.167 20.6757 24.0931 21.7126 21.925 21.7126C18.5628 21.7126 16.4575 19.5445 16.3319 16.2766H29.6548V15.1769C29.6548 10.4635 26.7011 6.81858 21.7364 6.81858C17.2745 6.81858 13.7238 10.1807 13.7238 15.3968C13.7238 20.2986 16.8975 23.975 21.8936 23.975ZM16.3947 14.0771C16.6461 11.0606 19.0027 9.08097 21.7364 9.08097C24.5016 9.08097 26.7954 10.8092 27.0154 14.0771H16.3947Z" fill="white"/>
-<path d="M36.3524 23.5665H37.5464V21.367H36.7923C36.0067 21.367 35.5982 20.8957 35.5982 20.0787V0H33.1159V20.0787C33.1159 22.3097 34.3099 23.5665 36.3524 23.5665Z" fill="white"/>
-<path d="M67.2422 23.975C71.0443 23.975 73.5894 21.9012 73.5894 18.8218C73.5894 12.0661 63.7858 15.5225 63.7858 11.3748C63.7858 9.96079 65.1055 8.95529 67.1479 8.95529C69.3161 8.95529 70.4787 9.99221 70.6986 11.5319H73.0867C72.8353 8.57822 70.3216 6.81858 67.305 6.81858C63.88 6.81858 61.3977 8.60964 61.3977 11.3748C61.3977 17.8477 71.17 14.3599 71.17 18.9475C71.17 20.6129 69.8188 21.8069 67.3679 21.8069C64.9798 21.8069 63.5972 20.77 63.3144 18.8218H60.8949C61.1777 21.8697 63.3773 23.975 67.2422 23.975Z" fill="white"/>
-<g filter="url(#filter0_i)">
-<circle cx="49.0141" cy="15.3327" r="8.6674" fill="url(#paint0_linear)"/>
-</g>
-<circle cx="49.0141" cy="15.3327" r="8.41151" stroke="url(#paint1_linear)" stroke-opacity="0.12" stroke-width="0.511767"/>
-<defs>
-<filter id="filter0_i" x="36.2525" y="6.66528" width="21.4289" height="17.3348" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="-6.1412"/>
-<feGaussianBlur stdDeviation="2.04707"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.682353 0 0 0 0 0.45098 0 0 0 0 0.980392 0 0 0 0.56 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
-</filter>
-<linearGradient id="paint0_linear" x1="40.3467" y1="15.3327" x2="57.6815" y2="15.3327" gradientUnits="userSpaceOnUse">
-<stop stop-color="#AE73FA"/>
-<stop offset="1" stop-color="#AE73FA" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="57.6815" y1="15.3327" x2="40.3467" y2="15.3327" gradientUnits="userSpaceOnUse">
-<stop stop-color="#AE73FA"/>
-<stop offset="1" stop-color="#AE73FA" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/assets/background.svg b/src/assets/background.svg
deleted file mode 100644
index fd5261893..000000000
--- a/src/assets/background.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg width="1680" height="6000" viewBox="0 0 1680 6000" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="1680" height="6000" fill="url(#paint0_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="840" y1="0" x2="840" y2="6000" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1C0B3B"/>
-<stop offset="0.26172" stop-color="#2A417D"/>
-<stop offset="0.494402" stop-color="#170E4D"/>
-<stop offset="0.740508" stop-color="#4A2D73"/>
-<stop offset="1" stop-color="#1C0B3B"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/assets/block.png b/src/assets/block.png
deleted file mode 100644
index 01a8892da..000000000
Binary files a/src/assets/block.png and /dev/null differ
diff --git a/src/assets/evm_logo.png b/src/assets/evm_logo.png
deleted file mode 100644
index e7ba1c77c..000000000
Binary files a/src/assets/evm_logo.png and /dev/null differ
diff --git a/src/assets/exchange.png b/src/assets/exchange.png
deleted file mode 100644
index 15428c08d..000000000
Binary files a/src/assets/exchange.png and /dev/null differ
diff --git a/src/assets/gas.png b/src/assets/gas.png
deleted file mode 100644
index e6c840444..000000000
Binary files a/src/assets/gas.png and /dev/null differ
diff --git a/src/assets/icon-social--discord.svg b/src/assets/icon-social--discord.svg
new file mode 100644
index 000000000..bd9c09e39
--- /dev/null
+++ b/src/assets/icon-social--discord.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 176 176" style="enable-background:new 0 0 176 176;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#414142;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<circle class="st0" cx="88" cy="88" r="88"/>
+	<g>
+		<path class="st1" d="M103.2,46.4c0.4,0,0.8,0,1.2,0c0.1,0.1,0.3,0.1,0.5,0.2c0.8,0.2,1.6,0.2,2.5,0.4c0.8,0.2,1.7,0.5,2.5,0.6
+			c1.3,0.3,2.6,0.6,3.9,1c1,0.3,2,0.7,3.1,1c1.3,0.4,2.6,0.9,3.9,1.4c1.5,0.6,3,1.1,4.4,1.8c0.4,0.2,0.9,0.3,1.2,0.7
+			c1.2,1.9,2.4,3.8,3.5,5.7c0.8,1.4,1.6,2.8,2.4,4.1c0.9,1.6,1.6,3.2,2.4,4.8c0.6,1.4,1.3,2.8,1.9,4.3c0.8,2.2,1.6,4.3,2.3,6.5
+			c0.6,1.7,1,3.5,1.5,5.2c0.3,1.2,0.5,2.4,0.8,3.6c0.2,0.6,0.3,1.2,0.4,1.7c0.1,0.9,0.3,1.9,0.4,2.8c0.1,1,0.4,1.9,0.4,2.9
+			c0.1,1.2,0.2,2.3,0.3,3.5c0.2,1,0.1,2,0.1,3c0.1,2.2,0,4.3,0,6.5c0,0.8,0,1.5,0,2.3c0,1.5-0.3,2.9-0.3,4.4c0,0.4-0.1,0.6-0.4,0.8
+			c-0.3,0.2-0.5,0.3-0.8,0.5c-1.5,1.1-3,2.1-4.6,3.1c-1.9,1.2-3.8,2.3-5.7,3.3c-2.1,1.1-4.3,2.2-6.5,3.2c-2,0.9-4.1,1.6-6.1,2.4
+			c-0.6,0.2-1.2,0.5-1.9,0.6c-0.6,0.1-1.2,0.3-1.8,0.6c-0.1,0-0.1,0-0.2,0c-1.1-1.5-2.2-3.1-3.1-4.7c-0.9-1.5-1.8-3-2.6-4.6
+			c-0.2-0.4-0.2-0.6,0.3-0.7c0.9-0.3,1.8-0.7,2.7-1.1c1.9-0.8,3.8-1.7,5.6-2.8c0.4-0.2,0.4-0.4,0-0.7c-0.5-0.4-0.9-0.7-1.4-1
+			c-0.2-0.1-0.3-0.1-0.5,0c-0.5,0.2-1.1,0.4-1.6,0.6c-1.3,0.6-2.7,1.1-4,1.6c-1.4,0.5-2.8,0.9-4.3,1.3c-1,0.3-1.9,0.6-2.9,0.8
+			c-1.7,0.3-3.3,0.7-5,0.9c-1.2,0.2-2.3,0.3-3.5,0.4c-0.7,0.1-1.3,0.2-2,0.2c-1.4,0-2.9,0.1-4.3,0c-1.6-0.1-3.2,0.1-4.8-0.2
+			c-1.1-0.2-2.3-0.2-3.5-0.3c-1.6-0.2-3.2-0.6-4.8-0.8c-1.5-0.2-2.9-0.7-4.3-1.1c-1.5-0.4-2.9-0.8-4.3-1.4c-0.8-0.3-1.6-0.5-2.4-0.9
+			c-1-0.5-2-0.8-3-1.3c-0.3-0.1-0.5-0.1-0.7,0.1c-0.4,0.3-0.8,0.6-1.3,1c-0.3,0.3-0.3,0.4,0,0.6c1.4,0.9,2.9,1.6,4.5,2.3
+			c1.2,0.6,2.5,1,3.8,1.6c0.4,0.2,0.5,0.3,0.3,0.7c-0.1,0.3-0.2,0.5-0.4,0.8c-0.6,1-1.2,2.1-1.8,3.1c-1.2,1.9-2.3,3.7-3.7,5.4
+			c0,0-0.1,0-0.1,0c-0.1-0.1-0.2-0.1-0.3-0.2c-1-0.3-2.1-0.6-3.1-1c-2.5-0.9-5-1.8-7.5-2.9c-1.7-0.8-3.5-1.6-5.2-2.5
+			c-1.4-0.7-2.7-1.5-4-2.3c-2.2-1.4-4.4-2.8-6.6-4.2c-0.3-0.2-0.5-0.4-0.8-0.6c-0.1-0.1-0.2-0.2-0.2-0.4c-0.2-1-0.1-2-0.3-3
+			c-0.1-0.6-0.1-1.2,0-1.7c0.1-0.7-0.2-1.4-0.2-2.1c0-2.4-0.1-4.8,0.1-7.1c0.1-0.6-0.1-1.2,0-1.8c0-0.4,0.2-0.7,0.2-1.1
+			c0-0.9,0.2-1.8,0.2-2.8c0-0.1,0-0.2,0-0.3c0.1-0.6,0.2-1.2,0.3-1.8c0.2-1.2,0.2-2.4,0.5-3.5c0.2-1,0.4-2.1,0.6-3.1
+			c0.3-1.2,0.5-2.4,0.9-3.6c0.2-0.7,0.3-1.4,0.5-2.1c0.2-0.7,0.4-1.4,0.7-2.1c0.5-1.7,1.1-3.4,1.8-5.1c1-2.6,2.1-5.1,3.3-7.6
+			c0.7-1.6,1.6-3.1,2.4-4.6c0.7-1.3,1.5-2.6,2.2-3.9c0.8-1.4,1.7-2.8,2.7-4.2c0.2-0.3,0.4-0.6,0.7-0.7c1.3-0.5,2.6-1.2,4-1.6
+			c2.2-0.8,4.3-1.7,6.5-2.3c1.4-0.4,2.8-0.8,4.1-1.2c0.8-0.2,1.6-0.4,2.4-0.5c1-0.2,1.9-0.5,2.9-0.7c0.5-0.1,1,0,1.4-0.3
+			c0.4,0,0.7,0,1.1,0c0.3,0.6,0.7,1.2,1,1.9c0.5,1.2,1.2,2.3,1.7,3.5c0.1,0.3,0.3,0.4,0.6,0.3c0.9-0.1,1.8-0.3,2.7-0.4
+			c1.2-0.1,2.3-0.2,3.5-0.3c1.3-0.1,2.6-0.1,3.9-0.1c1.9-0.1,3.8,0,5.7,0.1c1.5,0.1,3,0.1,4.5,0.3c1.3,0.2,2.6,0.2,3.8,0.4
+			c0.3,0.1,0.5-0.1,0.6-0.4C101.4,49.9,102.3,48.2,103.2,46.4z M60.2,91.9c-0.1,1.1,0.1,2.1,0.3,3c0.1,0.8,0.5,1.5,0.8,2.2
+			c0.7,1.5,1.7,2.7,2.9,3.7c1.1,0.9,2.5,1.5,3.9,1.9c1.5,0.4,2.9,0.2,4.3-0.2c1.5-0.5,2.9-1.2,3.9-2.4c0.5-0.5,1-1,1.4-1.7
+			c0.3-0.6,0.7-1.3,1-1.9c0.5-1.1,0.7-2.2,0.8-3.3c0.1-1.1,0-2.2-0.1-3.2c-0.2-1.2-0.5-2.4-1.2-3.5c-0.8-1.4-1.8-2.6-3.2-3.6
+			c-1.2-0.9-2.5-1.4-4-1.6c-1.1-0.1-2.2-0.2-3.3,0.1c-1.1,0.3-2.2,0.7-3.2,1.5c-1,0.8-1.9,1.7-2.6,2.8c-0.7,1.1-1.1,2.2-1.5,3.5
+			C60.2,90.1,60.1,91,60.2,91.9z M106.1,81.2c-0.5,0-1-0.1-1.4,0c-1.1,0.3-2.2,0.6-3.1,1.2c-0.6,0.4-1.3,0.8-1.8,1.4
+			c-0.8,0.9-1.5,1.8-2.1,2.9c-0.8,1.5-1.1,3.1-1.2,4.8c-0.1,1.1,0.1,2.1,0.3,3.1c0.4,1.5,0.9,2.9,1.8,4.1c1,1.4,2.3,2.6,4,3.3
+			c1.4,0.6,2.9,0.9,4.5,0.8c2.1-0.2,3.8-1.1,5.3-2.4c1-0.9,1.8-2,2.4-3.3c0.7-1.4,1.1-2.8,1-4.4c0-0.1,0-0.3,0-0.4
+			c0.1-0.4,0.1-0.9,0.1-1.3c-0.1-1-0.3-1.9-0.6-2.9c-0.3-1.1-0.9-2.1-1.5-3.1c-0.5-0.8-1.3-1.5-2-2.1c-1-0.8-2.1-1.2-3.2-1.6
+			C107.8,81.3,107,81.1,106.1,81.2z"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M88,311.9c48.3-0.1,88.9,39.6,88,89.7c-0.8,47.1-39.3,86.4-88.4,86.3C39.2,487.6-0.1,448.5,0,399.5
+		C0.1,351.3,39.5,311.8,88,311.9z M111.8,443.8c1.5,0.1,2.8-0.5,3.8-1.6c1.9-2,2.5-4.6,3-7.2c0.9-4.8,1.8-9.6,2.6-14.4
+		c1.1-6.2,2.2-12.3,3.1-18.5c1.4-8.8,2.8-17.6,3.8-26.5c0.3-2.4,0.8-4.8,0.3-7.3c-0.3-1.9-1.3-2.9-3.1-3.3c-2.5-0.6-4.9,0.3-7.1,1
+		c-10.9,3.7-21.5,8.3-32.1,12.8c-11.1,4.7-22.2,9.6-33.3,14.4c-5.3,2.3-10.5,4.6-15.8,7c-1.1,0.5-2.1,1.2-3,2.1
+		c-1.1,1.2-1,2.5,0.1,3.6c0.8,0.8,1.9,1.3,3,1.7c2.9,1,5.8,1.9,8.7,2.8c2,0.6,4.1,1.1,6.2,1.6c4.8,1.3,9.2,0.4,13.3-2.4
+		c11.3-7.6,22.6-15.1,33.9-22.7c1.2-0.8,2.3-1.6,3.6-2.2c0.8-0.3,1.6-0.5,2.2,0.3c0.6,0.8,0.3,1.6-0.3,2.3c-2.6,3-5.5,5.8-8.4,8.6
+		c-6.3,6.1-13,11.9-19.2,18.2c-3.3,3.4-3.2,6,0.6,8.8c2.6,1.9,5.3,3.7,8,5.5c6.5,4.4,13.1,8.9,19.6,13.3
+		C107.3,443,109.5,443.7,111.8,443.8z"/>
+</g>
+<g>
+	<circle class="st0" cx="88" cy="711.7" r="88"/>
+	<path class="st1" d="M143.3,655.8c-2.9,0-5.5,0-8,0c-0.5,0-0.8,0.4-1.1,0.7c-3.1,3.5-6.5,6.8-9.6,10.3c-3.8,4.2-7.7,8.2-11.5,12.3
+		c-5,5.6-10.2,10.9-15.4,16.4c-0.9,1-1.6,1-2.4-0.1c-1.7-2.3-3.4-4.6-5.1-6.9c-3.7-5-7.4-10-11.2-15c-4.2-5.6-8.3-11.1-12.5-16.7
+		c-0.7-0.9-1.4-1.2-2.5-1.2c-9.2,0-18.4,0-27.6,0c-0.9,0-1.8,0-2.7,0c-0.2,0-0.5,0-0.6,0.2c-0.1,0.2,0.1,0.4,0.2,0.5
+		c0.8,1.1,1.6,2.1,2.4,3.2c4.7,6.3,9.5,12.7,14.2,19c4.2,5.6,8.4,11.2,12.6,16.8c4.9,6.5,9.7,13,14.6,19.5c0.7,0.9,0.7,1.6-0.1,2.4
+		c-2.7,2.9-5.3,5.8-8,8.6c-2.9,3.1-5.9,6.2-8.8,9.3c-3.1,3.4-6.2,6.8-9.3,10.1c-5.7,6.1-11.4,12.1-17.1,18.2
+		c-0.2,0.2-0.5,0.4-0.4,0.7c0.1,0.3,0.5,0.2,0.8,0.2c2.1,0,4.2,0,6.3,0c0.7,0,1.2-0.3,1.6-0.8c0.9-1,1.8-2,2.7-2.9
+		c2.6-2.8,5.3-5.6,7.9-8.4c6.2-6.7,12.4-13.4,18.7-20c3-3.2,6-6.4,9-9.6c1.2-1.3,1.7-1.3,2.7,0.1c2.1,2.8,4.1,5.6,6.2,8.3
+		c3.3,4.4,6.6,8.8,9.9,13.2c4.7,6.2,9.3,12.4,13.9,18.7c0.8,1,1.6,1.4,2.8,1.4c8.8,0,17.7,0,26.5,0c1.1,0,2.1,0,3.2,0
+		c0.2,0,0.5,0,0.7-0.2c0.2-0.3-0.1-0.5-0.2-0.7c-0.8-1-1.6-2.1-2.4-3.1c-3.7-5-7.4-9.9-11.1-14.9c-4.3-5.8-8.7-11.6-13-17.4
+		c-4.3-5.7-8.6-11.5-12.9-17.3c-2-2.7-4-5.3-6-8c-0.5-0.6-0.6-1.2,0-1.9c3.4-3.6,6.8-7.3,10.2-10.9c3.4-3.6,6.8-7.2,10.2-10.8
+		c6-6.4,11.9-13,18-19.3C140.7,658.8,141.9,657.4,143.3,655.8z"/>
+	<path class="st0" d="M54.6,662.2c2.3,0,4.5,0,6.8,0c1.1,0,1.8,0.4,2.4,1.3c3.6,4.8,7.2,9.6,10.8,14.5c4.6,6.2,9.2,12.4,13.9,18.6
+		c3.2,4.3,6.6,8.6,9.8,12.9c4.2,5.7,8.5,11.4,12.8,17.1c4.7,6.3,9.4,12.6,14.1,18.9c2.8,3.8,5.7,7.6,8.5,11.4
+		c0.2,0.3,0.5,0.6,0.3,1.1c-0.2,0.5-0.6,0.5-1.1,0.5c-4.7,0-9.4,0-14.1,0c-0.9,0-1.5-0.4-2.1-1.1c-1.7-2.3-3.5-4.6-5.2-7
+		c-3.7-4.9-7.3-9.8-11-14.7c-3.5-4.7-7.1-9.5-10.6-14.2c-2.8-3.8-5.7-7.6-8.6-11.3c-3.5-4.7-7-9.4-10.5-14
+		c-3.7-4.9-7.4-9.8-11.1-14.7c-3.2-4.2-6.3-8.5-9.5-12.7c-1.2-1.6-2.3-3.1-3.5-4.7c-0.3-0.4-0.7-0.8-0.4-1.3
+		c0.3-0.5,0.8-0.4,1.2-0.4C50,662.2,52.3,662.2,54.6,662.2C54.6,662.2,54.6,662.2,54.6,662.2z"/>
+</g>
+<g>
+	<circle class="st0" cx="88" cy="1023.6" r="88"/>
+	<g>
+		<path class="st1" d="M89.9,979.3c10.8,0,21.5,0.3,32.3,0.9c4.5,0.3,9,0.4,13.4,1.3c7.4,1.5,12,6.1,13.5,13.5
+			c1.4,6.8,1.9,13.6,2.2,20.5c0.3,6.8,0.2,13.5-0.2,20.3c-0.4,6-1,12-2.2,17.9c-1.3,6.2-6.5,10.9-13.2,12
+			c-6.8,1.2-13.7,1.5-20.6,1.8c-15.1,0.6-30.1,0.6-45.2,0.2c-8.9-0.2-17.9-0.6-26.8-1.6c-3.8-0.4-7.5-1.2-10.6-3.8
+			c-3.5-2.9-5.2-6.8-6-11.2c-1.6-9.4-2-19-2-28.5c0-8.9,0.6-17.9,2-26.7c1-6.1,4-10.6,9.7-13.1c2.4-1.1,4.9-1.3,7.5-1.6
+			C59.1,979.4,74.5,979.3,89.9,979.3z M108.8,1023.6c-0.2-0.2-0.3-0.2-0.5-0.3c-10.6-6.1-21.2-12.2-31.8-18.3
+			c-1-0.6-0.8,0.1-0.8,0.7c0,11.9,0,23.9,0,35.8c0,1.2,0,1.2,1,0.6c6.6-3.8,13.1-7.5,19.7-11.3
+			C100.5,1028.4,104.6,1026,108.8,1023.6z"/>
+		<path class="st0" d="M108.8,1023.6c-4.2,2.4-8.3,4.8-12.4,7.1c-6.6,3.8-13.1,7.5-19.7,11.3c-1,0.6-1,0.6-1-0.6
+			c0-11.9,0-23.9,0-35.8c0-0.5-0.2-1.3,0.8-0.7c10.6,6.1,21.2,12.2,31.8,18.3C108.4,1023.4,108.5,1023.5,108.8,1023.6z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icon-social--telegram.svg b/src/assets/icon-social--telegram.svg
new file mode 100644
index 000000000..b19547b75
--- /dev/null
+++ b/src/assets/icon-social--telegram.svg
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 176 175.9" style="enable-background:new 0 0 176 175.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#414142;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<circle class="st0" cx="88" cy="-223.9" r="88"/>
+	<g>
+		<path class="st1" d="M103.2-265.5c0.4,0,0.8,0,1.2,0c0.1,0.1,0.3,0.1,0.5,0.2c0.8,0.2,1.6,0.2,2.5,0.4c0.8,0.2,1.7,0.5,2.5,0.6
+			c1.3,0.3,2.6,0.6,3.9,1c1,0.3,2,0.7,3.1,1c1.3,0.4,2.6,0.9,3.9,1.4c1.5,0.6,3,1.1,4.4,1.8c0.4,0.2,0.9,0.3,1.2,0.7
+			c1.2,1.9,2.4,3.8,3.5,5.7c0.8,1.4,1.6,2.8,2.4,4.1c0.9,1.6,1.6,3.2,2.4,4.8c0.6,1.4,1.3,2.8,1.9,4.3c0.8,2.2,1.6,4.3,2.3,6.5
+			c0.6,1.7,1,3.5,1.5,5.2c0.3,1.2,0.5,2.4,0.8,3.6c0.2,0.6,0.3,1.2,0.4,1.7c0.1,0.9,0.3,1.9,0.4,2.8c0.1,1,0.4,1.9,0.4,2.9
+			c0.1,1.2,0.2,2.3,0.3,3.5c0.2,1,0.1,2,0.1,3c0.1,2.2,0,4.3,0,6.5c0,0.8,0,1.5,0,2.3c0,1.5-0.3,2.9-0.3,4.4c0,0.4-0.1,0.6-0.4,0.8
+			c-0.3,0.2-0.5,0.3-0.8,0.5c-1.5,1.1-3,2.1-4.6,3.1c-1.9,1.2-3.8,2.3-5.7,3.3c-2.1,1.1-4.3,2.2-6.5,3.2c-2,0.9-4.1,1.6-6.1,2.4
+			c-0.6,0.2-1.2,0.5-1.9,0.6c-0.6,0.1-1.2,0.3-1.8,0.6c-0.1,0-0.1,0-0.2,0c-1.1-1.5-2.2-3.1-3.1-4.7c-0.9-1.5-1.8-3-2.6-4.6
+			c-0.2-0.4-0.2-0.6,0.3-0.7c0.9-0.3,1.8-0.7,2.7-1.1c1.9-0.8,3.8-1.7,5.6-2.8c0.4-0.2,0.4-0.4,0-0.7c-0.5-0.4-0.9-0.7-1.4-1
+			c-0.2-0.1-0.3-0.1-0.5,0c-0.5,0.2-1.1,0.4-1.6,0.6c-1.3,0.6-2.7,1.1-4,1.6c-1.4,0.5-2.8,0.9-4.3,1.3c-1,0.3-1.9,0.6-2.9,0.8
+			c-1.7,0.3-3.3,0.7-5,0.9c-1.2,0.2-2.3,0.3-3.5,0.4c-0.7,0.1-1.3,0.2-2,0.2c-1.4,0-2.9,0.1-4.3,0c-1.6-0.1-3.2,0.1-4.8-0.2
+			c-1.1-0.2-2.3-0.2-3.5-0.3c-1.6-0.2-3.2-0.6-4.8-0.8c-1.5-0.2-2.9-0.7-4.3-1.1c-1.5-0.4-2.9-0.8-4.3-1.4c-0.8-0.3-1.6-0.5-2.4-0.9
+			c-1-0.5-2-0.8-3-1.3c-0.3-0.1-0.5-0.1-0.7,0.1c-0.4,0.3-0.8,0.6-1.3,1c-0.3,0.3-0.3,0.4,0,0.6c1.4,0.9,2.9,1.6,4.5,2.3
+			c1.2,0.6,2.5,1,3.8,1.6c0.4,0.2,0.5,0.3,0.3,0.7c-0.1,0.3-0.2,0.5-0.4,0.8c-0.6,1-1.2,2.1-1.8,3.1c-1.2,1.9-2.3,3.7-3.7,5.4
+			c0,0-0.1,0-0.1,0c-0.1-0.1-0.2-0.1-0.3-0.2c-1-0.3-2.1-0.6-3.1-1c-2.5-0.9-5-1.8-7.5-2.9c-1.7-0.8-3.5-1.6-5.2-2.5
+			c-1.4-0.7-2.7-1.5-4-2.3c-2.2-1.4-4.4-2.8-6.6-4.2c-0.3-0.2-0.5-0.4-0.8-0.6c-0.1-0.1-0.2-0.2-0.2-0.4c-0.2-1-0.1-2-0.3-3
+			c-0.1-0.6-0.1-1.2,0-1.7c0.1-0.7-0.2-1.4-0.2-2.1c0-2.4-0.1-4.8,0.1-7.1c0.1-0.6-0.1-1.2,0-1.8c0-0.4,0.2-0.7,0.2-1.1
+			c0-0.9,0.2-1.8,0.2-2.8c0-0.1,0-0.2,0-0.3c0.1-0.6,0.2-1.2,0.3-1.8c0.2-1.2,0.2-2.4,0.5-3.5c0.2-1,0.4-2.1,0.6-3.1
+			c0.3-1.2,0.5-2.4,0.9-3.6c0.2-0.7,0.3-1.4,0.5-2.1c0.2-0.7,0.4-1.4,0.7-2.1c0.5-1.7,1.1-3.4,1.8-5.1c1-2.6,2.1-5.1,3.3-7.6
+			c0.7-1.6,1.6-3.1,2.4-4.6c0.7-1.3,1.5-2.6,2.2-3.9c0.8-1.4,1.7-2.8,2.7-4.2c0.2-0.3,0.4-0.6,0.7-0.7c1.3-0.5,2.6-1.2,4-1.6
+			c2.2-0.8,4.3-1.7,6.5-2.3c1.4-0.4,2.8-0.8,4.1-1.2c0.8-0.2,1.6-0.4,2.4-0.5c1-0.2,1.9-0.5,2.9-0.7c0.5-0.1,1,0,1.4-0.3
+			c0.4,0,0.7,0,1.1,0c0.3,0.6,0.7,1.2,1,1.9c0.5,1.2,1.2,2.3,1.7,3.5c0.1,0.3,0.3,0.4,0.6,0.3c0.9-0.1,1.8-0.3,2.7-0.4
+			c1.2-0.1,2.3-0.2,3.5-0.3c1.3-0.1,2.6-0.1,3.9-0.1c1.9-0.1,3.8,0,5.7,0.1c1.5,0.1,3,0.1,4.5,0.3c1.3,0.2,2.6,0.2,3.8,0.4
+			c0.3,0.1,0.5-0.1,0.6-0.4C101.4-262,102.3-263.7,103.2-265.5z M60.2-220c-0.1,1.1,0.1,2.1,0.3,3c0.1,0.8,0.5,1.5,0.8,2.2
+			c0.7,1.5,1.7,2.7,2.9,3.7c1.1,0.9,2.5,1.5,3.9,1.9c1.5,0.4,2.9,0.2,4.3-0.2c1.5-0.5,2.9-1.2,3.9-2.4c0.5-0.5,1-1,1.4-1.7
+			c0.3-0.6,0.7-1.3,1-1.9c0.5-1.1,0.7-2.2,0.8-3.3c0.1-1.1,0-2.2-0.1-3.2c-0.2-1.2-0.5-2.4-1.2-3.5c-0.8-1.4-1.8-2.6-3.2-3.6
+			c-1.2-0.9-2.5-1.4-4-1.6c-1.1-0.1-2.2-0.2-3.3,0.1c-1.1,0.3-2.2,0.7-3.2,1.5c-1,0.8-1.9,1.7-2.6,2.8c-0.7,1.1-1.1,2.2-1.5,3.5
+			C60.2-221.8,60.1-220.9,60.2-220z M106.1-230.7c-0.5,0-1-0.1-1.4,0c-1.1,0.3-2.2,0.6-3.1,1.2c-0.6,0.4-1.3,0.8-1.8,1.4
+			c-0.8,0.9-1.5,1.8-2.1,2.9c-0.8,1.5-1.1,3.1-1.2,4.8c-0.1,1.1,0.1,2.1,0.3,3.1c0.4,1.5,0.9,2.9,1.8,4.1c1,1.4,2.3,2.6,4,3.3
+			c1.4,0.6,2.9,0.9,4.5,0.8c2.1-0.2,3.8-1.1,5.3-2.4c1-0.9,1.8-2,2.4-3.3c0.7-1.4,1.1-2.8,1-4.4c0-0.1,0-0.3,0-0.4
+			c0.1-0.4,0.1-0.9,0.1-1.3c-0.1-1-0.3-1.9-0.6-2.9c-0.3-1.1-0.9-2.1-1.5-3.1c-0.5-0.8-1.3-1.5-2-2.1c-1-0.8-2.1-1.2-3.2-1.6
+			C107.8-230.6,107-230.8,106.1-230.7z"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M88,0c48.3-0.1,88.9,39.6,88,89.7c-0.8,47.1-39.3,86.4-88.4,86.3C39.2,175.7-0.1,136.6,0,87.6
+		C0.1,39.3,39.5-0.1,88,0z M111.8,131.9c1.5,0.1,2.8-0.5,3.8-1.6c1.9-2,2.5-4.6,3-7.2c0.9-4.8,1.8-9.6,2.6-14.4
+		c1.1-6.2,2.2-12.3,3.1-18.5c1.4-8.8,2.8-17.6,3.8-26.5c0.3-2.4,0.8-4.8,0.3-7.3c-0.3-1.9-1.3-2.9-3.1-3.3c-2.5-0.6-4.9,0.3-7.1,1
+		c-10.9,3.7-21.5,8.3-32.1,12.8C75.1,71.7,64,76.6,52.9,81.4c-5.3,2.3-10.5,4.6-15.8,7c-1.1,0.5-2.1,1.2-3,2.1
+		c-1.1,1.2-1,2.5,0.1,3.6c0.8,0.8,1.9,1.3,3,1.7c2.9,1,5.8,1.9,8.7,2.8c2,0.6,4.1,1.1,6.2,1.6c4.8,1.3,9.2,0.4,13.3-2.4
+		c11.3-7.6,22.6-15.1,33.9-22.7c1.2-0.8,2.3-1.6,3.6-2.2c0.8-0.3,1.6-0.5,2.2,0.3c0.6,0.8,0.3,1.6-0.3,2.3c-2.6,3-5.5,5.8-8.4,8.6
+		c-6.3,6.1-13,11.9-19.2,18.2c-3.3,3.4-3.2,6,0.6,8.8c2.6,1.9,5.3,3.7,8,5.5c6.5,4.4,13.1,8.9,19.6,13.3
+		C107.3,131,109.5,131.8,111.8,131.9z"/>
+</g>
+<g>
+	<circle class="st0" cx="88" cy="399.8" r="88"/>
+	<path class="st1" d="M143.3,343.9c-2.9,0-5.5,0-8,0c-0.5,0-0.8,0.4-1.1,0.7c-3.1,3.5-6.5,6.8-9.6,10.3c-3.8,4.2-7.7,8.2-11.5,12.3
+		c-5,5.6-10.2,10.9-15.4,16.4c-0.9,1-1.6,1-2.4-0.1c-1.7-2.3-3.4-4.6-5.1-6.9c-3.7-5-7.4-10-11.2-15c-4.2-5.6-8.3-11.1-12.5-16.7
+		c-0.7-0.9-1.4-1.2-2.5-1.2c-9.2,0-18.4,0-27.6,0c-0.9,0-1.8,0-2.7,0c-0.2,0-0.5,0-0.6,0.2c-0.1,0.2,0.1,0.4,0.2,0.5
+		c0.8,1.1,1.6,2.1,2.4,3.2c4.7,6.3,9.5,12.7,14.2,19c4.2,5.6,8.4,11.2,12.6,16.8c4.9,6.5,9.7,13,14.6,19.5c0.7,0.9,0.7,1.6-0.1,2.4
+		c-2.7,2.9-5.3,5.8-8,8.6c-2.9,3.1-5.9,6.2-8.8,9.3c-3.1,3.4-6.2,6.8-9.3,10.1c-5.7,6.1-11.4,12.1-17.1,18.2
+		c-0.2,0.2-0.5,0.4-0.4,0.7c0.1,0.3,0.5,0.2,0.8,0.2c2.1,0,4.2,0,6.3,0c0.7,0,1.2-0.3,1.6-0.8c0.9-1,1.8-2,2.7-2.9
+		c2.6-2.8,5.3-5.6,7.9-8.4c6.2-6.7,12.4-13.4,18.7-20c3-3.2,6-6.4,9-9.6c1.2-1.3,1.7-1.3,2.7,0.1c2.1,2.8,4.1,5.6,6.2,8.3
+		c3.3,4.4,6.6,8.8,9.9,13.2c4.7,6.2,9.3,12.4,13.9,18.7c0.8,1,1.6,1.4,2.8,1.4c8.8,0,17.7,0,26.5,0c1.1,0,2.1,0,3.2,0
+		c0.2,0,0.5,0,0.7-0.2c0.2-0.3-0.1-0.5-0.2-0.7c-0.8-1-1.6-2.1-2.4-3.1c-3.7-5-7.4-9.9-11.1-14.9c-4.3-5.8-8.7-11.6-13-17.4
+		c-4.3-5.7-8.6-11.5-12.9-17.3c-2-2.7-4-5.3-6-8c-0.5-0.6-0.6-1.2,0-1.9c3.4-3.6,6.8-7.3,10.2-10.9c3.4-3.6,6.8-7.2,10.2-10.8
+		c6-6.4,11.9-13,18-19.3C140.7,346.9,141.9,345.5,143.3,343.9z"/>
+	<path class="st0" d="M54.6,350.3c2.3,0,4.5,0,6.8,0c1.1,0,1.8,0.4,2.4,1.3c3.6,4.8,7.2,9.6,10.8,14.5c4.6,6.2,9.2,12.4,13.9,18.6
+		c3.2,4.3,6.6,8.6,9.8,12.9c4.2,5.7,8.5,11.4,12.8,17.1c4.7,6.3,9.4,12.6,14.1,18.9c2.8,3.8,5.7,7.6,8.5,11.4
+		c0.2,0.3,0.5,0.6,0.3,1.1c-0.2,0.5-0.6,0.5-1.1,0.5c-4.7,0-9.4,0-14.1,0c-0.9,0-1.5-0.4-2.1-1.1c-1.7-2.3-3.5-4.6-5.2-7
+		c-3.7-4.9-7.3-9.8-11-14.7c-3.5-4.7-7.1-9.5-10.6-14.2c-2.8-3.8-5.7-7.6-8.6-11.3c-3.5-4.7-7-9.4-10.5-14
+		c-3.7-4.9-7.4-9.8-11.1-14.7c-3.2-4.2-6.3-8.5-9.5-12.7c-1.2-1.6-2.3-3.1-3.5-4.7c-0.3-0.4-0.7-0.8-0.4-1.3
+		c0.3-0.5,0.8-0.4,1.2-0.4C50,350.2,52.3,350.2,54.6,350.3C54.6,350.2,54.6,350.3,54.6,350.3z"/>
+</g>
+<g>
+	<circle class="st0" cx="88" cy="711.7" r="88"/>
+	<g>
+		<path class="st1" d="M89.9,667.4c10.8,0,21.5,0.3,32.3,0.9c4.5,0.3,9,0.4,13.4,1.3c7.4,1.5,12,6.1,13.5,13.5
+			c1.4,6.8,1.9,13.6,2.2,20.5c0.3,6.8,0.2,13.5-0.2,20.3c-0.4,6-1,12-2.2,17.9c-1.3,6.2-6.5,10.9-13.2,12
+			c-6.8,1.2-13.7,1.5-20.6,1.8c-15.1,0.6-30.1,0.6-45.2,0.2c-8.9-0.2-17.9-0.6-26.8-1.6c-3.8-0.4-7.5-1.2-10.6-3.8
+			c-3.5-2.9-5.2-6.8-6-11.2c-1.6-9.4-2-19-2-28.5c0-8.9,0.6-17.9,2-26.7c1-6.1,4-10.6,9.7-13.1c2.4-1.1,4.9-1.3,7.5-1.6
+			C59.1,667.5,74.5,667.4,89.9,667.4z M108.8,711.7c-0.2-0.2-0.3-0.2-0.5-0.3c-10.6-6.1-21.2-12.2-31.8-18.3c-1-0.6-0.8,0.1-0.8,0.7
+			c0,11.9,0,23.9,0,35.8c0,1.2,0,1.2,1,0.6c6.6-3.8,13.1-7.5,19.7-11.3C100.5,716.5,104.6,714.1,108.8,711.7z"/>
+		<path class="st0" d="M108.8,711.7c-4.2,2.4-8.3,4.8-12.4,7.1c-6.6,3.8-13.1,7.5-19.7,11.3c-1,0.6-1,0.6-1-0.6
+			c0-11.9,0-23.9,0-35.8c0-0.5-0.2-1.3,0.8-0.7c10.6,6.1,21.2,12.2,31.8,18.3C108.4,711.5,108.5,711.5,108.8,711.7z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icon-social--x-twitter.svg b/src/assets/icon-social--x-twitter.svg
new file mode 100644
index 000000000..cc7de72ab
--- /dev/null
+++ b/src/assets/icon-social--x-twitter.svg
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 176 176" style="enable-background:new 0 0 176 176;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#414142;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<circle class="st0" cx="88" cy="-535.8" r="88"/>
+	<g>
+		<path class="st1" d="M103.2-577.3c0.4,0,0.8,0,1.2,0c0.1,0.1,0.3,0.1,0.5,0.2c0.8,0.2,1.6,0.2,2.5,0.4c0.8,0.2,1.7,0.5,2.5,0.6
+			c1.3,0.3,2.6,0.6,3.9,1c1,0.3,2,0.7,3.1,1c1.3,0.4,2.6,0.9,3.9,1.4c1.5,0.6,3,1.1,4.4,1.8c0.4,0.2,0.9,0.3,1.2,0.7
+			c1.2,1.9,2.4,3.8,3.5,5.7c0.8,1.4,1.6,2.8,2.4,4.1c0.9,1.6,1.6,3.2,2.4,4.8c0.6,1.4,1.3,2.8,1.9,4.3c0.8,2.2,1.6,4.3,2.3,6.5
+			c0.6,1.7,1,3.5,1.5,5.2c0.3,1.2,0.5,2.4,0.8,3.6c0.2,0.6,0.3,1.2,0.4,1.7c0.1,0.9,0.3,1.9,0.4,2.8c0.1,1,0.4,1.9,0.4,2.9
+			c0.1,1.2,0.2,2.3,0.3,3.5c0.2,1,0.1,2,0.1,3c0.1,2.2,0,4.3,0,6.5c0,0.8,0,1.5,0,2.3c0,1.5-0.3,2.9-0.3,4.4c0,0.4-0.1,0.6-0.4,0.8
+			c-0.3,0.2-0.5,0.3-0.8,0.5c-1.5,1.1-3,2.1-4.6,3.1c-1.9,1.2-3.8,2.3-5.7,3.3c-2.1,1.1-4.3,2.2-6.5,3.2c-2,0.9-4.1,1.6-6.1,2.4
+			c-0.6,0.2-1.2,0.5-1.9,0.6c-0.6,0.1-1.2,0.3-1.8,0.6c-0.1,0-0.1,0-0.2,0c-1.1-1.5-2.2-3.1-3.1-4.7c-0.9-1.5-1.8-3-2.6-4.6
+			c-0.2-0.4-0.2-0.6,0.3-0.7c0.9-0.3,1.8-0.7,2.7-1.1c1.9-0.8,3.8-1.7,5.6-2.8c0.4-0.2,0.4-0.4,0-0.7c-0.5-0.4-0.9-0.7-1.4-1
+			c-0.2-0.1-0.3-0.1-0.5,0c-0.5,0.2-1.1,0.4-1.6,0.6c-1.3,0.6-2.7,1.1-4,1.6c-1.4,0.5-2.8,0.9-4.3,1.3c-1,0.3-1.9,0.6-2.9,0.8
+			c-1.7,0.3-3.3,0.7-5,0.9c-1.2,0.2-2.3,0.3-3.5,0.4c-0.7,0.1-1.3,0.2-2,0.2c-1.4,0-2.9,0.1-4.3,0c-1.6-0.1-3.2,0.1-4.8-0.2
+			c-1.1-0.2-2.3-0.2-3.5-0.3c-1.6-0.2-3.2-0.6-4.8-0.8c-1.5-0.2-2.9-0.7-4.3-1.1c-1.5-0.4-2.9-0.8-4.3-1.4c-0.8-0.3-1.6-0.5-2.4-0.9
+			c-1-0.5-2-0.8-3-1.3c-0.3-0.1-0.5-0.1-0.7,0.1c-0.4,0.3-0.8,0.6-1.3,1c-0.3,0.3-0.3,0.4,0,0.6c1.4,0.9,2.9,1.6,4.5,2.3
+			c1.2,0.6,2.5,1,3.8,1.6c0.4,0.2,0.5,0.3,0.3,0.7c-0.1,0.3-0.2,0.5-0.4,0.8c-0.6,1-1.2,2.1-1.8,3.1c-1.2,1.9-2.3,3.7-3.7,5.4
+			c0,0-0.1,0-0.1,0c-0.1-0.1-0.2-0.1-0.3-0.2c-1-0.3-2.1-0.6-3.1-1c-2.5-0.9-5-1.8-7.5-2.9c-1.7-0.8-3.5-1.6-5.2-2.5
+			c-1.4-0.7-2.7-1.5-4-2.3c-2.2-1.4-4.4-2.8-6.6-4.2c-0.3-0.2-0.5-0.4-0.8-0.6c-0.1-0.1-0.2-0.2-0.2-0.4c-0.2-1-0.1-2-0.3-3
+			c-0.1-0.6-0.1-1.2,0-1.7c0.1-0.7-0.2-1.4-0.2-2.1c0-2.4-0.1-4.8,0.1-7.1c0.1-0.6-0.1-1.2,0-1.8c0-0.4,0.2-0.7,0.2-1.1
+			c0-0.9,0.2-1.8,0.2-2.8c0-0.1,0-0.2,0-0.3c0.1-0.6,0.2-1.2,0.3-1.8c0.2-1.2,0.2-2.4,0.5-3.5c0.2-1,0.4-2.1,0.6-3.1
+			c0.3-1.2,0.5-2.4,0.9-3.6c0.2-0.7,0.3-1.4,0.5-2.1c0.2-0.7,0.4-1.4,0.7-2.1c0.5-1.7,1.1-3.4,1.8-5.1c1-2.6,2.1-5.1,3.3-7.6
+			c0.7-1.6,1.6-3.1,2.4-4.6c0.7-1.3,1.5-2.6,2.2-3.9c0.8-1.4,1.7-2.8,2.7-4.2c0.2-0.3,0.4-0.6,0.7-0.7c1.3-0.5,2.6-1.2,4-1.6
+			c2.2-0.8,4.3-1.7,6.5-2.3c1.4-0.4,2.8-0.8,4.1-1.2c0.8-0.2,1.6-0.4,2.4-0.5c1-0.2,1.9-0.5,2.9-0.7c0.5-0.1,1,0,1.4-0.3
+			c0.4,0,0.7,0,1.1,0c0.3,0.6,0.7,1.2,1,1.9c0.5,1.2,1.2,2.3,1.7,3.5c0.1,0.3,0.3,0.4,0.6,0.3c0.9-0.1,1.8-0.3,2.7-0.4
+			c1.2-0.1,2.3-0.2,3.5-0.3c1.3-0.1,2.6-0.1,3.9-0.1c1.9-0.1,3.8,0,5.7,0.1c1.5,0.1,3,0.1,4.5,0.3c1.3,0.2,2.6,0.2,3.8,0.4
+			c0.3,0.1,0.5-0.1,0.6-0.4C101.4-573.8,102.3-575.6,103.2-577.3z M60.2-531.9c-0.1,1.1,0.1,2.1,0.3,3c0.1,0.8,0.5,1.5,0.8,2.2
+			c0.7,1.5,1.7,2.7,2.9,3.7c1.1,0.9,2.5,1.5,3.9,1.9c1.5,0.4,2.9,0.2,4.3-0.2c1.5-0.5,2.9-1.2,3.9-2.4c0.5-0.5,1-1,1.4-1.7
+			c0.3-0.6,0.7-1.3,1-1.9c0.5-1.1,0.7-2.2,0.8-3.3c0.1-1.1,0-2.2-0.1-3.2c-0.2-1.2-0.5-2.4-1.2-3.5c-0.8-1.4-1.8-2.6-3.2-3.6
+			c-1.2-0.9-2.5-1.4-4-1.6c-1.1-0.1-2.2-0.2-3.3,0.1c-1.1,0.3-2.2,0.7-3.2,1.5c-1,0.8-1.9,1.7-2.6,2.8c-0.7,1.1-1.1,2.2-1.5,3.5
+			C60.2-533.7,60.1-532.7,60.2-531.9z M106.1-542.5c-0.5,0-1-0.1-1.4,0c-1.1,0.3-2.2,0.6-3.1,1.2c-0.6,0.4-1.3,0.8-1.8,1.4
+			c-0.8,0.9-1.5,1.8-2.1,2.9c-0.8,1.5-1.1,3.1-1.2,4.8c-0.1,1.1,0.1,2.1,0.3,3.1c0.4,1.5,0.9,2.9,1.8,4.1c1,1.4,2.3,2.6,4,3.3
+			c1.4,0.6,2.9,0.9,4.5,0.8c2.1-0.2,3.8-1.1,5.3-2.4c1-0.9,1.8-2,2.4-3.3c0.7-1.4,1.1-2.8,1-4.4c0-0.1,0-0.3,0-0.4
+			c0.1-0.4,0.1-0.9,0.1-1.3c-0.1-1-0.3-1.9-0.6-2.9c-0.3-1.1-0.9-2.1-1.5-3.1c-0.5-0.8-1.3-1.5-2-2.1c-1-0.8-2.1-1.2-3.2-1.6
+			C107.8-542.5,107-542.6,106.1-542.5z"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M88-311.8c48.3-0.1,88.9,39.6,88,89.7c-0.8,47.1-39.3,86.4-88.4,86.3C39.2-136.1-0.1-175.3,0-224.3
+		C0.1-272.5,39.5-311.9,88-311.8z M111.8-179.9c1.5,0.1,2.8-0.5,3.8-1.6c1.9-2,2.5-4.6,3-7.2c0.9-4.8,1.8-9.6,2.6-14.4
+		c1.1-6.2,2.2-12.3,3.1-18.5c1.4-8.8,2.8-17.6,3.8-26.5c0.3-2.4,0.8-4.8,0.3-7.3c-0.3-1.9-1.3-2.9-3.1-3.3c-2.5-0.6-4.9,0.3-7.1,1
+		c-10.9,3.7-21.5,8.3-32.1,12.8c-11.1,4.7-22.2,9.6-33.3,14.4c-5.3,2.3-10.5,4.6-15.8,7c-1.1,0.5-2.1,1.2-3,2.1
+		c-1.1,1.2-1,2.5,0.1,3.6c0.8,0.8,1.9,1.3,3,1.7c2.9,1,5.8,1.9,8.7,2.8c2,0.6,4.1,1.1,6.2,1.6c4.8,1.3,9.2,0.4,13.3-2.4
+		c11.3-7.6,22.6-15.1,33.9-22.7c1.2-0.8,2.3-1.6,3.6-2.2c0.8-0.3,1.6-0.5,2.2,0.3c0.6,0.8,0.3,1.6-0.3,2.3c-2.6,3-5.5,5.8-8.4,8.6
+		c-6.3,6.1-13,11.9-19.2,18.2c-3.3,3.4-3.2,6,0.6,8.8c2.6,1.9,5.3,3.7,8,5.5c6.5,4.4,13.1,8.9,19.6,13.3
+		C107.3-180.8,109.5-180,111.8-179.9z"/>
+</g>
+<g>
+	<circle class="st0" cx="88" cy="88" r="88"/>
+	<path class="st1" d="M143.3,32.1c-2.9,0-5.5,0-8,0c-0.5,0-0.8,0.4-1.1,0.7c-3.1,3.5-6.5,6.8-9.6,10.3c-3.8,4.2-7.7,8.2-11.5,12.3
+		c-5,5.6-10.2,10.9-15.4,16.4c-0.9,1-1.6,1-2.4-0.1c-1.7-2.3-3.4-4.6-5.1-6.9c-3.7-5-7.4-10-11.2-15c-4.2-5.6-8.3-11.1-12.5-16.7
+		c-0.7-0.9-1.4-1.2-2.5-1.2c-9.2,0-18.4,0-27.6,0c-0.9,0-1.8,0-2.7,0c-0.2,0-0.5,0-0.6,0.2c-0.1,0.2,0.1,0.4,0.2,0.5
+		c0.8,1.1,1.6,2.1,2.4,3.2c4.7,6.3,9.5,12.7,14.2,19c4.2,5.6,8.4,11.2,12.6,16.8c4.9,6.5,9.7,13,14.6,19.5c0.7,0.9,0.7,1.6-0.1,2.4
+		c-2.7,2.9-5.3,5.8-8,8.6c-2.9,3.1-5.9,6.2-8.8,9.3c-3.1,3.4-6.2,6.8-9.3,10.1c-5.7,6.1-11.4,12.1-17.1,18.2
+		c-0.2,0.2-0.5,0.4-0.4,0.7c0.1,0.3,0.5,0.2,0.8,0.2c2.1,0,4.2,0,6.3,0c0.7,0,1.2-0.3,1.6-0.8c0.9-1,1.8-2,2.7-2.9
+		c2.6-2.8,5.3-5.6,7.9-8.4c6.2-6.7,12.4-13.4,18.7-20c3-3.2,6-6.4,9-9.6c1.2-1.3,1.7-1.3,2.7,0.1c2.1,2.8,4.1,5.6,6.2,8.3
+		c3.3,4.4,6.6,8.8,9.9,13.2c4.7,6.2,9.3,12.4,13.9,18.7c0.8,1,1.6,1.4,2.8,1.4c8.8,0,17.7,0,26.5,0c1.1,0,2.1,0,3.2,0
+		c0.2,0,0.5,0,0.7-0.2c0.2-0.3-0.1-0.5-0.2-0.7c-0.8-1-1.6-2.1-2.4-3.1c-3.7-5-7.4-9.9-11.1-14.9c-4.3-5.8-8.7-11.6-13-17.4
+		c-4.3-5.7-8.6-11.5-12.9-17.3c-2-2.7-4-5.3-6-8c-0.5-0.6-0.6-1.2,0-1.9c3.4-3.6,6.8-7.3,10.2-10.9c3.4-3.6,6.8-7.2,10.2-10.8
+		c6-6.4,11.9-13,18-19.3C140.7,35.1,141.9,33.7,143.3,32.1z"/>
+	<path class="st0" d="M54.6,38.4c2.3,0,4.5,0,6.8,0c1.1,0,1.8,0.4,2.4,1.3c3.6,4.8,7.2,9.6,10.8,14.5c4.6,6.2,9.2,12.4,13.9,18.6
+		c3.2,4.3,6.6,8.6,9.8,12.9c4.2,5.7,8.5,11.4,12.8,17.1c4.7,6.3,9.4,12.6,14.1,18.9c2.8,3.8,5.7,7.6,8.5,11.4
+		c0.2,0.3,0.5,0.6,0.3,1.1c-0.2,0.5-0.6,0.5-1.1,0.5c-4.7,0-9.4,0-14.1,0c-0.9,0-1.5-0.4-2.1-1.1c-1.7-2.3-3.5-4.6-5.2-7
+		c-3.7-4.9-7.3-9.8-11-14.7c-3.5-4.7-7.1-9.5-10.6-14.2c-2.8-3.8-5.7-7.6-8.6-11.3c-3.5-4.7-7-9.4-10.5-14
+		c-3.7-4.9-7.4-9.8-11.1-14.7c-3.2-4.2-6.3-8.5-9.5-12.7c-1.2-1.6-2.3-3.1-3.5-4.7c-0.3-0.4-0.7-0.8-0.4-1.3
+		c0.3-0.5,0.8-0.4,1.2-0.4C50,38.4,52.3,38.4,54.6,38.4C54.6,38.4,54.6,38.4,54.6,38.4z"/>
+</g>
+<g>
+	<circle class="st0" cx="88" cy="399.9" r="88"/>
+	<g>
+		<path class="st1" d="M89.9,355.5c10.8,0,21.5,0.3,32.3,0.9c4.5,0.3,9,0.4,13.4,1.3c7.4,1.5,12,6.1,13.5,13.5
+			c1.4,6.8,1.9,13.6,2.2,20.5c0.3,6.8,0.2,13.5-0.2,20.3c-0.4,6-1,12-2.2,17.9c-1.3,6.2-6.5,10.9-13.2,12
+			c-6.8,1.2-13.7,1.5-20.6,1.8c-15.1,0.6-30.1,0.6-45.2,0.2c-8.9-0.2-17.9-0.6-26.8-1.6c-3.8-0.4-7.5-1.2-10.6-3.8
+			c-3.5-2.9-5.2-6.8-6-11.2c-1.6-9.4-2-19-2-28.5c0-8.9,0.6-17.9,2-26.7c1-6.1,4-10.6,9.7-13.1c2.4-1.1,4.9-1.3,7.5-1.6
+			C59.1,355.6,74.5,355.6,89.9,355.5z M108.8,399.9c-0.2-0.2-0.3-0.2-0.5-0.3c-10.6-6.1-21.2-12.2-31.8-18.3c-1-0.6-0.8,0.1-0.8,0.7
+			c0,11.9,0,23.9,0,35.8c0,1.2,0,1.2,1,0.6c6.6-3.8,13.1-7.5,19.7-11.3C100.5,404.6,104.6,402.3,108.8,399.9z"/>
+		<path class="st0" d="M108.8,399.9c-4.2,2.4-8.3,4.8-12.4,7.1c-6.6,3.8-13.1,7.5-19.7,11.3c-1,0.6-1,0.6-1-0.6
+			c0-11.9,0-23.9,0-35.8c0-0.5-0.2-1.3,0.8-0.7c10.6,6.1,21.2,12.2,31.8,18.3C108.4,399.6,108.5,399.7,108.8,399.9z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icon-social--youtube.svg b/src/assets/icon-social--youtube.svg
new file mode 100644
index 000000000..480d9c993
--- /dev/null
+++ b/src/assets/icon-social--youtube.svg
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 176 176" style="enable-background:new 0 0 176 176;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#414142;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<circle class="st0" cx="88" cy="-847.6" r="88"/>
+	<g>
+		<path class="st1" d="M103.2-889.2c0.4,0,0.8,0,1.2,0c0.1,0.1,0.3,0.1,0.5,0.2c0.8,0.2,1.6,0.2,2.5,0.4c0.8,0.2,1.7,0.5,2.5,0.6
+			c1.3,0.3,2.6,0.6,3.9,1c1,0.3,2,0.7,3.1,1c1.3,0.4,2.6,0.9,3.9,1.4c1.5,0.6,3,1.1,4.4,1.8c0.4,0.2,0.9,0.3,1.2,0.7
+			c1.2,1.9,2.4,3.8,3.5,5.7c0.8,1.4,1.6,2.8,2.4,4.1c0.9,1.6,1.6,3.2,2.4,4.8c0.6,1.4,1.3,2.8,1.9,4.3c0.8,2.2,1.6,4.3,2.3,6.5
+			c0.6,1.7,1,3.5,1.5,5.2c0.3,1.2,0.5,2.4,0.8,3.6c0.2,0.6,0.3,1.2,0.4,1.7c0.1,0.9,0.3,1.9,0.4,2.8c0.1,1,0.4,1.9,0.4,2.9
+			c0.1,1.2,0.2,2.3,0.3,3.5c0.2,1,0.1,2,0.1,3c0.1,2.2,0,4.3,0,6.5c0,0.8,0,1.5,0,2.3c0,1.5-0.3,2.9-0.3,4.4c0,0.4-0.1,0.6-0.4,0.8
+			c-0.3,0.2-0.5,0.3-0.8,0.5c-1.5,1.1-3,2.1-4.6,3.1c-1.9,1.2-3.8,2.3-5.7,3.3c-2.1,1.1-4.3,2.2-6.5,3.2c-2,0.9-4.1,1.6-6.1,2.4
+			c-0.6,0.2-1.2,0.5-1.9,0.6c-0.6,0.1-1.2,0.3-1.8,0.6c-0.1,0-0.1,0-0.2,0c-1.1-1.5-2.2-3.1-3.1-4.7c-0.9-1.5-1.8-3-2.6-4.6
+			c-0.2-0.4-0.2-0.6,0.3-0.7c0.9-0.3,1.8-0.7,2.7-1.1c1.9-0.8,3.8-1.7,5.6-2.8c0.4-0.2,0.4-0.4,0-0.7c-0.5-0.4-0.9-0.7-1.4-1
+			c-0.2-0.1-0.3-0.1-0.5,0c-0.5,0.2-1.1,0.4-1.6,0.6c-1.3,0.6-2.7,1.1-4,1.6c-1.4,0.5-2.8,0.9-4.3,1.3c-1,0.3-1.9,0.6-2.9,0.8
+			c-1.7,0.3-3.3,0.7-5,0.9c-1.2,0.2-2.3,0.3-3.5,0.4c-0.7,0.1-1.3,0.2-2,0.2c-1.4,0-2.9,0.1-4.3,0c-1.6-0.1-3.2,0.1-4.8-0.2
+			c-1.1-0.2-2.3-0.2-3.5-0.3c-1.6-0.2-3.2-0.6-4.8-0.8c-1.5-0.2-2.9-0.7-4.3-1.1c-1.5-0.4-2.9-0.8-4.3-1.4c-0.8-0.3-1.6-0.5-2.4-0.9
+			c-1-0.5-2-0.8-3-1.3c-0.3-0.1-0.5-0.1-0.7,0.1c-0.4,0.3-0.8,0.6-1.3,1c-0.3,0.3-0.3,0.4,0,0.6c1.4,0.9,2.9,1.6,4.5,2.3
+			c1.2,0.6,2.5,1,3.8,1.6c0.4,0.2,0.5,0.3,0.3,0.7c-0.1,0.3-0.2,0.5-0.4,0.8c-0.6,1-1.2,2.1-1.8,3.1c-1.2,1.9-2.3,3.7-3.7,5.4
+			c0,0-0.1,0-0.1,0c-0.1-0.1-0.2-0.1-0.3-0.2c-1-0.3-2.1-0.6-3.1-1c-2.5-0.9-5-1.8-7.5-2.9c-1.7-0.8-3.5-1.6-5.2-2.5
+			c-1.4-0.7-2.7-1.5-4-2.3c-2.2-1.4-4.4-2.8-6.6-4.2c-0.3-0.2-0.5-0.4-0.8-0.6c-0.1-0.1-0.2-0.2-0.2-0.4c-0.2-1-0.1-2-0.3-3
+			c-0.1-0.6-0.1-1.2,0-1.7c0.1-0.7-0.2-1.4-0.2-2.1c0-2.4-0.1-4.8,0.1-7.1c0.1-0.6-0.1-1.2,0-1.8c0-0.4,0.2-0.7,0.2-1.1
+			c0-0.9,0.2-1.8,0.2-2.8c0-0.1,0-0.2,0-0.3c0.1-0.6,0.2-1.2,0.3-1.8c0.2-1.2,0.2-2.4,0.5-3.5c0.2-1,0.4-2.1,0.6-3.1
+			c0.3-1.2,0.5-2.4,0.9-3.6c0.2-0.7,0.3-1.4,0.5-2.1c0.2-0.7,0.4-1.4,0.7-2.1c0.5-1.7,1.1-3.4,1.8-5.1c1-2.6,2.1-5.1,3.3-7.6
+			c0.7-1.6,1.6-3.1,2.4-4.6c0.7-1.3,1.5-2.6,2.2-3.9c0.8-1.4,1.7-2.8,2.7-4.2c0.2-0.3,0.4-0.6,0.7-0.7c1.3-0.5,2.6-1.2,4-1.6
+			c2.2-0.8,4.3-1.7,6.5-2.3c1.4-0.4,2.8-0.8,4.1-1.2c0.8-0.2,1.6-0.4,2.4-0.5c1-0.2,1.9-0.5,2.9-0.7c0.5-0.1,1,0,1.4-0.3
+			c0.4,0,0.7,0,1.1,0c0.3,0.6,0.7,1.2,1,1.9c0.5,1.2,1.2,2.3,1.7,3.5c0.1,0.3,0.3,0.4,0.6,0.3c0.9-0.1,1.8-0.3,2.7-0.4
+			c1.2-0.1,2.3-0.2,3.5-0.3c1.3-0.1,2.6-0.1,3.9-0.1c1.9-0.1,3.8,0,5.7,0.1c1.5,0.1,3,0.1,4.5,0.3c1.3,0.2,2.6,0.2,3.8,0.4
+			c0.3,0.1,0.5-0.1,0.6-0.4C101.4-885.7,102.3-887.5,103.2-889.2z M60.2-843.7c-0.1,1.1,0.1,2.1,0.3,3c0.1,0.8,0.5,1.5,0.8,2.2
+			c0.7,1.5,1.7,2.7,2.9,3.7c1.1,0.9,2.5,1.5,3.9,1.9c1.5,0.4,2.9,0.2,4.3-0.2c1.5-0.5,2.9-1.2,3.9-2.4c0.5-0.5,1-1,1.4-1.7
+			c0.3-0.6,0.7-1.3,1-1.9c0.5-1.1,0.7-2.2,0.8-3.3c0.1-1.1,0-2.2-0.1-3.2c-0.2-1.2-0.5-2.4-1.2-3.5c-0.8-1.4-1.8-2.6-3.2-3.6
+			c-1.2-0.9-2.5-1.4-4-1.6c-1.1-0.1-2.2-0.2-3.3,0.1c-1.1,0.3-2.2,0.7-3.2,1.5c-1,0.8-1.9,1.7-2.6,2.8c-0.7,1.1-1.1,2.2-1.5,3.5
+			C60.2-845.6,60.1-844.6,60.2-843.7z M106.1-854.4c-0.5,0-1-0.1-1.4,0c-1.1,0.3-2.2,0.6-3.1,1.2c-0.6,0.4-1.3,0.8-1.8,1.4
+			c-0.8,0.9-1.5,1.8-2.1,2.9c-0.8,1.5-1.1,3.1-1.2,4.8c-0.1,1.1,0.1,2.1,0.3,3.1c0.4,1.5,0.9,2.9,1.8,4.1c1,1.4,2.3,2.6,4,3.3
+			c1.4,0.6,2.9,0.9,4.5,0.8c2.1-0.2,3.8-1.1,5.3-2.4c1-0.9,1.8-2,2.4-3.3c0.7-1.4,1.1-2.8,1-4.4c0-0.1,0-0.3,0-0.4
+			c0.1-0.4,0.1-0.9,0.1-1.3c-0.1-1-0.3-1.9-0.6-2.9c-0.3-1.1-0.9-2.1-1.5-3.1c-0.5-0.8-1.3-1.5-2-2.1c-1-0.8-2.1-1.2-3.2-1.6
+			C107.8-854.4,107-854.5,106.1-854.4z"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M88-623.7c48.3-0.1,88.9,39.6,88,89.7c-0.8,47.1-39.3,86.4-88.4,86.3C39.2-448-0.1-487.1,0-536.1
+		C0.1-584.4,39.5-623.8,88-623.7z M111.8-491.8c1.5,0.1,2.8-0.5,3.8-1.6c1.9-2,2.5-4.6,3-7.2c0.9-4.8,1.8-9.6,2.6-14.4
+		c1.1-6.2,2.2-12.3,3.1-18.5c1.4-8.8,2.8-17.6,3.8-26.5c0.3-2.4,0.8-4.8,0.3-7.3c-0.3-1.9-1.3-2.9-3.1-3.3c-2.5-0.6-4.9,0.3-7.1,1
+		c-10.9,3.7-21.5,8.3-32.1,12.8c-11.1,4.7-22.2,9.6-33.3,14.4c-5.3,2.3-10.5,4.6-15.8,7c-1.1,0.5-2.1,1.2-3,2.1
+		c-1.1,1.2-1,2.5,0.1,3.6c0.8,0.8,1.9,1.3,3,1.7c2.9,1,5.8,1.9,8.7,2.8c2,0.6,4.1,1.1,6.2,1.6c4.8,1.3,9.2,0.4,13.3-2.4
+		c11.3-7.6,22.6-15.1,33.9-22.7c1.2-0.8,2.3-1.6,3.6-2.2c0.8-0.3,1.6-0.5,2.2,0.3c0.6,0.8,0.3,1.6-0.3,2.3c-2.6,3-5.5,5.8-8.4,8.6
+		c-6.3,6.1-13,11.9-19.2,18.2c-3.3,3.4-3.2,6,0.6,8.8c2.6,1.9,5.3,3.7,8,5.5c6.5,4.4,13.1,8.9,19.6,13.3
+		C107.3-492.7,109.5-491.9,111.8-491.8z"/>
+</g>
+<g>
+	<circle class="st0" cx="88" cy="-223.9" r="88"/>
+	<path class="st1" d="M143.3-279.8c-2.9,0-5.5,0-8,0c-0.5,0-0.8,0.4-1.1,0.7c-3.1,3.5-6.5,6.8-9.6,10.3c-3.8,4.2-7.7,8.2-11.5,12.3
+		c-5,5.6-10.2,10.9-15.4,16.4c-0.9,1-1.6,1-2.4-0.1c-1.7-2.3-3.4-4.6-5.1-6.9c-3.7-5-7.4-10-11.2-15c-4.2-5.6-8.3-11.1-12.5-16.7
+		c-0.7-0.9-1.4-1.2-2.5-1.2c-9.2,0-18.4,0-27.6,0c-0.9,0-1.8,0-2.7,0c-0.2,0-0.5,0-0.6,0.2c-0.1,0.2,0.1,0.4,0.2,0.5
+		c0.8,1.1,1.6,2.1,2.4,3.2c4.7,6.3,9.5,12.7,14.2,19c4.2,5.6,8.4,11.2,12.6,16.8c4.9,6.5,9.7,13,14.6,19.5c0.7,0.9,0.7,1.6-0.1,2.4
+		c-2.7,2.9-5.3,5.8-8,8.6c-2.9,3.1-5.9,6.2-8.8,9.3c-3.1,3.4-6.2,6.8-9.3,10.1c-5.7,6.1-11.4,12.1-17.1,18.2
+		c-0.2,0.2-0.5,0.4-0.4,0.7c0.1,0.3,0.5,0.2,0.8,0.2c2.1,0,4.2,0,6.3,0c0.7,0,1.2-0.3,1.6-0.8c0.9-1,1.8-2,2.7-2.9
+		c2.6-2.8,5.3-5.6,7.9-8.4c6.2-6.7,12.4-13.4,18.7-20c3-3.2,6-6.4,9-9.6c1.2-1.3,1.7-1.3,2.7,0.1c2.1,2.8,4.1,5.6,6.2,8.3
+		c3.3,4.4,6.6,8.8,9.9,13.2c4.7,6.2,9.3,12.4,13.9,18.7c0.8,1,1.6,1.4,2.8,1.4c8.8,0,17.7,0,26.5,0c1.1,0,2.1,0,3.2,0
+		c0.2,0,0.5,0,0.7-0.2c0.2-0.3-0.1-0.5-0.2-0.7c-0.8-1-1.6-2.1-2.4-3.1c-3.7-5-7.4-9.9-11.1-14.9c-4.3-5.8-8.7-11.6-13-17.4
+		c-4.3-5.7-8.6-11.5-12.9-17.3c-2-2.7-4-5.3-6-8c-0.5-0.6-0.6-1.2,0-1.9c3.4-3.6,6.8-7.3,10.2-10.9c3.4-3.6,6.8-7.2,10.2-10.8
+		c6-6.4,11.9-13,18-19.3C140.7-276.8,141.9-278.2,143.3-279.8z"/>
+	<path class="st0" d="M54.6-273.5c2.3,0,4.5,0,6.8,0c1.1,0,1.8,0.4,2.4,1.3c3.6,4.8,7.2,9.6,10.8,14.5c4.6,6.2,9.2,12.4,13.9,18.6
+		c3.2,4.3,6.6,8.6,9.8,12.9c4.2,5.7,8.5,11.4,12.8,17.1c4.7,6.3,9.4,12.6,14.1,18.9c2.8,3.8,5.7,7.6,8.5,11.4
+		c0.2,0.3,0.5,0.6,0.3,1.1c-0.2,0.5-0.6,0.5-1.1,0.5c-4.7,0-9.4,0-14.1,0c-0.9,0-1.5-0.4-2.1-1.1c-1.7-2.3-3.5-4.6-5.2-7
+		c-3.7-4.9-7.3-9.8-11-14.7c-3.5-4.7-7.1-9.5-10.6-14.2c-2.8-3.8-5.7-7.6-8.6-11.3c-3.5-4.7-7-9.4-10.5-14
+		c-3.7-4.9-7.4-9.8-11.1-14.7c-3.2-4.2-6.3-8.5-9.5-12.7c-1.2-1.6-2.3-3.1-3.5-4.7c-0.3-0.4-0.7-0.8-0.4-1.3
+		c0.3-0.5,0.8-0.4,1.2-0.4C50-273.5,52.3-273.5,54.6-273.5C54.6-273.5,54.6-273.5,54.6-273.5z"/>
+</g>
+<g>
+	<circle class="st0" cx="88" cy="88" r="88"/>
+	<g>
+		<path class="st1" d="M89.9,43.7c10.8,0,21.5,0.3,32.3,0.9c4.5,0.3,9,0.4,13.4,1.3c7.4,1.5,12,6.1,13.5,13.5
+			c1.4,6.8,1.9,13.6,2.2,20.5c0.3,6.8,0.2,13.5-0.2,20.3c-0.4,6-1,12-2.2,17.9c-1.3,6.2-6.5,10.9-13.2,12
+			c-6.8,1.2-13.7,1.5-20.6,1.8c-15.1,0.6-30.1,0.6-45.2,0.2c-8.9-0.2-17.9-0.6-26.8-1.6c-3.8-0.4-7.5-1.2-10.6-3.8
+			c-3.5-2.9-5.2-6.8-6-11.2c-1.6-9.4-2-19-2-28.5c0-8.9,0.6-17.9,2-26.7c1-6.1,4-10.6,9.7-13.1c2.4-1.1,4.9-1.3,7.5-1.6
+			C59.1,43.7,74.5,43.7,89.9,43.7z M108.8,88c-0.2-0.2-0.3-0.2-0.5-0.3c-10.6-6.1-21.2-12.2-31.8-18.3c-1-0.6-0.8,0.1-0.8,0.7
+			c0,11.9,0,23.9,0,35.8c0,1.2,0,1.2,1,0.6c6.6-3.8,13.1-7.5,19.7-11.3C100.5,92.8,104.6,90.4,108.8,88z"/>
+		<path class="st0" d="M108.8,88c-4.2,2.4-8.3,4.8-12.4,7.1c-6.6,3.8-13.1,7.5-19.7,11.3c-1,0.6-1,0.6-1-0.6c0-11.9,0-23.9,0-35.8
+			c0-0.5-0.2-1.3,0.8-0.7c10.6,6.1,21.2,12.2,31.8,18.3C108.4,87.7,108.5,87.8,108.8,88z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/logo--teloscan.png b/src/assets/logo--teloscan.png
new file mode 100644
index 000000000..0dfb7e91e
Binary files /dev/null and b/src/assets/logo--teloscan.png differ
diff --git a/src/assets/logo--tlos.svg b/src/assets/logo--tlos.svg
new file mode 100644
index 000000000..49cc05f82
Binary files /dev/null and b/src/assets/logo--tlos.svg differ
diff --git a/src/assets/telos-logo-full.png b/src/assets/telos-logo-full.png
deleted file mode 100644
index 2ddf07063..000000000
Binary files a/src/assets/telos-logo-full.png and /dev/null differ
diff --git a/src/assets/telos-new-logo--dark.png b/src/assets/telos-new-logo--dark.png
new file mode 100644
index 000000000..b15607ec0
Binary files /dev/null and b/src/assets/telos-new-logo--dark.png differ
diff --git a/src/assets/telos-new-logo.png b/src/assets/telos-new-logo.png
new file mode 100644
index 000000000..60044b1b5
Binary files /dev/null and b/src/assets/telos-new-logo.png differ
diff --git a/src/assets/telos_acorn.png b/src/assets/telos_acorn.png
deleted file mode 100644
index 6723dbae6..000000000
Binary files a/src/assets/telos_acorn.png and /dev/null differ
diff --git a/src/boot/antelopeApi.js b/src/boot/antelopeApi.js
new file mode 100644
index 000000000..e90dc7d37
--- /dev/null
+++ b/src/boot/antelopeApi.js
@@ -0,0 +1,71 @@
+import { boot } from 'quasar/wrappers';
+import { Api, JsonRpc } from 'eosjs';
+
+const signTransaction = async function(actions) {
+    actions.forEach((action) => {
+        if (!action.authorization || !action.authorization.length) {
+            action.authorization = [
+                {
+                    actor: this.state.account.accountName,
+                    permission: 'active',
+                },
+            ];
+        }
+    });
+    let transaction = null;
+    try {
+        if (this.$type === 'ual') {
+            transaction = await this.$ualUser.signTransaction(
+                {
+                    actions,
+                },
+                {
+                    blocksBehind: 3,
+                    expireSeconds: 30,
+                },
+            );
+        }
+    } catch (e) {
+        console.error(actions, e.cause.message);
+        throw e.cause.message;
+    }
+    return transaction;
+};
+
+const getRpc = function () {
+    return this.$type === 'ual' ? this.$ualUser.rpc : this.$defaultApi.rpc;
+};
+
+const getTableRows = async function(options) {
+    const rpc = this.$antelopeApi.getRpc();
+    return await rpc.get_table_rows({
+        json: true,
+        ...options,
+    });
+};
+
+const getAccount = async function (accountName) {
+    const rpc = this.$antelopeApi.getRpc();
+    return await rpc.get_account(accountName);
+};
+
+export default boot(async ({ app, store }) => {
+    store.$isAntelopeCapable = app.config.globalProperties.isAntelopeCapable = false;
+    if(process.env.NETWORK_PROTOCOL && process.env.NETWORK_HOST){
+        const rpc = new JsonRpc(
+            `${process.env.NETWORK_PROTOCOL}://${process.env.NETWORK_HOST}:${process.env.NETWORK_PORT}`,
+        );
+        store.$defaultApi = new Api({
+            rpc,
+            textDecoder: new TextDecoder(),
+            textEncoder: new TextEncoder(),
+        });
+        store.$isAntelopeCapable = app.config.globalProperties.isAntelopeCapable = true;
+    }
+    store.$antelopeApi = {
+        signTransaction: signTransaction.bind(store),
+        getTableRows: getTableRows.bind(store),
+        getAccount: getAccount.bind(store),
+        getRpc: getRpc.bind(store),
+    };
+});
diff --git a/src/boot/api.js b/src/boot/api.js
index 9b0f9318b..66ffe3a11 100644
--- a/src/boot/api.js
+++ b/src/boot/api.js
@@ -26,7 +26,7 @@ const signTransaction = async function(actions) {
             );
         }
     } catch (e) {
-        console.log(actions, e.cause.message);
+        console.debug(actions, e.cause.message);
         throw e.cause.message;
     }
     return transaction;
diff --git a/src/boot/errorHandling.js b/src/boot/errorHandling.js
index 97ea4e50e..83675ca89 100644
--- a/src/boot/errorHandling.js
+++ b/src/boot/errorHandling.js
@@ -366,3 +366,18 @@ export default boot(({ app, store }) => {
     store['$t'] = app.config.globalProperties.$t;
 
 });
+
+export {
+    errorNotification,
+    unexpectedErrorNotification,
+    warningNotification,
+    successNotification,
+    notifySuccessTransaction,
+    notifySuccessMessage,
+    notifySuccessCopy,
+    notifyFailure,
+    notifyFailureWithAction,
+    notifyDisconnected,
+    notifyNeutralMessage,
+    notifyRememberInfo,
+};
diff --git a/src/boot/evm.js b/src/boot/evm.js
index a20d2c79d..9ebb6557e 100644
--- a/src/boot/evm.js
+++ b/src/boot/evm.js
@@ -1,10 +1,8 @@
 import { boot } from 'quasar/wrappers';
 import { TelosEvmApi } from '@telosnetwork/telosevm-js';
-import ContractManager from 'src/lib/ContractManager';
 import fetch from 'node-fetch';
 import axios from 'axios';
 import { ethers } from 'ethers';
-import { markRaw } from 'vue';
 
 const evm = new TelosEvmApi({
     endpoint: process.env.NETWORK_EVM_ENDPOINT,
@@ -42,14 +40,12 @@ const hyperion = axios.create({
     baseURL: process.env.NETWORK_EVM_ENDPOINT,
 });
 
-const contractManager = new ContractManager(hyperion);
-contractManager.init();
+const providerManager = new ProviderManager();
 
 export default boot(({ app, store }) => {
-    store.$providerManager = app.config.globalProperties.$providerManager = new ProviderManager();
+    store.$providerManager = app.config.globalProperties.$providerManager = providerManager;
     store.$evm = app.config.globalProperties.$evm = evm;
     store.$evmEndpoint = app.config.globalProperties.$evmEndpoint = hyperion;
-    store.$contractManager = app.config.globalProperties.$contractManager = markRaw(contractManager);
 });
 
-export { evm };
+export { evm, providerManager };
diff --git a/src/boot/i18n.js b/src/boot/i18n.js
index d6e4b4dc1..e12a5af67 100644
--- a/src/boot/i18n.js
+++ b/src/boot/i18n.js
@@ -19,6 +19,7 @@ export const i18n = createI18n({
     locale: lastChosenLanguage,
     globalInjection: true,
     messages,
+    legacy: false,
 });
 
 export default boot(({ app }) => {
@@ -29,6 +30,10 @@ export default boot(({ app }) => {
 
     // Listen for language-changed event
     const setLocale = (newLanguage) => {
+        if (!newLanguage){
+            return;
+        }
+
         const currentLanguage = localStorage.getItem('language');
 
         if (newLanguage !== currentLanguage) {
diff --git a/src/boot/q-component-defaults.js b/src/boot/q-component-defaults.js
index 1c991544f..f196d351e 100644
--- a/src/boot/q-component-defaults.js
+++ b/src/boot/q-component-defaults.js
@@ -37,6 +37,10 @@ function isTouchDevice() {
 }
 // more info on params: https://v2.quasar.dev/quasar-cli/boot-files
 export default boot((/* { app, router, ... } */) => {
+    // Metamask quick fix (redirects assets info to /token instead of /address), to replace with real 301 once SSR
+    if(window.location.href.includes('/token/0x')){
+        window.location.href = window.location.href.replace('/token/', '/address/');
+    }
     // https://github.com/quasarframework/quasar/discussions/8761#discussioncomment-1042529
     // This addresses an issue with q-tooltip where the tooltip disappears almost instantly on mobile,
     // while behaving as expected on desktop. Adding the hide-delay prop fixes mobile, but makes tooltips
diff --git a/src/boot/telosApi.js b/src/boot/telosApi.js
index ee817c3f8..4d3f59fbe 100644
--- a/src/boot/telosApi.js
+++ b/src/boot/telosApi.js
@@ -1,12 +1,45 @@
 import { boot } from 'quasar/wrappers';
 import axios from 'axios';
+import ContractManager from 'src/lib/contract/ContractManager';
+import FragmentParser from 'src/lib/contract/FragmentParser';
+import { markRaw } from 'vue';
 
 const telosApi = axios.create({
     baseURL: process.env.TELOS_API_ENDPOINT,
 });
+const indexerApi = axios.create({
+    baseURL: process.env.INDEXER_API_ENDPOINT,
+});
+const hyperion = axios.create({
+    baseURL: process.env.NETWORK_EVM_ENDPOINT,
+});
+
+const fragmentParser = new FragmentParser(hyperion);
+let contractManager = new ContractManager(indexerApi, fragmentParser);
+
+
+export default boot(({ app, store }) => {
+    app.config.globalProperties.$telosApi =  telosApi;
+    app.config.globalProperties.$indexerApi = indexerApi;
+    app.config.globalProperties.$fragmentParser = fragmentParser;
+    store.$contractManager = app.config.globalProperties.$contractManager = markRaw(contractManager);
+    store.$indexerApi = indexerApi;
+    // Intercept API answer to set contracts & abi in cache directly
+    indexerApi.interceptors.response.use(function (response) {
+        if(response.data?.abi?.length > 0){
+            for (const [key, value] of Object.entries(response.data.abi)) {
+                app.config.globalProperties.$contractManager.parser.addFunctionInterface(key, value);
+                app.config.globalProperties.$fragmentParser.addFunctionInterface(key, value);
+            }
+        }
+        if(response.data?.contracts){
+            app.config.globalProperties.$contractManager.addContractsToCache(response.data.contracts);
+        }
+        return response;
+    }, function (error) {
+        return Promise.reject(error);
+    });
 
-export default boot(({ app }) => {
-    app.config.globalProperties.$telosApi = telosApi;
 });
 
-export { telosApi };
+export { telosApi, indexerApi, contractManager, fragmentParser };
diff --git a/src/boot/ual.js b/src/boot/ual.js
index f4902c434..671ed4d49 100644
--- a/src/boot/ual.js
+++ b/src/boot/ual.js
@@ -3,24 +3,27 @@ import { UAL } from 'universal-authenticator-library';
 import { Wombat } from 'ual-wombat';
 import { Anchor } from 'ual-anchor';
 
-export default boot(async({ app, store }) => {
-    const chain = {
-        chainId: process.env.NETWORK_CHAIN_ID,
-        rpcEndpoints: [
-            {
-                protocol: process.env.NETWORK_PROTOCOL,
-                host: process.env.NETWORK_HOST,
-                port: process.env.NETWORK_PORT,
-            },
-        ],
-    };
+const chain = {
+    chainId: process.env.NETWORK_CHAIN_ID,
+    rpcEndpoints: [
+        {
+            protocol: process.env.NETWORK_PROTOCOL,
+            host: process.env.NETWORK_HOST,
+            port: process.env.NETWORK_PORT,
+        },
+    ],
+};
+
+const authenticators = [
+    new Anchor([chain], { appName: process.env.APP_NAME }),
+    new Wombat([chain], { appName: process.env.APP_NAME }),
+];
 
-    const authenticators = [
-        new Anchor([chain], { appName: process.env.APP_NAME }),
-        new Wombat([chain], { appName: process.env.APP_NAME }),
-    ];
+const ual = new UAL([chain], 'ual', authenticators);
 
-    const ual = new UAL([chain], 'ual', authenticators);
+export default boot(async({ app, store }) => {
     store['$ual'] = ual;
     app.config.globalProperties.$ual = ual;
 });
+
+export { ual };
diff --git a/src/components/AddToWallet.vue b/src/components/AddToWallet.vue
new file mode 100644
index 000000000..221c24c6f
--- /dev/null
+++ b/src/components/AddToWallet.vue
@@ -0,0 +1,75 @@
+<script>
+import { promptAddToMetamask } from 'src/lib/token-utils';
+import MetamaskLogo from 'src/assets/metamask-fox.svg';
+
+export default {
+    name: 'AddToMetamask',
+    props: {
+        token: {
+            type: Object,
+            required: true,
+        },
+        icon: {
+            type: Boolean,
+            default: false,
+        },
+        label: {
+            type: String,
+            default: '',
+        },
+    },
+    data() {
+        return {
+            logo: MetamaskLogo,
+        };
+    },
+    computed: {
+        showMetamaskPrompt() {
+            return window?.ethereum?.isMetaMask === true;
+        },
+    },
+    methods: {
+        promptAddToMetamask(address, symbol, logoURI, type, decimals) {
+            promptAddToMetamask(this.$q, address, symbol, logoURI, type, decimals);
+        },
+    },
+};
+</script>
+
+<template>
+<div v-if="showMetamaskPrompt" class="c-metamask-prompt">
+    <span v-if="icon">
+        <q-img
+            :src="logo"
+            @click="promptAddToMetamask(token.address, token.symbol, token.logoURI, token.type, token.decimals)"
+        />
+        <q-tooltip>{{ label }}</q-tooltip>
+    </span>
+    <span
+        v-else
+        tabindex="0"
+        :aria-label="label"
+        @click="promptAddToMetamask(token.address, token.symbol, token.logoURI, token.type, token.decimals)"
+    >
+        {{ label }}
+    </span>
+</div>
+</template>
+
+<style lang='scss' scoped>
+.c-metamask-prompt{
+    color: $secondary;
+    cursor: pointer;
+
+    .q-img:hover{
+        filter: grayscale(0);
+    }
+
+    .q-img{
+        width: 32px;
+        height: 32px;
+        filter: grayscale(1);
+        transition: 1s filter ease;
+    }
+}
+</style>
diff --git a/src/components/AddressField.vue b/src/components/AddressField.vue
index 2d07b3ed0..05cb684d1 100644
--- a/src/components/AddressField.vue
+++ b/src/components/AddressField.vue
@@ -1,120 +1,195 @@
-<script>
-import { mapActions } from 'vuex';
-import { ethers } from 'ethers';
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
 
-import CopyButton from 'components/CopyButton';
+import { contractManager } from 'src/boot/telosApi';
+import { getIcon } from 'src/lib/token-utils';
+import { toChecksumAddress } from 'src/lib/utils';
 
-export default {
-    name: 'AddressField',
-    components: {
-        CopyButton,
+import CopyButton from 'components/CopyButton.vue';
+
+const props = defineProps({
+    highlightAddress: {
+        type: String,
+        required: false,
+        default: '',
+    },
+    address: {
+        type: String,
+        required: true,
+    },
+    class: {
+        type: String,
+        default: '',
+    },
+    name: {
+        type: String,
+        default: '',
     },
-    props: {
-        address: {
-            type: String,
-            required: true,
-        },
-        name: {
-            type: String,
-            default: '',
-        },
-        copy: {
-            type: Boolean,
-            default: false,
-        },
-        highlight: {
-            type: Boolean,
-            default: false,
-        },
-        truncate: {
-            type: Number,
-            default: 18,
-        },
-        isContractTrx: {
-            type: Boolean,
-            default: false,
-        },
+    copy: {
+        type: Boolean,
+        default: false,
     },
-    data: () => ({
-        contract: null,
-    }),
-    watch: {
-        address () {
-            this.loadContract();
-        },
+    truncate: {
+        type: Number,
+        default: 0,
     },
-    async mounted() {
-        await this.loadContract();
+    hideContractIcon: {
+        type: Boolean,
+        default: false,
     },
-    methods: {
-        ...mapActions('evm', ['getContract']),
-        getDisplay() {
-            if(!this.address){
-                return;
-            }
-            if (this.name) {
-                return this.truncate > 0 && this.name.length > this.truncate ?
-                    `${this.name.slice(0, this.truncate)}...` :
-                    `${this.name}`;
-            }
-
-            if (this.contract && this.contract.getName()) {
-                const name = this.contract.getName();
-                if(name[0] === '0' && name[1] === 'x'){
-                    return this.truncate > 0 ? `${this.address.slice(0, this.truncate)}...` : this.address;
+});
+
+const emit = defineEmits(['highlight']);
+
+const displayName = ref('');
+const fullName = ref(toChecksumAddress(props.address));
+const contract = ref<any>(null);
+const logo = ref<any>(null);
+const tokenList = ref<any>(null);
+const checksum = ref('');
+
+const restart = async () => {
+    tokenList.value = await contractManager.getTokenList();
+    if (!props.address) {
+        return;
+    }
+    checksum.value = toChecksumAddress(props.address);
+    await loadContract();
+    await getDisplay();
+};
+
+
+
+watch(() => props.address, async () => {
+    restart();
+});
+
+onMounted(async () => {
+    restart();
+});
+
+const truncateText = (text: string, middle?: boolean) => {
+    if (props.truncate === 0 || text.length <= props.truncate) {
+        return text;
+    }
+    if (middle) {
+        return `${text.slice(0, (props.truncate / 2 + 2))}...${text.slice(text.length - (props.truncate / 2), text.length)}`;
+    }
+    return `${text.slice(0, props.truncate)}...`;
+};
+
+const getDisplay = async () => {
+    if (props.name) {
+        displayName.value = truncateText(props.name);
+        return;
+    }
+    if (!props.address) {
+        return;
+    }
+    let address = toChecksumAddress(props.address);
+    if (contract.value && contract.value.getName() && contract.value.getName().length > 0) {
+        if(tokenList.value?.tokens){
+            tokenList.value.tokens.forEach((token: any) => {
+                if(token.address.toLowerCase() === contract.value.address.toLowerCase()){
+                    logo.value = (token.logoURI);
                 }
-                return this.truncate > 0 && name.length > this.truncate ?
-                    `${name.slice(0, this.truncate)}...` :
-                    `${name}`;
-            }
-            if (!this.address) {
-                return '';
-            }
-            // This formats the address for us and handles zero padding we get from log events
-            const address = ethers.utils.getAddress(this.address);
-            return this.truncate > 0 ? `${address.slice(0, this.truncate)}...` : address;
-        },
-        async loadContract() {
-            this.contract = null;
-            if (!this.isContractTrx) {
-                return;
-            }
-
-            // TODO: check if this is a contract, account lookup via telosevm-js?
-            // TODO: if this is linked to a Telos account, display the Telos account name and link it to bloks
-            //   for now if we ask for a contract, we'll get one back and it'll be labeled as undefined
-            let contract = await this.getContract({ address: this.address });
-            if (contract) {
-                this.contract = contract;
-            }
-        },
+            });
+        }
+        logo.value = (logo.value === null && contract.value.getSupportedInterfaces().includes('erc20'))
+            ? ''
+            : logo.value
+        ;
+        const name = (contract.value.isToken() && contract.value.getProperties()?.symbol)
+            ? contract.value.getProperties().symbol
+            : contract.value.getName()
+                ;
+        if(!name.startsWith('0x')){
+            displayName.value = truncateText(name);
+            return;
+        }
+    }
+    // This formats the address for us and handles zero padding we get from log events
+    displayName.value = truncateText(address, true);
+};
 
-    },
+const loadContract = async () => {
+    let contractObj = await contractManager.getContract(props.address, true);
+    if (contractObj && contractObj.creationInfo.creator) {
+        fullName.value = contractObj.getName() ?? fullName.value;
+        contract.value = contractObj;
+    }
 };
+
+function emitHighlight(val: string) {
+    emit('highlight', val);
+}
+
 </script>
 
 <template>
-<div class="c-address-field">
-    <q-icon v-if="contract && !copy" class="far fa-file-alt">
-        <q-tooltip>Contract</q-tooltip>
-    </q-icon>
-    <router-link :to="`/address/${address}`" :class="highlight ? 'highlighted' : ''">
-        {{ getDisplay() }}
+<div
+    :key="displayName + checksum"
+    :class="['c-address-field', props.class]"
+    @mouseover="emitHighlight(checksum)"
+    @mouseleave="emitHighlight('')"
+>
+    <router-link
+        :to="`/address/${checksum}`"
+        :class="{
+            'c-address-field__link': true,
+            'c-address-field__link--highlight': highlightAddress === checksum && highlightAddress !== ''
+        }"
+    >
+        <q-img
+            v-if="logo !== null && hideContractIcon === false"
+            class="q-mr-xs"
+            :src="getIcon(logo)"
+            width="16px"
+            height="auto"
+        />
+        <q-icon v-else-if="contract && hideContractIcon == false" name="far fa-file-code" />
+        <span class="c-address-field__text">{{ displayName }}</span>
+        <q-tooltip v-if="fullName !== displayName">{{ fullName }}</q-tooltip>
     </router-link>
     <CopyButton v-if="copy && address" :text="address" description="address"/>
 </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .c-address-field {
+    min-width: 140px;
     display: inline-flex;
     align-items: center;
     gap: 4px;
-}
-a.highlighted {
-    color: #bb9200;
-}
-body.body--dark a.highlighted {
-    color: $warning;
+
+    &__link {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        position: relative;
+
+        &--highlight {
+            background: rgba($secondary, 0.2);
+            outline: 1px dashed $secondary;
+            border-radius: 5px;
+        }
+    }
+
+    &__text {
+        word-break: break-word;
+    }
+
+    .q-icon {
+        margin-right: 3px;
+    }
+
+    .q-img {
+        border-radius: 100%;
+    }
+
+    a {
+        vertical-align: middle;
+    }
 }
 </style>
diff --git a/src/components/AddressMoreInfo.vue b/src/components/AddressMoreInfo.vue
new file mode 100644
index 000000000..eb2f4f16e
--- /dev/null
+++ b/src/components/AddressMoreInfo.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { indexerApi } from 'src/boot/telosApi';
+import { TransactionQueryData } from 'src/types/TransactionQueryData';
+
+import TransactionField from 'components/TransactionField.vue';
+
+const { t: $t } = useI18n();
+
+const lastTxn = ref('...');
+const firstTxn = ref('...');
+const loadingComplete = ref(false);
+
+const props = defineProps({
+    address: {
+        type: String,
+        required: true,
+    },
+});
+
+onBeforeMount(async () => {
+    try{
+        const lastTxnQuery = (await indexerApi.get(`address/${props.address}/transactions?limit=1&includePagination=true`) as TransactionQueryData).data;
+        if (lastTxnQuery.results.length){
+            lastTxn.value = lastTxnQuery.results[0].hash;
+        }
+        // use total count to offset query and fetch first transaction
+        const offset = lastTxnQuery.total_count - 1;
+        const firstTxnQuery = (await indexerApi.get(`address/${props.address}/transactions?limit=1&offset=${offset}`) as TransactionQueryData).data;
+        firstTxn.value = firstTxnQuery.results[0].hash;
+        loadingComplete.value = true;
+    }catch(e){
+        console.error(e);
+    }
+});
+
+</script>
+
+<template>
+<q-card class="c-more-info">
+    <q-card-section v-if="!loadingComplete" >
+        <q-skeleton type="text" class="c-overview__skeleton" />
+    </q-card-section>
+    <q-card-section v-else>
+        <div class="c-more-info__section-label">
+            {{ $t('pages.last') }} {{ $t('pages.transaction_sent') }}
+        </div>
+        <TransactionField
+            color="primary"
+            :transaction-hash="lastTxn"
+            :truncate="18"
+            class="c-more-info__value"
+        />
+    </q-card-section>
+    <q-card-section v-if="!loadingComplete" >
+        <q-skeleton type="text" class="c-overview__skeleton" />
+    </q-card-section>
+    <q-card-section v-else>
+        <div class="c-more-info__section-label">
+            {{ $t('pages.first') }} {{ $t('pages.transaction_sent') }}
+        </div>
+        <TransactionField
+            color="primary"
+            :transaction-hash="firstTxn"
+            :truncate="18"
+            class="c-more-info__value"
+        />
+    </q-card-section>
+</q-card>
+</template>
+
+<style lang="scss">
+.c-more-info {
+    height:100%;
+    &__section-label {
+        font-weight: 600;
+        font-size: 0.8rem;
+        text-transform: capitalize;
+    }
+    &__skeleton {
+        height: 2rem;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            width: 50%;
+        }
+    }
+}
+</style>
diff --git a/src/components/AddressOverview.vue b/src/components/AddressOverview.vue
new file mode 100644
index 000000000..2276f1cf6
--- /dev/null
+++ b/src/components/AddressOverview.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { onBeforeMount, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { WEI_PRECISION, formatWei } from 'src/lib/utils';
+import { prettyPrintFiatBalance } from 'src/antelope/wallets/utils';
+
+const $store = useStore();
+const { t: $t } = useI18n();
+
+const props = defineProps({
+    balance: {
+        type: String,
+        required: true,
+    },
+    loadingComplete: {
+        type: Boolean,
+        required: true,
+    },
+});
+
+const fiatPrice = $store.getters['chain/tlosPrice'];
+
+const tokenQty = ref('0');
+const fiatValue = ref(0);
+
+function getBalanceDisplay(quantity: string) {
+    return $t('pages.tlos_balance', { balance: quantity });
+}
+
+onBeforeMount(() => {
+    tokenQty.value = formatWei(props.balance, WEI_PRECISION, 4);
+    fiatValue.value = parseFloat(tokenQty.value) * parseFloat(fiatPrice);
+});
+
+</script>
+
+<template>
+<div>
+    <q-card class="c-overview">
+        <q-card-section v-if="!loadingComplete" >
+            <q-skeleton type="text" class="c-overview__skeleton" />
+        </q-card-section>
+        <q-card-section v-else>
+            <div class="c-overview__label"> TLOS {{ $t('pages.balance') }} </div>
+            <div class="c-overview__balance">
+                <img
+                    src="branding/telos.png"
+                    alt="TLOS"
+                    height="18"
+                    width="18"
+                >
+                {{ getBalanceDisplay(tokenQty) }}
+            </div>
+        </q-card-section>
+        <q-card-section v-if="!loadingComplete" >
+            <q-skeleton type="text" class="c-overview__skeleton" />
+        </q-card-section>
+        <q-card-section v-else>
+            <div class="c-overview__label">
+                TLOS {{ $t('pages.value') }}
+            </div>
+            <div class="c-overview__balance"> {{ prettyPrintFiatBalance(fiatValue, 'us', false) }} (@ ${{ fiatPrice }}/TLOS)</div>
+        </q-card-section>
+    </q-card>
+</div>
+</template>
+
+<style lang="scss">
+.c-overview{
+    &__balance{
+        display: flex;
+    }
+    &__label{
+        font-weight: 600;
+        font-size: 0.8rem;
+    }
+    &__skeleton {
+        height: 2rem;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            width: 50%;
+        }
+    }
+    img{
+        margin-right: 2px;
+    }
+}
+
+@-moz-document url-prefix() {
+    .c-overview{
+        &__label{
+            font-weight: 1000;
+        }
+    }
+}
+</style>
diff --git a/src/components/AddressQR.vue b/src/components/AddressQR.vue
new file mode 100644
index 000000000..2de595e9c
--- /dev/null
+++ b/src/components/AddressQR.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { nextTick, onMounted, ref } from 'vue';
+import QRious from 'qrious';
+import { watch } from 'vue';
+
+const props = defineProps({
+    address: {
+        type: String,
+        required: true,
+    },
+    size: {
+        type: Number,
+        default: 235,
+    },
+});
+
+const qrInstance = ref<QRious>();
+const showCode = ref(false);
+
+function showQrCode(){
+    showCode.value = true;
+    nextTick().then(() => {
+        document.getElementById('qr-code')?.appendChild(qrInstance.value?.image as HTMLImageElement);
+    });
+}
+
+onMounted(() => {
+    qrInstance.value = new QRious({
+        background: 'white',
+        level: 'H',
+        size: props.size,
+        value: props.address,
+    });
+});
+
+watch(showCode, (value) => {
+    // This is a workaround for the issue with the dialog not scrolling to the top
+    // https://github.com/telosnetwork/teloscan/issues/625
+    if (!value) {
+        // what for the scroll and if it moves, correct it and end
+        const timer = setInterval(() => {
+            if (window.scrollY > 0) {
+                window.scrollTo({ top: 0, behavior: 'instant' });
+                clearInterval(timer);
+            }
+        }, 0);
+        // avoid the interval to run forever
+        setTimeout(() => {
+            window.scrollTo({ top: 0, behavior: 'instant' });
+            clearInterval(timer);
+        }, 100);
+    }
+});
+
+
+</script>
+
+<template>
+<q-icon
+    name="fas fa-qrcode"
+    size="1rem"
+    @click="showQrCode"
+/>
+<q-dialog v-model="showCode" :no-shake='true' position="top">
+    <q-card class="qr-dialog">
+        <q-card-section class="qr-dialog__header row items-center q-pb-none">
+            <div class="qr-dialog__title">Address QR Code</div>
+            <q-space />
+            <q-btn
+                v-close-popup
+                icon="close"
+                flat
+            />
+        </q-card-section>
+        <q-card-section id="qr-code"  class="qr-dialog__code"/>
+        <q-card-section class="qr-dialog__address">
+            {{ props.address }}
+        </q-card-section>
+    </q-card>
+</q-dialog>
+</template>
+
+<style lang="scss">
+.qr-dialog {
+
+    border-radius: 6px !important;
+    width: 300px;
+    margin-top: 1rem;
+    text-align: center;
+    &__header{
+        border-bottom: 2px solid;
+    }
+    &__title{
+        font-size: 1rem;
+    }
+    &__code{
+        margin: auto;
+    }
+    &__address{
+        font-size: .875rem;
+        word-wrap: break-word;
+        text-align: center;
+    }
+}
+</style>
+
diff --git a/src/components/AppSearch.vue b/src/components/AppSearch.vue
new file mode 100644
index 000000000..777c008e4
--- /dev/null
+++ b/src/components/AppSearch.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { evm } from 'src/boot/evm';
+
+defineProps<{
+    homepageMode?: boolean; // if true, the search bar will be styled for placement on the homepage
+}>();
+
+const $router = useRouter();
+const $q = useQuasar();
+const { t: $t } = useI18n();
+
+const TIME_DELAY = 6000;
+
+const searchTerm = ref('');
+const inputRef = ref<HTMLInputElement | null>(null);
+
+async function search() {
+    if (!searchTerm.value) {
+        return;
+    }
+
+    searchTerm.value = searchTerm.value.trim().replace(/\s/, '');
+    if (searchTerm.value.startsWith('0x')) {
+        if (searchTerm.value.length === 42) {
+            $router.push(`/address/${searchTerm.value}`);
+            return;
+        } else {
+            $router.push(`/tx/${searchTerm.value}`);
+            return;
+        }
+    } else if (searchTerm.value.match(/(^[a-z1-5.]{1,11}[a-z1-5]$)|(^[a-z1-5.]{12}[a-j1-5]$)/)) {
+        try {
+            const account = await evm.telos.getEthAccountByTelosAccount(searchTerm.value);
+            $router.push(`/address/${account.address}`);
+            return;
+        } catch (e) {
+            // in case this was a block that looked like an account name let's try it as a block
+            if (searchTerm.value && /\d+/g.test(searchTerm.value)) {
+                $router.push(`/block/${searchTerm.value}`);
+                return;
+            }
+
+            $q.notify({
+                position: 'top',
+                message: $t('components.header.address_not_found', { account: searchTerm.value }),
+                timeout: TIME_DELAY,
+            });
+            return;
+        }
+    } else if (/\d+/g.test(searchTerm.value)) {
+        $router.push(`/block/${searchTerm.value}`);
+        return;
+    }
+
+    $q.notify({
+        position: 'top',
+        message: $t('components.header.search_failed'),
+        timeout: TIME_DELAY,
+    });
+}
+</script>
+
+<template>
+<div
+    :class="{
+        'c-search': true,
+        'c-search--homepage': homepageMode,
+    }"
+>
+    <q-input
+        ref="inputRef"
+        v-model="searchTerm"
+        dense
+        outlined
+        color="black"
+        hide-bottom-space
+        :placeholder="$t('components.header.search_placeholder')"
+        type="search"
+        inputmode="search"
+        @keydown.enter="search"
+    >
+        <template v-slot:append>
+            <q-icon
+                name="search"
+                size="24px"
+                class="c-search__icon"
+                aria-hidden="true"
+                @click="search"
+            />
+        </template>
+    </q-input>
+</div>
+</template>
+
+<style lang="scss">
+.c-search {
+    $this: &;
+
+    --color: #{$dark};
+    --background-color: white;
+
+    height: 32px;
+    width: 100%;
+    max-width: 500px;
+
+    @media screen and (min-width: $breakpoint-md-min) {
+        width: 400px;
+    }
+
+    @media screen and (min-width: $breakpoint-lg-min) {
+        width: 500px;
+    }
+
+    @at-root .body--dark & {
+        --color: white;
+        --background-color: #{$dark};
+    }
+
+    // quasar overrides
+    .q-field--standout,
+    .q-field--standout.q-field--highlighted {
+        .q-field__native,
+        .q-field__append {
+            color: var(--color);
+        }
+    }
+
+    .q-field--dense {
+        .q-field__control,
+        .q-field__marginal {
+            height: 32px;
+        }
+    }
+
+    .q-field--outlined .q-field__control:before {
+        border: 1px solid var(--border-color);
+    }
+
+    &--homepage {
+        max-width: 800px;
+        width: 100%;
+        height: 48px;
+
+        #{$this}__icon {
+            position: relative;
+            display: flex;
+            z-index: 1;
+            color: white;
+            height: 32px;
+            width: 32px;
+
+            &::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: var(--q-primary);
+                border-radius: 4px;
+                z-index: -1;
+            }
+        }
+
+        .q-field__control {
+            &::before {
+                border-radius: 8px;
+                background-color: var(--background-color);
+                box-shadow:
+                    0 1px 5px rgba(0, 0, 0, 0.2),
+                    0 2px 2px rgba(0, 0, 0, 0.14),
+                    0 3px 1px -2px rgba(0, 0, 0, 0.12)
+            }
+
+            &::after {
+                border-radius: 8px;
+            }
+        }
+
+        .q-field--dense {
+            .q-field__control,
+            .q-field__marginal {
+                height: 48px;
+            }
+        }
+
+        .q-field--outlined .q-field__control:before {
+            border: none;
+        }
+
+        .q-field--outlined.q-field--highlighted .q-field__control::after {
+            border-color: var(--q-primary);
+        }
+    }
+
+    &__icon {
+        cursor: pointer;
+    }
+}
+</style>
diff --git a/src/components/BlockField.vue b/src/components/BlockField.vue
index 708ad4930..aef971ae7 100644
--- a/src/components/BlockField.vue
+++ b/src/components/BlockField.vue
@@ -1,17 +1,14 @@
-<script>
-export default {
-    name: 'BlockField',
-    props: {
-        block: {
-            type: Number,
-            required: true,
-        },
+<script setup lang="ts">
+defineProps({
+    block: {
+        type: [Number, String],
+        required: true,
     },
-};
+});
 </script>
 
 <template>
-<RouterLink :key="$route.path" :to="`/block/${this.block}`">
+<RouterLink :key="$route.path" :to="`/block/${block}`">
     {{ block }}
 </RouterLink>
 </template>
diff --git a/src/components/BlockOverview.vue b/src/components/BlockOverview.vue
new file mode 100644
index 000000000..b96ca4855
--- /dev/null
+++ b/src/components/BlockOverview.vue
@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+
+import type { BlockData } from 'src/types';
+
+import DateField from 'components/DateField.vue';
+
+const locale = useI18n().locale.value;
+
+const props = defineProps({
+    data: {
+        type: Object as () => BlockData | null,
+        required: false,
+    },
+});
+
+const emit = defineEmits(['prev-block', 'next-block', 'trx-table', 'extra-data']);
+
+const blockNumber = ref(0);
+const blockData = ref<BlockData | null>(null);
+
+// Computed properties
+const loading = computed(() => blockData.value === null);
+const timestamp = computed(() => blockData.value ? blockData.value.timestamp : 0);
+const transactionsCount = computed(() => blockData.value ? blockData.value.transactionsCount : 0);
+const size = computed(() => {
+    if (blockData.value) {
+        const size = ethers.BigNumber.from(blockData.value.size).toNumber();
+        return `${size.toLocaleString(locale)} bytes`;
+    }
+    return '0';
+});
+const gasUsed = computed(() => {
+    if (blockData.value) {
+        const gas = ethers.BigNumber.from(blockData.value.gasUsed);
+        try {
+            return gas.toNumber().toLocaleString(locale);
+        } catch (e) {
+            console.error(e);
+            return gas.toString();
+        }
+    }
+    return '0';
+});
+const gasLimit = computed(() => {
+    if (blockData.value) {
+        const gas = ethers.BigNumber.from(blockData.value.gasLimit);
+        try {
+            return gas.toNumber().toLocaleString(locale);
+        } catch (e) {
+            console.error(e);
+            return gas.toString();
+        }
+    }
+    return '0';
+});
+const nonce = computed(() => blockData.value ? blockData.value.nonce : '');
+const hash = computed(() => blockData.value ? blockData.value.hash : '');
+const parentHash = computed(() => blockData.value ? blockData.value.parentHash : '');
+const extraData = computed(() => blockData.value ? blockData.value.extraData : '');
+const transactionsRoot = computed(() => blockData.value ? blockData.value.transactionsRoot : '');
+
+// button Actions
+const trxTableClick = () => {
+    emit('trx-table');
+};
+const extraDataClick = () => {
+    emit('extra-data', extraData.value.replace(/^0x/, ''));
+};
+const prevBlock = () => {
+    emit('prev-block');
+};
+const nextBlock = () => {
+    emit('next-block');
+};
+
+watch(() => props.data, (newData) => {
+    blockData.value = newData ?? null;
+    const newNumber = Number(newData?.blockNumber);
+    if (!isNaN(newNumber)) {
+        blockNumber.value = newNumber;
+    }
+}, { immediate: true });
+
+</script>
+
+
+<template>
+<q-card class="c-block-data">
+
+    <!-- Block Number -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.block_height_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.block_height') }}</div>
+        </div>
+        <div class="c-block-data__col-val c-block-data__col-val--block-number">
+            <div class="c-block-data__row-value">{{ blockNumber }}</div>
+            <div class="c-block-data__row-icon-btn c-block-data__row-icon-btn--left" @click="prevBlock">
+                <i class="fa fa-chevron-left small"></i>
+            </div>
+            <div class="c-block-data__row-icon-btn c-block-data__row-icon-btn--right" @click="nextBlock">
+                <i class="fa fa-chevron-right small"></i>
+            </div>
+        </div>
+    </div>
+
+    <!-- Timestamp -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.timestamp_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.timestamp') }}</div>
+        </div>
+        <div class="c-block-data__col-val">
+            <div v-if="!loading" class="c-block-data__row-value c-block-data__row-value--timestamp">
+                <q-icon class="c-block-data__row-value-clock-icon" name="far fa-clock" />
+                <span class="c-block-data__row-date-field"><DateField
+                    class="c-block-data__row-value-clock-ago"
+                    :epoch="Math.round(timestamp / 1000)"
+                    :force-show-age="true"
+                /></span>
+                <span class="c-block-data__row-date-field">(<DateField
+                    class="c-block-data__row-value-clock-time"
+                    :epoch="Math.round(timestamp / 1000)"
+                    :force-show-age="false"
+                />)</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Transactions Count -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.transactions_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.transactions') }}</div>
+        </div>
+        <div class="c-block-data__col-val">
+            <div class="c-block-data__row-value">
+                <template
+                    v-if="transactionsCount > 0"
+                >
+                    <span class="c-block-data__row-value-link" @click="trxTableClick">
+                        {{
+                            transactionsCount === 1
+                                ? $t('components.blocks.count_transaction')
+                                : $t('components.blocks.count_transactions', { count: transactionsCount })
+                        }}
+                    </span>
+                </template>
+                <template v-else>
+                    {{ $t('components.blocks.count_transactions', { count: transactionsCount }) }}
+                </template>
+                {{ $t('components.blocks.in_this_block') }}
+            </div>
+        </div>
+    </div>
+
+    <!-- Size -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.size_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.size') }}</div>
+        </div>
+        <div class="c-block-data__col-val">
+            <div class="c-block-data__row-value">{{ size }}</div>
+        </div>
+    </div>
+
+    <!-- Separator -->
+    <hr class="c-block-data__separator" >
+
+    <!-- Gas Used -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.gas_used_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.gas_used') }}</div>
+        </div>
+        <div class="c-block-data__col-val">
+            <div class="c-block-data__row-value">{{ gasUsed }}</div>
+        </div>
+    </div>
+
+    <!-- Gas Limit -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.gas_limit_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.gas_limit') }}</div>
+        </div>
+        <div class="c-block-data__col-val">
+            <div class="c-block-data__row-value">{{ gasLimit }}</div>
+        </div>
+    </div>
+
+    <!-- Extra Data -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.extra_data_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.extra_data') }}</div>
+        </div>
+        <div class="c-block-data__col-val">
+            <div
+                class="c-block-data__row-value c-block-data__row-value--hash c-block-data__row-value--pointer"
+                @click="extraDataClick"
+            >{{ extraData }}</div>
+        </div>
+    </div>
+
+    <!-- Hash -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.hash_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.hash') }}</div>
+        </div>
+        <div class="c-block-data__col-val">
+            <div class="c-block-data__row-value  c-block-data__row-value--hash">{{ hash }}</div>
+        </div>
+    </div>
+
+    <!-- Parent Hash -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.parent_hash_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.parent_hash') }}</div>
+        </div>
+        <div class="c-block-data__col-val">
+            <div
+                class="c-block-data__row-value c-block-data__row-value--hash c-block-data__row-value--pointer"
+                @click="prevBlock"
+            >{{ parentHash }}</div>
+        </div>
+    </div>
+
+    <!-- Transactions Root -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.extra_data_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.extra_data') }}</div>
+        </div>
+        <div class="c-block-data__col-val">
+            <div class="c-block-data__row-value c-block-data__row-value--hash">{{ transactionsRoot }}</div>
+        </div>
+    </div>
+
+    <!-- Nonce -->
+    <div class="c-block-data__row">
+        <div class="c-block-data__col-att">
+            <div class="c-block-data__row-tooltip">
+                <q-icon class="c-block-data__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.blocks.nonce_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-block-data__row-attribute">{{ $t('components.blocks.nonce') }}</div>
+        </div>
+        <div class="c-block-data__col-val">
+            <div class="c-block-data__row-value">{{ nonce }}</div>
+        </div>
+    </div>
+</q-card>
+
+</template>
+
+
+<style lang="scss">
+
+.c-block-data {
+    padding: 1.25rem!important;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+    &__row, &__col-att, &__col-val {
+        display: flex;
+        flex-direction: row;
+        justify-content: left;
+        align-items: baseline;
+        gap: 5px;
+    }
+    &__col-val {
+        &--block-number {
+            display: flex;
+            align-items: center;
+        }
+    }
+    &__row {
+        padding: 0.5rem 0;
+    }
+    &__row-tooltip {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    &__row-attribute {
+        font-weight: 500;
+        max-width: 230px;
+        min-width: 200px;
+        width: 15vw;
+        text-wrap: nowrap;
+    }
+    &__row-value {
+        margin-left: 1rem;
+        &-link {
+            cursor: pointer;
+            color: var(--q-primary);
+        }
+        &--hardcoded {
+            color: $grey;
+        }
+        &--timestamp {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            flex-wrap: wrap;
+        }
+        &--hash {
+            word-break: break-all;
+        }
+        &--pointer {
+            cursor: pointer;
+            color: var(--q-primary);
+        }
+    }
+    &__row-date-field {
+        text-wrap: nowrap;
+    }
+    &__row-icon-btn {
+        cursor: pointer;
+        height: 22px;
+        width: 22px;
+        color: white;
+        background-color: $grey;
+        border: solid 1.25px $grey;
+        border-radius: 6px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &--left {
+            padding-right: 1px;
+        }
+        &--right {
+            padding-left: 1px;
+        }
+        .q-dark & {
+            color: rgb(8, 29, 53);
+        }
+    }
+    &__separator {
+        border: 1px solid $grey;
+        margin: 1rem 0;
+    }
+    &__row-tooltip-icon {
+        color: $grey;
+    }
+
+    @media screen and (max-width: 900px) {
+        &__row {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        &__row-attribute {
+            min-width: 100%;
+            margin-top: 5px;
+        }
+        &__row-value {
+            margin-left: 0;
+        }
+    }
+}
+</style>
+
diff --git a/src/components/BlockTable.vue b/src/components/BlockTable.vue
new file mode 100644
index 000000000..50e903eef
--- /dev/null
+++ b/src/components/BlockTable.vue
@@ -0,0 +1,353 @@
+<script lang="ts" setup>
+import { useQuasar } from 'quasar';
+import { useRoute, useRouter } from 'vue-router';
+import { onBeforeMount, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { indexerApi } from 'src/boot/telosApi';
+
+import BlockField from 'components/BlockField.vue';
+import DateField from 'components/DateField.vue';
+import { BlockData } from 'src/types';
+import { ethers } from 'ethers';
+
+import { Pagination } from 'src/types';
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const { t: $t } = useI18n();
+
+export interface BlockTableProps {
+    title: string;
+    initialPageSize?: number,
+    showEmptyBlocks?: boolean,
+}
+
+const props = withDefaults(defineProps<BlockTableProps>(), {
+    title: '',
+    initialPageSize: 25,
+    showEmptyBlocks: false,
+});
+
+const rows = ref<Array<BlockData>>([]);
+const loadingRows = ref<Array<number>>([]);
+const loading = ref(false);
+const showDateAge = ref(true);
+const blocks: BlockData[] = [];
+const page_size_options = [10, 25, 50, 100];
+
+const pagination = ref<Pagination>(
+    {
+        sortBy: 'number',
+        descending: true,
+        page: 1,
+        rowsPerPage: props.initialPageSize || 25,
+        rowsNumber: 0,
+    },
+);
+
+const columns = [
+    {
+        name: 'block',
+        label: $t('components.blocks.block'),
+        align: 'left',
+    },
+    {
+        name: 'timestamp',
+        label: $t('components.blocks.age'),
+        align: 'left',
+    },
+    {
+        name: 'transactionsCount',
+        label: $t('components.blocks.transactions'),
+        align: 'left',
+    },
+    {
+        name: 'gasUsed',
+        label: $t('components.blocks.gas_used'),
+        align: 'left',
+    },
+];
+
+watch(() => route.query.page,
+    (pageParam) => {
+        let page = 1;
+        let desc = true;
+        let size = page_size_options[0];
+
+        // we also allow to pass a single number as the page number
+        if (typeof pageParam === 'number') {
+            page = pageParam;
+        } else if (typeof pageParam === 'string') {
+            // we also allow to pass a string of two numbers: 'page,rowsPerPage'
+            const [p, s, d] = pageParam.split(',');
+            page = Number(p);
+            size = Number(s);
+            desc = (!d || d.toUpperCase() !== 'ASC');
+        }
+
+        setPagination(page, size, desc);
+    },
+    { immediate: true },
+);
+
+watch(() => props.showEmptyBlocks, () => {
+    parseBlocks();
+}, { immediate: true },
+);
+
+function setPagination(page: number, size: number, desc: boolean) {
+    if (page) {
+        pagination.value.page = page;
+    }
+    if (size) {
+        pagination.value.rowsPerPage = size;
+    }
+    pagination.value.descending = desc;
+    parseBlocks();
+}
+
+async function onPaginationChange(settings: { pagination: Pagination}) {
+    const { page, rowsPerPage, descending } = settings.pagination;
+    router.push({
+        hash: window.location.hash,
+        query: {
+            ...route.query,
+            page: `${page},${rowsPerPage},${(descending) ? 'DESC' : 'ASC'}`,
+        },
+    });
+}
+
+
+async function fetchBlocksPage() {
+    const path = getPath();
+    const result = await indexerApi.get(path);
+    if (pagination.value.rowsNumber === 0) {
+        pagination.value.rowsNumber = result.data?.total_count ?? 0;
+    }
+    return result;
+}
+
+async function parseBlocks() {
+    if(loading.value){
+        return;
+    }
+    loading.value = true;
+    const { page, rowsPerPage, sortBy, descending } = pagination.value;
+
+    try {
+        let response = await fetchBlocksPage();
+
+        pagination.value.page = page;
+        pagination.value.rowsPerPage = rowsPerPage;
+        pagination.value.sortBy = sortBy;
+        pagination.value.descending = descending;
+
+        blocks.splice(
+            0,
+            blocks.length,
+            ...response.data.results,
+        );
+        rows.value = blocks;
+        loading.value = false;
+        rows.value = blocks;
+    } catch (e: unknown) {
+        $q.notify({
+            type: 'negative',
+            message: $t('components.transaction.load_error'),
+            caption: (e as {message:string}).message,
+        });
+        loading.value = false;
+    }
+}
+
+
+function getPath() {
+    const { page, rowsPerPage, descending } = pagination.value;
+    let path = `blocks?limit=${
+        rowsPerPage === 0 ? 25 : rowsPerPage
+    }`;
+    path += `&offset=${(page - 1) * rowsPerPage}`;
+    path += `&sort=${descending ? 'desc' : 'asc'}`;
+    path += '&includePagination=true';
+    if (!props.showEmptyBlocks){
+        path += '&noEmpty=true';
+    }
+
+    return path;
+}
+
+function toggleDateFormat() {
+    showDateAge.value = !showDateAge.value;
+}
+
+function getGasUsed(gasUsed: string) {
+    if (gasUsed) {
+        const gas = ethers.BigNumber.from(gasUsed);
+        try {
+            return gas.toNumber().toLocaleString();
+        } catch (e) {
+            console.error(e);
+            return gas.toString();
+        }
+    }
+    return '0';
+}
+
+const updateLoadingRows = () => {
+    loadingRows.value = [];
+    for (var i = 1; i <= pagination.value.rowsPerPage; i++) {
+        loadingRows.value.push(i);
+    }
+};
+
+watch(() => pagination.value.rowsPerPage, () => {
+    updateLoadingRows();
+});
+
+onBeforeMount(() => {
+    updateLoadingRows();
+});
+
+</script>
+
+<template>
+<q-table
+    v-if="!loading"
+    v-model:pagination="pagination"
+    class="c-block-table"
+    :rows="rows"
+    :binary-state-sort="true"
+    :rows-per-page-label="$t('global.records_per_page')"
+    :row-key="row => row.blockNumber"
+    :columns="(columns as any)"
+    :rows-per-page-options="page_size_options"
+    @request="onPaginationChange"
+>
+    <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 }}
+                    <template v-if="col.name === 'date'">
+                        <q-icon
+                            class="info-icon q-ml-xs"
+                            name="fas fa-info-circle"
+                            @click="toggleDateFormat"
+                        >
+                            <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
+                                {{ $t('components.blocks.click_to_change_format') }}
+                            </q-tooltip>
+                        </q-icon>
+                    </template>
+                    <template v-if="col.name === 'method'">
+                        <q-icon class="info-icon" name="fas fa-info-circle q-ml-xs" />
+                        <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
+                            {{ $t('components.blocks.executed_based_on_decoded_data') }}
+                        </q-tooltip>
+                    </template>
+                </div>
+            </q-th>
+        </q-tr>
+    </template>
+    <template v-slot:body="props">
+        <q-tr :key="props.row.blockNumber" :props="props">
+            <q-td key="block" :props="props">
+                <BlockField :block="props.row.blockNumber"/>
+            </q-td>
+            <q-td key="timestamp" :props="props">
+                <DateField :epoch="props.row.timestamp / 1000" :force-show-age="showDateAge"/>
+                <q-tooltip anchor="center left" self="center middle" :offset="[-100, -60]">
+                    <DateField :epoch="props.row.timestamp / 1000" :force-show-age="false"/>
+                </q-tooltip>
+            </q-td>
+            <q-td key='transactionsCount' :props="props">
+                <span class="c-block-table__cell-trx">
+                    {{
+                        props.row.transactionsCount === 1
+                            ? $t('components.blocks.count_transaction')
+                            : $t('components.blocks.count_transactions', {
+                                count: props.row.transactionsCount
+                            })
+                    }}
+                </span>
+            </q-td>
+            <q-td key='gasUsed' class="c-block-table__td-gas-used" :props="props">
+                {{ getGasUsed(props.row.gasUsed) }}
+            </q-td>
+        </q-tr>
+    </template>
+</q-table>
+<q-table
+    v-else
+    v-model:pagination="pagination"
+    class="c-block-table"
+    :rows="loadingRows"
+    :binary-state-sort="true"
+    :rows-per-page-label="$t('global.records_per_page')"
+    :columns="(columns as any)"
+    :rows-per-page-options="page_size_options"
+>
+    <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 }}
+                    <template v-if="col.name === 'date'">
+                        <q-icon
+                            class="info-icon q-ml-xs"
+                            name="fas fa-info-circle"
+                            @click="toggleDateFormat"
+                        >
+                            <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
+                                {{ $t('components.blocks.click_to_change_format') }}
+                            </q-tooltip>
+                        </q-icon>
+                    </template>
+                    <template v-if="col.name === 'method'">
+                        <q-icon class="info-icon" name="fas fa-info-circle q-ml-xs" />
+                        <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
+                            {{ $t('components.blocks.executed_based_on_decoded_data') }}
+                        </q-tooltip>
+                    </template>
+                </div>
+            </q-th>
+        </q-tr>
+    </template>
+    <template v-slot:body="">
+        <q-tr>
+            <q-td key="block">
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="timestamp">
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key='transactionsCount'>
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key='gasUsed' class="c-block-table__td-gas-used">
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+        </q-tr>
+    </template>
+</q-table>
+</template>
+
+<style lang="scss">
+.c-block-table {
+    &__td-gas-used {
+        padding-right: 12% !important;
+    }
+    @media screen and (max-width: 900px) {
+        &__td-gas-used {
+            padding-right: 7% !important;
+        }
+    }
+    @media screen and (max-width: 600px) {
+        &__td-gas-used {
+            padding-right: 3% !important;
+        }
+    }
+}
+</style>
diff --git a/src/components/ConfirmationDialog.vue b/src/components/ConfirmationDialog.vue
index 59c65c798..ac1abb0c9 100644
--- a/src/components/ConfirmationDialog.vue
+++ b/src/components/ConfirmationDialog.vue
@@ -40,7 +40,7 @@ export default {
                 this.dialogMessage = this.$t('pages.view_source_prompt');
             } else {
                 this.icon = 'warning';
-                this.color = 'text-negative';
+                this.color = 'text-warning';
                 this.dialogMessage = this.$t('components.verify_prompt');
             }
         },
diff --git a/src/components/ContractHeader.vue b/src/components/ContractHeader.vue
new file mode 100644
index 000000000..0b7ac72cb
--- /dev/null
+++ b/src/components/ContractHeader.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+// import { useI18n } from 'vue-i18n';
+
+// const { t: $t } = useI18n();
+
+defineProps({
+    contract: {
+        type: Object,
+        required: true,
+    },
+    metaData: {
+        type: Object,
+        required: false,
+    },
+});
+
+</script>
+
+<template>
+<div class="c-contract-header">
+
+    <div class="c-contract-header__title">
+        <q-icon
+            class="fas fa-check-circle text-positive c-contract-header__icon"
+            size=".75rem"
+        >
+            <q-tooltip>
+                {{ $t('components.contract_tab.verified_contract') }}
+            </q-tooltip>
+        </q-icon>
+        Contract Source Code Verified
+    </div>
+
+    <div class="c-contract-header__data">
+        <div class="c-contract-header__data-col">
+            <div class="c-contract-header__data-col-row">
+                <div class="c-contract-header__data-title">Contract Name:</div>
+                <div class="c-contract-header__data-value">{{ contract.getName() }}</div>
+            </div>
+            <hr class="c-contract-header__data-divider" >
+            <div class="c-contract-header__data-col-row">
+                <div class="c-contract-header__data-title">Compiler Version:</div>
+                <div class="c-contract-header__data-value">{{ metaData?.compiler }}</div>
+            </div>
+            <hr class="c-contract-header__data-divider c-contract-header__data-divider--mobile" >
+        </div>
+        <div class="c-contract-header__data-col">
+            <div class="c-contract-header__data-col-row">
+                <div class="c-contract-header__data-title">Optimization Enabled:</div>
+                <div class="c-contract-header__data-value">
+                    <b>{{ metaData?.enabled }}</b>&nbsp;
+                    <span>with</span>&nbsp;
+                    <b>{{ metaData?.runs }}</b>&nbsp;
+                    <span>runs</span>&nbsp;
+                </div>
+            </div>
+            <hr class="c-contract-header__data-divider" >
+        </div>
+    </div>
+    <div class="c-contract-header__source-title">
+        <q-icon name="far fa-file-code" size=".75rem" class="c-contract-header__icon" />
+        Contract Source Code
+    </div>
+
+
+</div>
+</template>
+
+<style lang="scss">
+.c-contract-header {
+    height:100%;
+    width: 100%;
+
+    $padding-top: 25px;
+
+    &__title {
+        display: flex;
+        align-items: center;
+        padding-top: $padding-top;
+        gap: 5px;
+        font-weight: bold;
+    }
+
+    &__data {
+        padding-top: $padding-top;
+        &-col {
+            width: 100%;
+            display: inline-flex;
+            flex-direction: column;
+            @media only screen and (min-width: $breakpoint-md-min) {
+                width: 50%;
+            }
+
+            &-row {
+                padding: 10px 0px;
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: flex-start;
+            }
+        }
+        &-title {
+            font-weight: bold;
+            width: 30%;
+            min-width: 170px;
+            white-space: nowrap;
+        }
+        &-value {
+            font-weight: normal;
+            word-break: break-word;
+        }
+        &-divider {
+            border-color: var(--muted-text-color);
+            width: 100%;
+            @media only screen and (min-width: $breakpoint-md-min) {
+                &--mobile {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    &__source-title {
+        display: flex;
+        align-items: center;
+        padding-top: $padding-top;
+        gap: 5px;
+        font-weight: bold;
+    }
+}
+</style>
diff --git a/src/components/ContractMoreInfo.vue b/src/components/ContractMoreInfo.vue
new file mode 100644
index 000000000..c7d1286bd
--- /dev/null
+++ b/src/components/ContractMoreInfo.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+
+import AddressField from 'components/AddressField.vue';
+import CopyButton from 'components/CopyButton.vue';
+import TransactionField from 'components/TransactionField.vue';
+
+const { t: $t } = useI18n();
+
+const props = defineProps({
+    address: {
+        type: String,
+        required: true,
+    },
+    transaction: {
+        type: String,
+        required: true,
+    },
+    loadingComplete: {
+        type: Boolean,
+        required: true,
+    },
+});
+
+</script>
+
+<template>
+<q-card class="c-more-info">
+    <q-card-section v-if="!loadingComplete" >
+        <q-skeleton type="text" class="c-overview__skeleton" />
+    </q-card-section>
+    <q-card-section v-else class="c-more-info__section">
+        <div class="c-more-info__creator">
+            {{ $t('pages.contract_creator') }}
+        </div>
+        <AddressField
+            :address="props.address"
+            :truncate="18"
+        />
+        <CopyButton
+            :text="props.address"
+            accompanyingText=""
+            description="creator address"
+            class="c-more-info__copy"
+        />
+        <div class="c-more-info__at-txn c-more-info__value">at txn</div>
+        <TransactionField
+            :transaction-hash="props.transaction"
+        />
+    </q-card-section>
+</q-card>
+</template>
+
+<style lang="scss">
+.c-more-info{
+    height:100%;
+
+    &__copy{
+        display: inline;
+        font-size: 16px;
+    }
+    &__creator{
+        font-weight: 600;
+        font-size: 0.8rem;
+        text-transform: capitalize;
+    }
+    &__at-txn{
+        display: inline-flex;
+        text-transform: lowercase;
+        margin-right: .25rem;
+        margin-left: .25rem;
+    }
+    &__skeleton {
+        height: 2rem;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            width: 50%;
+        }
+    }
+}
+
+@-moz-document url-prefix() {
+    .c-more-info{
+        &__creator{
+            font-weight: 1000;
+        }
+    }
+}
+</style>
diff --git a/src/components/ContractTab/ContractByteCode.vue b/src/components/ContractTab/ContractByteCode.vue
new file mode 100644
index 000000000..153fad05d
--- /dev/null
+++ b/src/components/ContractTab/ContractByteCode.vue
@@ -0,0 +1,61 @@
+<script lang="javascript">
+
+export default {
+    name: 'ContractByteCode',
+    props: {
+        contract: {
+            type: Object,
+        },
+    },
+    data() {
+        return {
+            loading: true,
+            bytecode: null,
+            rpcId: 0,
+        };
+    },
+    async mounted() {
+        if(this.bytecode){
+            this.loading = false;
+            return;
+        }
+        try{
+            let bytecode = await this.$evmEndpoint.post('/evm', {
+                jsonrpc: '2.0',
+                id: ++this.rpcId,
+                method: 'eth_getCode',
+                params: [this.contract.address],
+            });
+            if(bytecode.data?.result){
+                this.bytecode = bytecode.data.result;
+            }
+        } catch(e){
+            console.error(e);
+        }
+        this.loading = false;
+    },
+
+};
+</script>
+
+<template>
+<div class="q-pt-lg q-pb-md">
+    <q-spinner v-if="loading" size="md" />
+    <div v-else class="bytecode shadow-2">
+        <pre>{{ bytecode }}</pre>
+    </div>
+</div>
+</template>
+
+<style scoped lang="sass">
+.bytecode
+    padding: 10px 15px 10px 15px
+    background: rgba(103, 110, 203, 0.08)
+.body--dark .bytecode
+    background: rgba(47, 60, 156, 0.11)
+pre
+    white-space: unset
+    max-width: 100%
+    margin: 0
+    word-break: break-all
+</style>
diff --git a/src/components/ContractTab/ContractInterface.vue b/src/components/ContractTab/ContractInterface.vue
index 4fdbdf6f7..3d332fb7f 100644
--- a/src/components/ContractTab/ContractInterface.vue
+++ b/src/components/ContractTab/ContractInterface.vue
@@ -1,50 +1,53 @@
-<script lang="javascript">
-import FunctionInterface from 'components/ContractTab/FunctionInterface';
-
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
 import { sortAbiFunctionsByName } from 'src/lib/utils';
+import { AbiFunction } from 'src/types/AbiFunction';
+
+import FunctionInterface from 'components/ContractTab/FunctionInterface.vue';
+import AppHeaderWallet from 'src/components/header/AppHeaderWallet.vue';
 
-export default {
-    name: 'ContractInterface',
-    components: { FunctionInterface },
-    props: {
-        write: {
-            type: Boolean,
-            required: true,
-        },
+const props = defineProps({
+    write: {
+        type: Boolean,
+        required: true,
+    },
+    contract: {
+        type: Object,
+        required: true,
     },
-    data: () => ({
-        functions: [],
-        contract: [],
-    }),
-    async mounted() {
-        this.contract = await this.$contractManager.getContract(this.$route.params.address);
-        let read = [];
-        let write = [];
-        this.contract.abi.forEach((a) => {
-            if (a.type !== 'function') {
-                return;
-            }
+});
 
-            if (a.stateMutability === 'view') {
-                read.push(a);
-            } else {
-                write.push(a);
-            }
-        });
+const functions = ref({ read: [] as AbiFunction[], write: [] as AbiFunction[] });
 
-        this.functions = {
-            read: sortAbiFunctionsByName(read),
-            write: sortAbiFunctionsByName(write),
-        };
-    },
-};
+onMounted(async () => {
+    const readFunctions: AbiFunction[] = [];
+    const writeFunctions: AbiFunction[] = [];
+
+    props.contract.abi.forEach((abiItem: AbiFunction) => {
+        if (abiItem.type !== 'function') {
+            return;
+        }
+
+        if (abiItem.stateMutability === 'view') {
+            readFunctions.push(abiItem);
+        } else {
+            writeFunctions.push(abiItem);
+        }
+    });
+
+    functions.value = {
+        read: sortAbiFunctionsByName(readFunctions),
+        write: sortAbiFunctionsByName(writeFunctions),
+    };
+});
 </script>
 
 <template>
-<div class="q-pa-md">
-    <q-list>
+<div class="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
-            v-for="func in (write ? functions.write : functions.read)"
+            v-for="func in (props.write ? functions.write : functions.read)"
             :key="func.name"
             :label="func.name"
             class="shadow-2 q-mb-md"
@@ -53,14 +56,31 @@ export default {
                 <div class="q-pa-md">
                     <FunctionInterface
                         :abi="func"
-                        :contract="contract"
-                        :group="write ? 'write' : 'read'"
-                        :run-label="write ? 'Write' : 'Query'"
+                        :contract="props.contract"
+                        :group="props.write ? 'write' : 'read'"
+                        :run-label="props.write ? 'Write' : 'Query'"
                     />
                 </div>
             </q-card>
-
         </q-expansion-item>
     </q-list>
+    <small v-if="props.contract.autoloadedAbi" class="row q-pb-md items-start flex text-grey no-wrap">
+        <q-icon name="info" size="12px" class="q-mr-xs q-mt-xs" />
+        <span>{{ $t('components.contract_tab.abi_loaded_from_interface') }}</span>
+    </small>
 </div>
 </template>
+<style lang="scss">
+.c-contract-interface{
+    &__container{
+        padding-left: 1rem;
+        padding-right: 1rem;
+        padding-bottom: .5rem;
+    }
+    &__login{
+        margin-bottom: 0.75rem !important;
+        margin-left: 1rem;
+    }
+}
+
+</style>
diff --git a/src/components/ContractTab/ContractSource.vue b/src/components/ContractTab/ContractSource.vue
index b942c5dba..94a7159da 100644
--- a/src/components/ContractTab/ContractSource.vue
+++ b/src/components/ContractTab/ContractSource.vue
@@ -1,93 +1,362 @@
-<script lang="javascript">
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
 import axios from 'axios';
-import JsonViewer from 'vue-json-viewer';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
 import hljs from 'highlight.js/lib/core';
+import json from 'highlight.js/lib/languages/json';
 import hljsDefineSolidity from 'highlightjs-solidity';
 import 'highlight.js/styles/default.css';
-import json from 'highlight.js/lib/languages/json';
 import { toChecksumAddress } from 'src/lib/utils';
+import { useRoute } from 'vue-router';
+
+import CopyButton from 'src/components/CopyButton.vue';
+import ContractHeader from 'components/ContractHeader.vue';
+import { MetaData } from 'src/types/MetaData';
 
 hljs.registerLanguage('json', json);
 hljsDefineSolidity(hljs);
 
-export default {
-    name: 'ContractSource',
-    components: {
-        JsonViewer,
+const props = defineProps({
+    contract: {
+        type: Object,
+        required: true,
     },
-    data() {
-        return {
-            tab:'sources',
-            contracts: [],
-            json: [],
-        };
-    },
-    async mounted() {
-        let sources;
-        try{
-            const checkSumAddress = toChecksumAddress(this.$route.params.address);
-            sources =
-        (await axios.get(
-            `https://${process.env.VERIFIED_CONTRACTS_BUCKET}.s3.amazonaws.com/${checkSumAddress}/source.json`)
-        ).data.files;
-        }catch(e){
-            console.log(e);
+});
+
+const route = useRoute();
+const files = ref<any[] | {bytecode: any}>([]);
+const fullscreen = ref(false);
+const loading = ref(true);
+const sources = ref(false);
+const metaData = ref<MetaData>({});
+
+const expanded = ref({} as {[key:string]: boolean});
+
+
+const getFileKey = (index: number) => `viewer-${index}`;
+
+onMounted(async () => {
+    let sourceData;
+    try {
+        const checkSumAddress = toChecksumAddress(route.params.address);
+        const response = await axios.get(
+            `https://${process.env.VERIFIED_CONTRACTS_BUCKET}.s3.amazonaws.com/${checkSumAddress}/source.json`,
+        );
+        sourceData = response.data;
+        sources.value = sourceData;
+        sortFiles(sourceData.files);
+    } catch (e) {
+        console.error(e);
+    }
+
+    if ((files.value as {bytecode: any}).bytecode) {
+        loading.value = false;
+    }
+
+    try {
+        const bytecodeResponse = await axios.post('/evm', {
+            jsonrpc: '2.0',
+            id: 1,
+            method: 'eth_getCode',
+            params: [props.contract.address],
+        });
+
+        if (bytecodeResponse.data?.result) {
+            (files.value as any[]).unshift({
+                content: bytecodeResponse.data.result,
+                name: 'bytecode',
+                expanded: false,
+                fullscreen: false,
+                raw: bytecodeResponse.data.result,
+                contract: false,
+            });
         }
-        this.sortFiles(sources);
-    },
-    methods: {
-        sortFiles(files){
-            for (let file of files){
-                if (this.isContract(file.name)){
-                    file.content =
-            hljs.highlight(file.content, { language: 'solidity' }).value;
-                    this.contracts.unshift(file);
-                }else{
-                    if (this.isJson(file.name)){
-                        file.content = JSON.parse(file.content);
-                    }
-                    this.json.push(file);
+
+        (files.value as any[]).forEach((file, index) => {
+            expanded.value[getFileKey(index)] = true;
+        });
+    } catch (e) {
+        console.error(e);
+    }
+
+    loading.value = false;
+});
+
+const toggleFullscreen = (item: any) => {
+    window.scrollTo(0, 0);
+    fullscreen.value = !fullscreen.value;
+    item.fullscreen = !item.fullscreen;
+};
+
+const sortFiles = (filesToSort: any[]) => {
+    for (const file of filesToSort) {
+        file.expanded = true;
+        file.fullscreen = false;
+        file.raw = file.content;
+
+        if (isContract(file.name)) {
+            file.contract = true;
+            file.content = hljs.highlight(file.content, { language: 'solidity' }).value;
+            (files.value as any[]).push(file);
+        } else {
+            if (isJson(file.name)) {
+                file.content = JSON.parse(file.content);
+                if (file.name === 'metadata.json'){
+                    setMetaData(file.content);
                 }
             }
-        },
-        isContract(fileName){
-            let ext = fileName.split('.').pop();
-            return ext === 'sol';
-        },
-        isJson(fileName){
-            let ext = fileName.split('.').pop();
-            return ext === 'json';
-        },
-    },
+            (files.value as any[]).unshift(file);
+        }
+    }
+
+    (files.value as any[]).forEach((file, index) => {
+        expanded.value[getFileKey(index)] = true;
+    });
+};
+
+const isContract = (fileName: string) => {
+    const ext = fileName.split('.').pop();
+    return ext === 'sol';
 };
+
+const isJson = (fileName: string) => {
+    const ext = fileName.split('.').pop();
+    return ext === 'json';
+};
+
+const setMetaData = (data: any) => {
+    metaData.value = {
+        compiler: data.compiler.version,
+        enabled: data.settings.optimizer.enabled,
+        runs: data.settings.optimizer.runs,
+    };
+};
+
+const expandAll = () => {
+    for (const key in expanded.value) {
+        expanded.value[key] = true;
+    }
+};
+
+const collapseAll = () => {
+    for (const key in expanded.value) {
+        expanded.value[key] = false;
+    }
+};
+
 </script>
 
 <template>
-<div class="contract-source">
-    <div v-for="(item, index) in json" :key="`viewer-${index}`">
-        <p class="file-label">{{ item.name }}</p>
-        <JsonViewer
-            class="source-container"
-            :value="item.content"
-            copyable="copyable"
-            expanded="expanded"
-            :expand-depth="1"
-            theme="custom-theme"
-        />
+<ContractHeader :contract="contract" :metaData="metaData"/>
+<div :class="(fullscreen) ? 'contract-source abs' : 'contract-source'">
+    <div v-if="loading" class="q-pa-lg justify-center"><q-spinner size="md" /></div>
+    <div v-else-if="!sources" class="q-pt-md q-pb-xl">
+        <p class="flex">
+            <q-icon
+                name="warning"
+                class="text-warning q-mt-xs q-mr-xs"
+                size="1.5rem"
+            />
+            <span>{{ $t('components.contract_tab.unverified_contract_source') }}</span>
+        </p>
+        <p>
+            <span>{{ $t('components.contract_tab.verified_contract_source') }}</span>
+            <a href="https://sourcify.dev/" target="_blank">
+                {{ $t('components.contract_tab.here') }}
+            </a>
+        </p>
+        <p v-if="contract?.autoloadedAbi">
+            {{ $t('components.contract_tab.abi_autoloaded') }}
+        </p>
+        <p v-else>
+            {{ $t('components.contract_tab.choose_abi') }}
+        </p>
     </div>
-    <div v-for="(item, index) in contracts" :key="`contract-${index}`">
-        <p class="file-label">{{ item.name }}</p>
-        <pre class="source-container q-pa-md" v-html="item.content"></pre>
+    <div v-else>
+        <div class="flex justify-end q-mb-md">
+            <q-icon
+                name="expand_more"
+                size="sm"
+                class="clickable q-mr-md"
+                @click="expandAll()"
+            >
+                <q-tooltip>{{ $t('components.expand_all') }}</q-tooltip>
+            </q-icon>
+            <q-icon
+                name="expand_less"
+                size="sm"
+                class="clickable"
+                @click="collapseAll()"
+            >
+                <q-tooltip>{{ $t('components.collapse_all') }}</q-tooltip>
+            </q-icon>
+        </div>
+
+        <q-expansion-item
+            v-for="(item, index) in files as any[]"
+            :key="`viewer-${index}`"
+            v-model="expanded[getFileKey(index)]"
+            :default-opened="true"
+            class="shadow-2 q-mb-md"
+        >
+            <template v-slot:header>
+                <div class="flex items-center justify-between">
+                    <span>{{ item.name }}</span>
+                    <span
+                        class="q-item__section flex q-item__section--side items-center cursor-pointer"
+                    >
+                        <span v-if="expanded[getFileKey(index)]">
+                            <q-icon
+                                name="fullscreen"
+                                size="sm"
+                                class="clickable"
+                                @click.stop="toggleFullscreen(item)"
+                            />
+                            <q-tooltip>{{ $t('global.toggle_fullscreen') }}</q-tooltip>
+                        </span>
+                        <CopyButton :text="item.raw" />
+                    </span>
+                </div>
+            </template>
+            <q-card :class="(item.fullscreen) ? 'fullscreen' : ''">
+                <q-card-section
+                    v-if="!item.contract"
+                    class="source-container"
+                >
+                    <VueJsonPretty
+                        class="q-pa-md"
+                        :data="item.content"
+                        :showLine="false"
+                    />
+                </q-card-section>
+                <q-card-section v-else class="source-container">
+                    <pre
+                        v-if="item.expanded || item.fullscreen"
+                        class="q-pa-md"
+                        v-html="item.content"
+                    ></pre>
+                </q-card-section>
+                <q-card-section
+                    v-if="item.fullscreen"
+                    class="exit flex items-center justify-center"
+                    @click="toggleFullscreen(item)"
+                >
+                    <q-icon name="close_fullscreen" size="xs" class="q-mr-xs" />
+                    <span>{{ $t('global.close') }} </span>
+                </q-card-section>
+            </q-card>
+        </q-expansion-item>
     </div>
 </div>
 </template>
 
-<style lang='sass'>
-.contract-source
-  margin-top: 1rem
+<style lang="scss" scoped>
+body.body--light .source-container {
+    background-color: #f5f5f58f;
+}
+.contract-source .q-item__section--side {
+    padding: 0;
+}
+
+.q-expansion-item{
+    border-radius: 12px;
+    .q-card{
+        border-radius: 12px;
+    }
+    .q-item{
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+    }
+    &--collapsed{
+        .q-item{
+            border-bottom-left-radius: 12px;
+            border-bottom-right-radius: 12px;
+        }
+    }
+    &--expanded{
+        .q-item{
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+}
+.fullscreen {
+    top: 110px;
+}
+.fullscreen pre {
+    padding-bottom: 120px;
+}
+pre {
+    margin-top: 0;
+}
+.body--dark .q-item__section--side:not(.q-item__section--avatar) {
+    color: rgba(255, 255, 255, 0.7);
+}
+.contract-source {
+    padding-bottom: 10px;
+}
+.contract-source.abs {
+    height: 0px;
+}
+.contract-source .q-item {
+    padding: 0px;
+    margin-bottom: 10px;
+}
+.contract-source .c-copy-button {
+    margin-top: 1px;
+}
+.body--dark .exit {
+    background: $dark;
+}
+.exit {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    z-index: 111111;
+    height: 50px;
+    background: var(--q-primary);
+    cursor: pointer;
+    line-height: 50px;
+}
+.contract-source .q-expansion-item  .fullscreen .q-card__section{
+    overflow-x: auto;
+}
+.fullscreen .source-container{
+    max-height: none;
+    height: 100%;
+    padding-bottom: 80px !important;
+}
+.contract-source .q-expansion-item .q-item > .flex{
+    width: 100%;
+}
+.contract-source .q-expansion-item .q-card__section{
+    overflow-x: hidden;
+}
+.contract-source .q-expansion-item .q-item{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+.contract-source .q-focus-helper{
+    display: none;
+}
+.contract-source .q-card__section{
+    padding: 0;
+}
+
+.source-container{
+    height: auto;
+    max-height: 20rem;
+    overflow-y: auto;
+    margin-bottom: 2rem;
+}
 
-.source-container
-  max-height: 20rem
-  overflow-y: auto
-  margin-bottom: 2rem
+@media screen and (max-width: 1440px){
+    .fullscreen{
+        top: 48px;
+    }
+}
 </style>
diff --git a/src/components/ContractTab/ContractTab.vue b/src/components/ContractTab/ContractTab.vue
index 68aa6e97b..1da0bf834 100644
--- a/src/components/ContractTab/ContractTab.vue
+++ b/src/components/ContractTab/ContractTab.vue
@@ -1,90 +1,121 @@
-<script>
-import ContractSource from 'components/ContractTab/ContractSource';
-import ContractInterface from 'components/ContractTab/ContractInterface';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import ContractSource from 'components/ContractTab/ContractSource.vue';
+import ContractInterface from 'components/ContractTab/ContractInterface.vue';
 import CopyButton from 'components/CopyButton.vue';
 
-export default {
-    name: 'ContractTab',
-    components: {
-        ContractSource,
-        ContractInterface,
-        CopyButton,
-    },
-    props: {
-        contract: {
-            type: Object,
-            default: () => ({}),
-        },
-    },
-    data: () => ({
-        source: true,
-        write: false,
-    }),
-    computed: {
-        abi() {
-            const { abi } = this.contract;
-
-            if (!Array.isArray(abi)) {
-                return '';
-            }
-
-            return JSON.stringify(this.contract.abi);
-        },
-        codeSeleted() {
-            return this.source === true;
-        },
-        readSelected() {
-            return this.source === false && this.write === false;
-        },
-        writeSelected() {
-            return this.source === false && this.write === true;
-        },
+const props = defineProps({
+    contract: {
+        type: Object,
+        default: () => ({}),
     },
-};
+});
+
+const source = ref(props.contract.abi?.length > 0);
+const write = ref(false);
+
+const verified = computed(() => props.contract.verified);
+const abi = computed(() => {
+    if (!props.contract.abi || !Array.isArray(props.contract.abi)) {
+        return false;
+    }
+    return JSON.stringify(props.contract.abi);
+});
+
+const codeSelected = computed(() => source.value === true);
+const readSelected = computed(() => source.value === false && write.value === false);
+const writeSelected = computed(() => source.value === false && write.value === true);
+
 </script>
 
 <template>
-<div class="contract-tab">
-    <CopyButton
-        v-if="abi"
-        :text="abi"
-        :accompanying-text="$t('components.contract_tab.copy_abi_to_clipboard')"
-        class="q-mb-md"
-    />
-    <br>
-
-    <q-btn-group>
-        <q-btn
-            :outline="codeSeleted"
-            :label="$t('components.contract_tab.code')"
-            push
-            @click="source = true"
-        />
-        <q-btn
-            :outline="readSelected"
-            :label="$t('components.contract_tab.read')"
-            push
-            @click="source = false; write = false"
-        />
-        <q-btn
-            :outline="writeSelected"
-            :label="$t('components.contract_tab.write')"
-            push
-            @click="source = false; write = true"
+<q-card>
+    <div v-if="abi" :key="contract.address + abi.length" class="c-contract">
+        <div class="flex justify-between items-center">
+            <div class="c-contract__tab-container">
+                <q-btn
+                    :label="$t('components.contract_tab.code')"
+                    :class="{
+                        'c-contract__tab': true,
+                        'c-contract__tab--active': codeSelected,
+                    }"
+                    @click="source = true; write = false"
+                />
+                <q-btn
+                    :label="$t('components.contract_tab.read')"
+                    :class="{
+                        'c-contract__tab': true,
+                        'c-contract__tab--active': readSelected,
+                    }"
+                    @click="source = false; write = false"
+                />
+                <q-btn
+                    :label="$t('components.contract_tab.write')"
+                    :class="{
+                        'c-contract__tab': true,
+                        'c-contract__tab--active': writeSelected,
+                    }"
+                    @click="source = false; write = true"
+                />
+            </div>
+            <CopyButton
+                v-if="verified && !contract?.autoloadedAbi"
+                :text="abi"
+                :accompanying-text="$t('components.contract_tab.copy_abi_to_clipboard')"
+            />
+        </div>
+        <ContractSource v-if="source" :contract="contract"/>
+        <ContractInterface
+            v-else
+            :write="write"
+            :contract="contract"
         />
-    </q-btn-group>
-
-    <ContractSource v-if="source" />
-    <ContractInterface
-        v-else
-        :write="write"
-    />
-</div>
+    </div>
+</q-card>
+
 </template>
 
-<style lang='sass'>
-.contract-tab
-    margin-left: 2rem
-    margin-right: 2rem
-    padding-top: 1rem
+<style lang='scss' scoped>
+.c-contract{
+    padding-top: 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    &__tab-container{
+        display: inline-flex;
+        gap: .5rem;
+    }
+
+    &__tab{
+        cursor: pointer;
+        border-radius: 5px;
+        color: var(--text-color);
+        text-transform: capitalize !important;
+        background-color: var(--tab-bg-color);
+
+        &:hover{
+            color: var(--text-color);
+        }
+
+        &--active {
+            color: var(--active-tab-text-color);
+            background-color: var(--active-tab-bg-color);
+        }
+    }
+
+    .vjs-tree-list-holder-inner {
+        padding-bottom: 20px;
+    }
+}
+
+@media screen and (max-width: 764px) {
+    .c-contract > .items-center .c-copy-button {
+        margin-top: 12px;
+    }
+
+    .c-contract > .items-center {
+        display: block;
+    }
+}
 </style>
diff --git a/src/components/ContractTab/FunctionInterface.vue b/src/components/ContractTab/FunctionInterface.vue
index e944e55fa..ddd83a679 100644
--- a/src/components/ContractTab/FunctionInterface.vue
+++ b/src/components/ContractTab/FunctionInterface.vue
@@ -7,8 +7,10 @@ import { mapGetters } from 'vuex';
 import { BigNumber, ethers } from 'ethers';
 import { Transaction } from '@ethereumjs/tx';
 import { LOGIN_DATA_KEY } from 'src/lib/utils';
-
-
+import { useAccountStore } from 'src/antelope';
+import { CURRENT_CONTEXT } from 'src/antelope/wallets';
+import { EvmABI, EvmFunctionParam } from 'src/antelope/types';
+import { WEI_PRECISION } from 'src/antelope/wallets/utils';
 import {
     asyncInputComponents,
     getComponentForInputType,
@@ -20,14 +22,10 @@ import {
     parameterTypeIsBoolean,
     parameterTypeIsSignedIntArray,
     parameterTypeIsUnsignedIntArray,
-} from 'components/ContractTab/function-interface-utils';
+} from 'src/lib/function-interface-utils';
 
 import TransactionField from 'src/components/TransactionField.vue';
-import { useAccountStore } from 'src/antelope';
-import { CURRENT_CONTEXT } from 'src/antelope/wallets';
-import { EvmABI, EvmFunctionParam } from 'src/antelope/types';
-import { WEI_PRECISION } from 'src/antelope/wallets/utils';
-
+import LoginModal from 'components/LoginModal.vue';
 
 interface Opts {
     value?: string;
@@ -42,6 +40,7 @@ export default defineComponent({
     components: {
         ...asyncInputComponents,
         TransactionField,
+        LoginModal,
     },
     props: {
         contract: {
@@ -95,6 +94,7 @@ export default defineComponent({
                 'type': 'amount',
                 'internalType': 'amount',
             },
+            showLoginModal: false,
         };
     },
     async created() {
@@ -104,8 +104,8 @@ export default defineComponent({
     computed: {
         ...mapGetters('login', [
             'address',
-            'isLoggedIn',
             'isNative',
+            'isLoggedIn',
             'nativeAccount',
         ]),
         functionABI(){
@@ -169,9 +169,6 @@ export default defineComponent({
                 handleValueParsed:      (type: string, index: number, value: EvmFunctionParam) => handleValueParsed(type, index, value),
             }));
         },
-        enableRun() {
-            return this.isLoggedIn || this.abi.stateMutability === 'view';
-        },
         missingInputs() {
             if (this.abi.inputs.length !== this.params.length) {
                 return true;
@@ -210,7 +207,14 @@ export default defineComponent({
         clearAmount() {
             this.amountInput = 0;
         },
+        login() {
+            this.showLoginModal = true;
+        },
         async run() {
+            if (!this.isLoggedIn){
+                this.login();
+                return;
+            }
             this.loading = true;
             this.result = null;
             try {
@@ -243,7 +247,7 @@ export default defineComponent({
             this.endLoading();
         },
         async getEthersFunction(provider?: ethers.providers.JsonRpcSigner | ethers.providers.JsonRpcProvider) {
-            const contractInstance = await this.contract.getContractInstance(provider);
+            const contractInstance = await this.$contractManager.getContractInstance(this.contract, provider);
             return contractInstance[this.functionABI];
         },
         runRead() {
@@ -312,7 +316,7 @@ export default defineComponent({
                 common: this.$evm.chainConfig,
             });
 
-            this.hash = `0x${tx.hash().toString('hex')}`;
+            this.hash = `0x${tx?.hash().toString('hex')}`;
             this.endLoading();
         },
         async runEVM(opts: Opts) {
@@ -359,6 +363,7 @@ export default defineComponent({
 
 <template>
 <div>
+    <LoginModal :show="showLoginModal" @hide="showLoginModal = false" />
     <q-dialog v-model="enterAmount">
         <q-card class="amount-dialog">
             <div class="q-pa-md">
@@ -385,14 +390,12 @@ export default defineComponent({
                         v-close-popup
                         flat
                         :label="$t('global.ok')"
-                        color="primary"
                         @click="setAmount"
                     />
                     <q-btn
                         v-close-popup
                         flat
                         :label="$t('global.cancel')"
-                        color="primary"
                         @click="clearAmount"
                     />
                 </q-card-actions>
@@ -431,12 +434,11 @@ export default defineComponent({
     </template>
 
     <q-btn
-        v-if="enableRun"
         :loading="loading"
         :label="runLabel"
         :disabled="missingInputs"
         class="run-button q-mb-md"
-        color="secondary"
+        color="primary"
         icon="send"
         @click="run"
     />
@@ -454,7 +456,3 @@ export default defineComponent({
     </div>
 </div>
 </template>
-
-<style lang="scss">
-
-</style>
diff --git a/src/components/ContractTab/GenericContractInterface.vue b/src/components/ContractTab/GenericContractInterface.vue
index fd7321893..9b23fe378 100644
--- a/src/components/ContractTab/GenericContractInterface.vue
+++ b/src/components/ContractTab/GenericContractInterface.vue
@@ -1,331 +1,387 @@
-<script>
-import JsonViewer from 'vue-json-viewer';
-
-import Contract from 'src/lib/Contract';
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { ref, watch, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import 'vue-json-pretty/lib/styles.css';
+import ContractFactory from 'src/lib/contract/ContractFactory';
+import { contractManager } from 'src/boot/telosApi';
 import { erc721Abi, erc1155Abi } from 'src/lib/abi';
 import erc20Abi from 'erc-20-abi';
-
 import { sortAbiFunctionsByName } from 'src/lib/utils';
 
+import VueJsonPretty from 'vue-json-pretty';
 import FunctionInterface from 'components/ContractTab/FunctionInterface.vue';
+import AppHeaderWallet from 'src/components/header/AppHeaderWallet.vue';
+
+const $q = useQuasar();
+const route = useRoute();
+const { t: $t } = useI18n();
+const factory = new ContractFactory();
+
+const props = defineProps({
+    contract: Object,
+});
+
+const fileModel = ref<any>(null);
+const address = ref('');
+const functions = ref({ read: [], write: [] });
+const displayWriteFunctions = ref(false);
+const customAbiDefinition = ref('');
+const selectedAbi = ref<any>(null);
+const abiOptions = {
+    erc20: 'erc20',
+    erc721: 'erc721',
+    erc1155: 'erc1155',
+    custom: 'custom',
+};
+const selectedContract = ref<any>(null);
+
+address.value = route.params.address as string;
 
-export default {
-    name: 'GenericContractInterface',
-    components: {
-        FunctionInterface,
-        JsonViewer,
-    },
-    data: () => ({
-        file_model: null,
-        address: null,
-        contract: null,
-        functions: null,
-        displayWriteFunctions: false,
-        customAbiDefinition: '',
-        selectedAbi: null,
-        abiOptions: {
-            erc20: 'erc20',
-            erc721: 'erc721',
-            erc1155: 'erc1155',
-            custom: 'custom',
-        },
-    }),
-    computed: {
-        showAbiFunctions() {
-            return Object.values(this.abiOptions).includes(this.selectedAbi) &&
-                ['read', 'write']
-                    .some(access => (this.functions?.[access] ?? [])
-                        .some(member => member.type === 'function'));
-        },
-        customAbiIsValidJSON() {
+const showAbiFunctions = computed(() => Object.values(abiOptions).includes(selectedAbi.value) &&
+    ['read', 'write'].some(access => (functions.value[access] ?? []).some(member => member.type === 'function')),
+);
+
+const customAbiIsValidJSON = computed(() => {
+    try {
+        JSON.parse(customAbiDefinition.value);
+        return true;
+    } catch {
+        return false;
+    }
+});
+
+const autoloadedAbi = computed(() => props.contract?.autoloadedAbi);
+
+watch(selectedAbi, (newValue, oldValue) => {
+    if (oldValue !== newValue) {
+        formatAbiFunctionLists();
+        displayWriteFunctions.value = false;
+    }
+});
+
+watch(customAbiDefinition, (newValue, oldValue) => {
+    if (oldValue !== newValue && customAbiIsValidJSON.value) {
+        formatAbiFunctionLists();
+        displayWriteFunctions.value = false;
+    }
+    // if we detect any change in the custom abi definition, we should reset the fileModel
+    if (oldValue && oldValue !== newValue) {
+        fileModel.value = null;
+    }
+    // if newValue is empty, we should reset
+    if (!newValue) {
+        reset();
+    }
+});
+
+const uploadFile = (e: Event) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) {
+        const fileReader = new FileReader();
+        fileReader.onload = (event) => {
+            const json = event.target?.result;
             try {
-                return !!JSON.parse(this.customAbiDefinition);
-            } catch {
-                return false;
-            }
-        },
-    },
-    watch: {
-        selectedAbi(newValue, oldValue) {
-            if (oldValue !== newValue) {
-                this.formatAbiFunctionLists();
-                this.displayWriteFunctions = false;
-            }
-        },
-        customAbiDefinition(newValue, oldValue) {
-            console.log('Watching customAbiDefinition:', [newValue, oldValue]);
-            if (oldValue !== newValue && this.customAbiIsValidJSON) {
-                this.formatAbiFunctionLists();
-                this.displayWriteFunctions = false;
+                JSON.parse(json as string);
+                customAbiDefinition.value = json as string;
+            } catch (error) {
+                console.error('Error parsing JSON file:', error);
+                reset();
+                $q.notify({
+                    message: 'Invalid JSON file',
+                    color: 'negative',
+                });
             }
-            // if we detect any change in the custom abi definition, we should reset the file_model
-            if (oldValue && oldValue !== newValue) {
-                this.file_model = null;
-            }
-            // if newValue is empty, we should reset
-            if (!newValue) {
-                this.reset();
-            }
-        },
-    },
-    created() {
-        this.address = this.$route.params.address;
-    },
-    methods: {
-        reset() {
-            this.functions = {
-                read: [],
-                write: [],
-            };
-            this.file_model = null;
-            this.customAbiDefinition = '';
-        },
-        async uploadFile(e) {
-            let file = e.target.files[0];
-            let fileReader = new FileReader();
-            fileReader.onload = (event) => {
-                let json = event.target.result;
-                try {
-                    JSON.parse(json); // this will throw an error if the json is invalid
-                    this.customAbiDefinition = json;
-                } catch (error) {
-                    console.error(error);
-                    this.reset();
-                    this.$q.notify({
-                        message: 'Invalid JSON file',
-                        color: 'negative',
-                    });
-                }
-            };
-            fileReader.readAsText(file);
-        },
-        async formatAbiFunctionLists() {
-            this.functions = {
-                read: [],
-                write: [],
-            };
+        };
+        fileReader.onerror = (event: any) => {
+            console.error('Error reading file:', event.target.error);
+            $q.notify({
+                message: 'Error reading file',
+                color: 'negative',
+            });
+        };
+        fileReader.readAsText(file);
+    }
+};
 
-            const { custom, erc20, erc721, erc1155 } = this.abiOptions;
+const reset = () => {
+    functions.value = { read: [], write: [] };
+    fileModel.value = null;
+    customAbiDefinition.value = '';
+};
 
-            let abi;
-            const customAbiSelected = this.selectedAbi === custom;
+const formatAbiFunctionLists = async () => {
+    functions.value = {
+        read: [],
+        write: [],
+    };
 
-            const selectedAbiIsCustomAndValid =
-                !!this.customAbiDefinition &&
-                this.customAbiIsValidJSON &&
-                customAbiSelected;
-            if (selectedAbiIsCustomAndValid) {
-                abi = JSON.parse(this.customAbiDefinition);
-            } else if (this.selectedAbi === erc20) {
-                abi = erc20Abi;
-            } else if (this.selectedAbi === erc721) {
-                abi = erc721Abi;
-            } else if (this.selectedAbi === erc1155) {
-                abi = erc1155Abi;
-            }else{
-                return;
-            }
-            if (!Array.isArray(abi)) {
-                if (abi.abi && Array.isArray(abi.abi)) {
-                    abi = abi.abi;
-                }
-            }
+    const { custom, erc20, erc721, erc1155 } = abiOptions;
 
-            // abi.map function is used here:
-            // https://github.com/ethers-io/ethers.js/blob/master/packages/abi/lib.esm/interface.js#L57
-            console.assert(typeof abi.map === 'function', 'ERROR: abi is not an array');
+    let abi;
+    const customAbiSelected = selectedAbi.value === custom;
 
-            this.contract = new Contract({
-                name: this.$t('components.contract_tab.unverified_contract'),
-                address: this.address,
-                abi,
-                manager: this.$contractManager,
-            });
-            let read = [];
-            let write = [];
+    const selectedAbiIsCustomAndValid =
+                    !!customAbiDefinition.value &&
+                    customAbiIsValidJSON.value &&
+                    customAbiSelected;
+    if (selectedAbiIsCustomAndValid) {
+        abi = JSON.parse(customAbiDefinition.value);
+    } else if (selectedAbi.value === erc20) {
+        abi = erc20Abi;
+    } else if (selectedAbi.value === erc721) {
+        abi = erc721Abi;
+    } else if (selectedAbi.value === erc1155) {
+        abi = erc1155Abi;
+    } else {
+        return;
+    }
+    if (!Array.isArray(abi)) {
+        if (abi.abi && Array.isArray(abi.abi)) {
+            abi = abi.abi;
+        }
+    }
 
-            (this.contract?.abi ?? []).forEach((a) => {
-                if (a.type !== 'function') {
-                    return;
-                }
+    selectedContract.value = factory.buildContract({
+        name: $t('components.contract_tab.unverified_contract'),
+        address: address.value,
+        abi,
+        manager: contractManager,
+    });
+    let read = [] as any[];
+    let write = [] as any[];
 
-                if (a.stateMutability === 'view') {
-                    read.push(a);
-                } else {
-                    write.push(a);
-                }
-            });
-            this.functions = {
-                read: sortAbiFunctionsByName(read),
-                write: sortAbiFunctionsByName(write),
-            };
-        },
-    },
+    (selectedContract.value?.abi ?? []).forEach((a) => {
+        if (a.type !== 'function') {
+            return;
+        }
+
+        if (a.stateMutability === 'view') {
+            read.push(a);
+        } else {
+            write.push(a);
+        }
+    });
+    functions.value = {
+        read: sortAbiFunctionsByName(read),
+        write: sortAbiFunctionsByName(write),
+    };
 };
+
 </script>
 
 <template>
-<div class="q-pa-md">
-    <div class="row q-pb-md">
-        <div class="col-12">
-            <p>
+<q-card class="c-gcontract-interface">
+    <div class="c-gcontract-interface__container">
+        <div class="c-gcontract-interface__header">
+            <p class="c-gcontract-interface__header-paragraph">
                 <q-icon
                     name="warning"
-                    class="text-negative"
-                    size="1.25rem"
+                    class="text-warning q-mt-xs q-mr-xs"
+                    size="1.5rem"
                 />
-                {{ $t('components.contract_tab.unverified_contract_source') }}
+                <span><b>{{ $t('components.contract_tab.unverified_contract_source') }}</b></span>
             </p>
-            <p>
-                <a href="https://sourcify.dev" target="_blank">
-                    {{ $t('components.contract_tab.click_here') }}
+            <p class="c-gcontract-interface__header-paragraph">
+                <span>{{ $t('components.contract_tab.verified_contract_source') }}</span>
+                <a href="https://sourcify.dev/" target="_blank">
+                    {{ $t('components.contract_tab.here') }}
                 </a>
-                {{ $t('components.contract_tab.upload_source_files') }}
+            </p>
+            <p v-if="autoloadedAbi" class="c-gcontract-interface__header-paragraph">
+                {{ $t('components.contract_tab.abi_autoloaded') }}
+            </p>
+            <p v-else class="c-gcontract-interface__header-paragraph">
+                {{ $t('components.contract_tab.choose_abi') }}
             </p>
         </div>
-    </div>
-
-    <div class="row q-pb-lg">
-        <div class="col-12">
-            <q-btn-group push>
-                <q-btn
-                    push
-                    no-caps
-                    :outline="selectedAbi === abiOptions.erc20"
-                    @click="selectedAbi = abiOptions.erc20"
-                >
-                    {{ $t('components.contract_tab.use_erc20_abi') }}
-                </q-btn>
-                <q-btn
-                    push
-                    no-caps
-                    :outline="selectedAbi === abiOptions.erc721"
-                    @click="selectedAbi = abiOptions.erc721"
-                >
-                    {{ $t('components.contract_tab.use_erc721_abi') }}
-                </q-btn>
-                <q-btn
-                    push
-                    no-caps
-                    :outline="selectedAbi === abiOptions.erc1155"
-                    @click="selectedAbi = abiOptions.erc1155"
-                >
-                    {{ $t('components.contract_tab.use_erc1155_abi') }}
-                </q-btn>
-                <q-btn
-                    push
-                    no-caps
-                    :outline="selectedAbi === abiOptions.custom"
-                    @click="selectedAbi = abiOptions.custom"
-                >
-                    {{ $t('components.contract_tab.abi_from_json') }}
-                </q-btn>
-            </q-btn-group>
-        </div>
-    </div>
 
-    <div v-if="selectedAbi === abiOptions.custom" class="row q-mb-lg">
-        <div class="col-12">
-            <div class="row">
-                <div class="col-12 col-sm-8 col-lg-9">
-                    <q-input
-                        v-model="customAbiDefinition"
-                        clearable
-                        name="custom-abi"
-                        label="Paste ABI JSON here"
-                        class="q-pb-lg"
-                        autocomplete="off"
-                        type="text"
+        <div class="row q-pb-lg">
+            <div class="col-12">
+                <div class="c-gcontract-interface__tab-container">
+                    <q-btn
+                        :label="$t('components.contract_tab.use_erc20_abi')"
+                        :class="{
+                            'c-gcontract-interface__tab': true,
+                            'c-gcontract-interface__tab--active': selectedAbi === abiOptions.erc20,
+                        }"
+                        @click="selectedAbi = abiOptions.erc20"
                     />
-                </div>
-                <div class="col-12 col-sm-4 col-lg-3">
-                    <q-file
-                        v-model="file_model"
-                        outlined
-                        name="custom-abi-file"
-                        label="upload ABI JSON file"
-                        class="abi-json-uploader q-ml-md text-center"
-                        accept=".json"
-                        @input="uploadFile"
+                    <q-btn
+                        :label="$t('components.contract_tab.use_erc721_abi')"
+                        :class="{
+                            'c-gcontract-interface__tab': true,
+                            'c-gcontract-interface__tab--active': selectedAbi === abiOptions.erc721,
+                        }"
+                        @click="selectedAbi = abiOptions.erc721"
+                    />
+                    <q-btn
+                        :label="$t('components.contract_tab.use_erc1155_abi')"
+                        :class="{
+                            'c-gcontract-interface__tab': true,
+                            'c-gcontract-interface__tab--active': selectedAbi === abiOptions.erc1155,
+                        }"
+                        @click="selectedAbi = abiOptions.erc1155"
+                    />
+                    <q-btn
+                        :label="$t('components.contract_tab.abi_from_json')"
+                        :class="{
+                            'c-gcontract-interface__tab': true,
+                            'c-gcontract-interface__tab--active': selectedAbi === abiOptions.custom,
+                        }"
+                        @click="selectedAbi = abiOptions.custom"
                     />
                 </div>
             </div>
         </div>
-        <div class="col-sm-12">
-            <template v-if="!!customAbiDefinition">
-                <template v-if="customAbiIsValidJSON">
-                    <p class="q-mb-sm">
-                        {{ $t('components.contract_tab.abi_json_preview') }}
-                    </p>
-                    <JsonViewer
-                        :value="JSON.parse(customAbiDefinition)"
-                        :expand-depth="1"
-                        expanded
-                        theme="custom-theme"
-                    />
+
+        <div v-if="selectedAbi === abiOptions.custom" class="row q-mb-lg">
+            <div class="col-12">
+                <div class="row">
+                    <div class="col-12 col-sm-8 col-lg-9">
+                        <q-input
+                            v-model="customAbiDefinition"
+                            clearable
+                            name="custom-abi"
+                            label="Paste ABI JSON here"
+                            class="q-pb-lg"
+                            autocomplete="off"
+                            type="text"
+                        />
+                    </div>
+                    <div class="col-12 col-sm-4 col-lg-3">
+                        <q-file
+                            v-model="fileModel"
+                            outlined
+                            name="custom-abi-file"
+                            label="upload ABI JSON file"
+                            class="abi-json-uploader q-ml-md text-center"
+                            accept=".json"
+                            @input="uploadFile"
+                        />
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-12">
+                <template v-if="!!customAbiDefinition">
+                    <template v-if="customAbiIsValidJSON">
+                        <p class="q-mb-sm">
+                            {{ $t('components.contract_tab.abi_json_preview') }}
+                        </p>
+                        <VueJsonPretty
+                            :data="JSON.parse(customAbiDefinition)"
+                            :depth="1"
+                            expanded
+                        />
+                        <p
+                            v-if="!showAbiFunctions"
+                            class="text-negative"
+                        >
+                            {{ $t('components.contract_tab.provided_abi_invalid') }}
+                        </p>
+                    </template>
                     <p
-                        v-if="!showAbiFunctions"
+                        v-else
                         class="text-negative"
                     >
-                        {{ $t('components.contract_tab.provided_abi_invalid') }}
+                        {{ $t('components.contract_tab.provided_json_invalid') }}
                     </p>
                 </template>
-                <p
-                    v-else
-                    class="text-negative"
-                >
-                    {{ $t('components.contract_tab.provided_json_invalid') }}
-                </p>
-            </template>
+            </div>
         </div>
-    </div>
 
-    <div v-if="showAbiFunctions" class="row">
-        <div class="col-12">
-            <q-btn-group class="q-mb-lg">
-                <q-btn
-                    no-caps
-                    :outline="displayWriteFunctions === false"
-                    @click="displayWriteFunctions = false"
-                >
-                    {{ $t('components.contract_tab.read_functions') }}
-                </q-btn>
-                <q-btn
-                    no-caps
-                    :outline="displayWriteFunctions === true"
-                    @click="displayWriteFunctions = true"
-                >
-                    {{ $t('components.contract_tab.write_functions') }}
-                </q-btn>
-            </q-btn-group>
-
-            <q-list>
-                <q-expansion-item
-                    v-for="func in (displayWriteFunctions ? functions.write : functions.read)"
-                    :key="func.name"
-                    :label="func.name"
-                    class="shadow-2 q-mb-md"
-                >
-                    <q-card>
-                        <div class="q-pa-md">
-                            <FunctionInterface
-                                :abi="func"
-                                :contract="contract"
-                                :write="true"
-                                :group="displayWriteFunctions ? 'write' : 'read'"
-                                :run-label="displayWriteFunctions ? 'Write' : 'Query'"
-                            />
-                        </div>
-                    </q-card>
-                </q-expansion-item>
-            </q-list>
+        <div v-if="showAbiFunctions" class="row">
+            <div class="col-12">
+                <div class="c-gcontract-interface__tab-container">
+                    <q-btn
+                        :label="$t('components.contract_tab.read')"
+                        :class="{
+                            'c-gcontract-interface__tab': true,
+                            'c-gcontract-interface__tab--active': !displayWriteFunctions,
+                        }"
+                        @click="displayWriteFunctions = false"
+                    />
+                    <q-btn
+                        :label="$t('components.contract_tab.write')"
+                        :class="{
+                            'c-gcontract-interface__tab': true,
+                            'c-gcontract-interface__tab--active': displayWriteFunctions,
+                        }"
+                        @click="displayWriteFunctions = true"
+                    />
+                </div>
+                <AppHeaderWallet v-if="displayWriteFunctions" class="c-login-button"/>
+                <q-list>
+                    <q-expansion-item
+                        v-for="func in (displayWriteFunctions ? functions.write : functions.read)"
+                        :key="(func as any).name"
+                        :label="(func as any).name"
+                        class="shadow-2 q-mb-md"
+                    >
+                        <q-card>
+                            <div class="q-pa-md">
+                                <FunctionInterface
+                                    :abi="func"
+                                    :contract="selectedContract"
+                                    :write="true"
+                                    :group="displayWriteFunctions ? 'write' : 'read'"
+                                    :run-label="displayWriteFunctions ? 'Write' : 'Query'"
+                                />
+                            </div>
+                        </q-card>
+                    </q-expansion-item>
+                </q-list>
+            </div>
         </div>
     </div>
-</div>
+</q-card>
 </template>
-<style>
+<style lang="scss">
+.c-gcontract-interface {
+    &__container {
+        padding: 1rem;
+    }
+
+    &__header {
+        display: flex;
+        flex-direction: column;
+        &-paragraph {
+            display: flex;
+            gap: 5px;
+            align-items: flex-end;
+        }
+    }
+
+    &__tab-container{
+        display: inline-flex;
+        gap: .5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    &__tab{
+        cursor: pointer;
+        border-radius: 5px;
+        color: var(--text-color);
+        text-transform: capitalize !important;
+        background-color: var(--tab-bg-color);
+
+        &:hover{
+            color: var(--text-color);
+        }
+
+        &--active {
+            color: var(--active-tab-text-color);
+            background-color: var(--active-tab-bg-color);
+        }
+    }
+}
 .abi-json-uploader .q-field__label {
     text-align: center;
     width: 100%;
 }
+.c-login-button {
+    margin-bottom: 0.5rem;
+}
 </style>
diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
index e5d6e56d3..7eaaf5f08 100644
--- a/src/components/CopyButton.vue
+++ b/src/components/CopyButton.vue
@@ -1,64 +1,62 @@
-<script>
-import { copyToClipboard } from 'quasar';
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { copyToClipboard, useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+const $q = useQuasar();
+const { t: $t } = useI18n();
+
+const props = defineProps({
+    text: {
+        type: String,
+        required: true,
+    },
+    description: {
+        type: String,
+        default: '',
+    },
+    accompanyingText: {
+        type: String,
+        default: '',
+    },
+});
 
 const icons = {
     copy: 'far fa-copy',
     success: 'fas fa-check',
 };
 
-export default {
-    name: 'CopyButton',
-    props: {
-        text: {
-            type: String,
-            required: true,
-        },
-        description: {
-            type: String,
-            default: '',
-        },
-        accompanyingText: {
-            type: String,
-            default: '',
-        },
-    },
-    data: () => ({
-        iconClass: icons.copy,
-        hint: '',
-    }),
-    computed: {
-        containerClasses() {
-            const extraClass = this.accompanyingText ? 'c-copy-button--block' : '';
-            return `c-copy-button ${extraClass}`;
-        },
-        iconClasses() {
-            return `${this.iconClass} q-pl-xs`;
-        },
-        defaultHint() {
-            return this.$t('components.copy_to_clipboard', { text: this.description });
-        },
-    },
-    created() {
-        this.hint = this.defaultHint;
-    },
-    methods: {
-        handleClick() {
-            copyToClipboard(this.text).then(() => {
-                this.iconClass = icons.success;
-                this.hint = this.$t('components.copied');
-                setTimeout(() => {
-                    this.iconClass = icons.copy;
-                    this.hint = this.defaultHint;
-                }, 1500);
-            }).catch((err) => {
-                console.error(`Failed to copy to clipboard: ${err}`);
-                this.$q.notify({
-                    type: 'negative',
-                    message: this.$t('components.copy_to_clipboard_failed'),
-                });
-            });
-        },
-    },
+const iconClass = ref(icons.copy);
+const hint = ref('');
+
+const defaultHint = computed(() => $t('components.copy_to_clipboard', { text: props.description }));
+
+const containerClasses = computed(() => {
+    const extraClass = props.accompanyingText ? 'c-copy-button--block' : '';
+    return `c-copy-button ${extraClass}`;
+});
+
+const iconClasses = computed(() => iconClass.value);
+
+onMounted(() => {
+    hint.value = defaultHint.value;
+});
+
+const handleClick = () => {
+    copyToClipboard(props.text).then(() => {
+        iconClass.value = icons.success;
+        hint.value = $t('components.copied');
+        setTimeout(() => {
+            iconClass.value = icons.copy;
+            hint.value = defaultHint.value;
+        }, 1500);
+    }).catch((err) => {
+        console.error(`Failed to copy to clipboard: ${err}`);
+        $q.notify({
+            type: 'negative',
+            message: $t('components.copy_to_clipboard_failed'),
+        });
+    });
 };
 </script>
 
@@ -66,16 +64,12 @@ export default {
 <div
     :class="containerClasses"
     :aria-label="hint"
-    aria-role="button"
+    role="button"
     tabindex="0"
     @click.stop="handleClick"
     @keydown.space.enter="handleClick"
 >
-    <q-tooltip
-        :offset="[0,0]"
-        anchor="center end"
-        self="center left"
-    >
+    <q-tooltip :offset="[0, 0]" anchor="center end" self="center left">
         {{ hint }}
     </q-tooltip>
 
@@ -87,6 +81,7 @@ export default {
 
 <style lang="scss">
 .c-copy-button {
+    gap: 5px;
     display: inline-flex;
     justify-content: center;
     margin-top: -2px;
diff --git a/src/components/CustomTooltip.vue b/src/components/CustomTooltip.vue
new file mode 100644
index 000000000..cd896feb9
--- /dev/null
+++ b/src/components/CustomTooltip.vue
@@ -0,0 +1,48 @@
+<script>
+export default {
+    name: 'CustomTooltip',
+    props: {
+        content: {
+            type: [Object, String],
+            required: true,
+        },
+        anchor: {
+            type: String,
+            default: 'bottom middle',
+        },
+        self: {
+            type: String,
+            default: 'top middle',
+        },
+        offset: {
+            type: Array,
+            default: () => [14, 14],
+        },
+        long: {
+            type: Boolean,
+            default: false,
+        },
+    },
+};
+</script>
+
+<template>
+<q-tooltip
+    :self="self"
+    :offset="offset"
+    :anchor="anchor"
+    :class="(long) ? 'tooltip-long' : 'tooltip'"
+>
+    <span class="tooltip-content">{{ content }}</span>
+</q-tooltip>
+</template>
+
+<style lang="sass">
+    .tooltip-long
+        word-break: break-all
+        max-height: 100% !important
+        .tooltip-content
+            font-size: 0.7em
+            white-space: pre-wrap
+            word-break: break-all
+</style>
diff --git a/src/components/DateField.vue b/src/components/DateField.vue
index 555c8103a..19f05ab0a 100644
--- a/src/components/DateField.vue
+++ b/src/components/DateField.vue
@@ -1,53 +1,59 @@
-<script>
-import { getFormattedUtcOffset } from 'src/lib/utils';
-
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import moment from 'moment';
 
-export default {
-    name: 'DateField',
-    props: {
-        epoch: {
-            type: Number,
-            required: true,
-        },
-        // if true, the component will display plain-english e.g. "3 minutes ago" on initial load; if false, it will
-        // display long format e.g. "Jan 6, 2023 11:41:40 (UTC -05:00)"
-        defaultToAge: {
-            type: Boolean,
-            default: true,
-        },
-        // a value of true or false will force the component to display plain-english age or date stamp respectively;
-        // the default value of null will allow the component to toggle itself via user clicks.
-        // having a value defined for this prop will disable user click interaction
-        forceShowAge: {
-            type: Boolean,
-            default: null,
-        },
-    },
-    data: () => ({
-        showAge: false,
-    }),
-    computed: {
-        friendlyDate ()  {
-            const showAge = this.forceShowAge === true || (this.forceShowAge === null && this.showAge);
+import { getFormattedUtcOffset } from 'src/lib/utils';
+import { formatTimePeriod } from 'src/lib/date-utils';
 
-            if (showAge) {
-                return moment.unix(this.epoch).fromNow();
-            }
+const { t: $t } = useI18n();
 
-            const offset = getFormattedUtcOffset(new Date(this.epoch));
-            return `${moment.unix(this.epoch).format('MMM D, YYYY HH:mm:ss')} (UTC ${offset})`;
-        },
+const props = defineProps({
+    epoch: {
+        type: Number,
+        required: true,
     },
-    created() {
-        this.showAge = this.defaultToAge;
+    defaultToAge: {
+        type: Boolean,
+        default: true,
     },
-    methods: {
-        toggleDisplay() {
-            this.showAge = !this.showAge;
-        },
+    forceShowAge: {
+        type: Boolean,
+        default: null,
     },
-};
+    utc: {
+        type: Boolean,
+        default: true,
+    },
+    mutedText: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const showAge = ref(props.defaultToAge);
+
+const friendlyDate = computed(() => {
+    const showAgeValue = props.forceShowAge === true || (props.forceShowAge === null && showAge.value);
+    if (showAgeValue) {
+        const difference = Date.now() - props.epoch * 1000;
+        return $t('antelope.words.time_ago', { time: formatTimePeriod(difference / 1000, $t) });
+    }
+    const timestamp = moment.unix(props.epoch);
+    if (props.utc) {
+        return moment.utc(timestamp).format('YYYY-MM-DD HH:mm:ss');
+    } else {
+        const offset = getFormattedUtcOffset(new Date(props.epoch * 1000));
+        const offsetString = ` (UTC ${offset})`;
+        return `${timestamp.format('YYYY-MM-DD HH:mm:ss')} ${offsetString}`;
+    }
+});
+
+function toggleDisplay() {
+    if (props.forceShowAge === null) {
+        showAge.value = !showAge.value;
+    }
+}
 </script>
 
 <template>
@@ -55,6 +61,7 @@ export default {
     :class="{
         'c-date-field': true,
         'c-date-field--clickable': forceShowAge === null,
+        'c-date-field--muted': mutedText,
     }"
     @click="toggleDisplay"
 >
@@ -77,5 +84,10 @@ export default {
     &--clickable {
         cursor: pointer;
     }
+
+    &--muted {
+        color: var(--grey-text-color);
+        font-size: 0.8rem;
+    }
 }
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
deleted file mode 100644
index c57bb83a5..000000000
--- a/src/components/Footer.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-export default {
-    name: 'AppFooter',
-    data: () => ({
-        year: (new Date()).getFullYear(),
-    }),
-};
-</script>
-
-<template>
-<div class="c-footer row">
-    <div class="col-12">
-        <router-link to="/">
-            Teloscan
-        </router-link>
-        &copy;&nbsp;{{ year }}
-    </div>
-</div>
-</template>
-
-<style lang="scss">
-body.body--light .c-footer {
-    color: $white
-}
-.c-footer {
-    margin: 8px auto 24px;
-    padding: 0 16px;
-    max-width: 1200px;
-}
-</style>
diff --git a/src/components/FooterMain.vue b/src/components/FooterMain.vue
new file mode 100644
index 000000000..216773516
--- /dev/null
+++ b/src/components/FooterMain.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import SocialLinks from 'components/SocialLinks';
+import { useI18n } from 'vue-i18n';
+const { t: $t } = useI18n();
+
+const toTop = () => {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+    });
+};
+
+
+</script>
+
+<template>
+<div class="c-footer">
+    <div class="c-footer__background c-footer__background--colors"></div>
+    <div class="c-footer__background c-footer__background--alpha"></div>
+    <div class="c-footer__outer-container">
+        <div class="c-footer__inner-container">
+            <div class="c-footer__header">
+                <SocialLinks />
+                <a class="c-footer__back-to-top" @click="toTop">
+                    <q-icon name="fas fa-arrow-up" size="12px" /> {{$t('components.footer.back_to_top')}}
+                </a>
+                <a class="c-footer__brand">
+                    <img :src="require('src/assets/telos-new-logo.png')" alt="Telos Logo" class="c-footer__brand-logo c-footer__brand-logo--light">
+                    <img :src="require('src/assets/telos-new-logo--dark.png')" alt="Telos Logo" class="c-footer__brand-logo c-footer__brand-logo--dark">
+                </a>
+            </div>
+            <div class="c-footer__columns">
+                <div class="c-footer__column c-footer__column--a">
+                    <div class="c-footer__column-title">{{$t('components.footer.telos')}}</div>
+                    <div class="c-footer__column-items">
+                        <a class="c-footer__column-item" href="https://www.telos.net/">{{$t('components.footer.telos_homepage')}}</a>
+                        <a class="c-footer__column-item" href="https://wallet.telos.net/">{{$t('components.footer.telos_wallet')}}</a>
+                        <a class="c-footer__column-item" href="https://bridge.telos.net/bridge">{{$t('components.footer.telos_bridge')}}</a>
+                        <a class="c-footer__column-item" href="https://explorer.telos.net/network">{{$t('components.footer.telos_zero_explorer')}}</a>
+                        <a class="c-footer__column-item" href="https://www.telos.net/buy">{{$t('components.footer.buy_telos')}}</a>
+                        <a class="c-footer__column-item" href="https://docs.telos.net/users/knowledge-base/how-to-stake-tlos/">{{$t('components.footer.stake_telos')}}</a>
+                        <a class="c-footer__column-item" href="https://www.telos.net/ecosystem">{{$t('components.footer.telos_ecosystem')}}</a>
+                        <a class="c-footer__column-item" href="https://www.teloscan.io/health">{{$t('components.footer.network_status')}}</a>
+                    </div>
+                </div>
+                <div class="c-footer__column c-footer__column--b">
+                    <div class="c-footer__column-title">{{$t('components.footer.about')}}</div>
+                    <div class="c-footer__column-items">
+                        <a class="c-footer__column-item" href="https://www.telos.net/about">{{$t('components.footer.about_us')}}</a>
+                        <a class="c-footer__column-item" href="http://t.me/HelloTelos">{{$t('components.footer.contactUs')}}</a>
+                    </div>
+                </div>
+                <div class="c-footer__column c-footer__column--c">
+                    <div class="c-footer__column-title">{{$t('components.footer.build')}}</div>
+                    <div class="c-footer__column-items">
+                        <a class="c-footer__column-item" href="https://api.teloscan.io/v1/docs">{{$t('components.footer.api_documentation')}}</a>
+                        <a class="c-footer__column-item" href="https://docs.telos.net/overview/what-is-telos/introduction/">{{$t('components.footer.telos_documentation')}}</a>
+                        <a class="c-footer__column-item" href="https://github.com/telosnetwork">{{$t('components.footer.github')}}</a>
+                        <a class="c-footer__column-item" href="https://www.telos.net/community-resources">{{$t('components.footer.brand_assets')}}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<style lang="scss">
+.c-footer {
+    z-index: 2;
+    width: 100%;
+    color: var(--text-color);
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    &__background {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: -1;
+
+        &--colors {
+            background-image:
+                radial-gradient(circle at 0% 0%, var(--q-primary), transparent 29%);
+        }
+
+        &--alpha {
+            background-color: rgba(#ffffff, 0.5);
+
+            body.body--dark & {
+                background-color: rgba(#1d1d1d, 0.5);
+            }
+        }
+    }
+
+    &__header {
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        justify-content: space-between;
+        padding-bottom: 10px;
+        margin-bottom: 20px;
+        border-bottom: 2px solid var(--border-color);
+    }
+
+    &__back-to-top {
+        cursor: pointer;
+        color: var(--grey-text-color);
+        display: flex;
+        flex-flow: row;
+        gap: 7px;
+        align-items: center;
+        @media screen and (max-width: 500px) {
+            display: none;
+        }
+    }
+
+    &__brand {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        width: 200px;
+        margin-bottom: 12px;
+        &-logo {
+            width: 100%;
+            max-width: 6rem;
+            padding-left: 0;
+
+            body.body--dark &--light {
+                display: none;
+            }
+
+            body.body--light &--dark {
+                display: none;
+            }
+        }
+    }
+
+    &__outer-container {
+        flex: 1;
+        width: 100%;
+        max-width: 1200px;
+        flex-flow: row;
+        justify-content: center;
+        align-items: stretch;
+        display: flex;
+        @media screen and (max-width: 1240px) {
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+    }
+
+    &__inner-container {
+        display: flex;
+        flex-direction: column;
+        margin: 20px;
+        margin-right: auto !important;
+        margin-left: auto !important;
+        width: 100%;
+        max-width: 85rem;
+    }
+
+    &__columns {
+        width: 100%;
+        justify-content: space-between;
+        align-items: flex-start;
+        display: flex;
+
+        @media screen and (max-width: 500px) {
+            grid-column-gap: 2rem;
+            grid-template-rows: auto;
+            grid-auto-columns: 1fr;
+            grid-row-gap: 2.5rem;
+            grid-template:
+                'a b'
+                'a c';
+            display: grid;
+        }
+    }
+
+    &__column {
+        flex-direction: column;
+        align-items: flex-start;
+        justify-items: flex-start;
+        display: flex;
+
+        &--a {
+            grid-area: a;
+        }
+
+        &--b {
+            grid-area: b;
+        }
+
+        &--c {
+            grid-area: c;
+        }
+    }
+
+    &__column-title {
+        text-transform: uppercase;
+        margin-bottom: 0.5rem;
+        font-size: 1rem;
+        font-weight: bold;
+    }
+
+    &__column-items {
+        flex-direction: column;
+        grid-template-rows: auto;
+        grid-template-columns: 100%;
+        grid-auto-columns: 100%;
+        align-items: flex-start;
+        justify-items: flex-start;
+        display: flex;
+    }
+
+    &__column-item {
+        color: var(--grey-text-color);
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        font-size: .875rem;
+        text-decoration: none;
+        &:hover {
+            color: var(--q-primary) !important;
+        }
+    }
+}
+</style>
+
diff --git a/src/components/GasLimitAndUsage.vue b/src/components/GasLimitAndUsage.vue
new file mode 100644
index 000000000..7661d0e3b
--- /dev/null
+++ b/src/components/GasLimitAndUsage.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+import { BlockData } from 'src/types';
+import { EvmTransactionParsed } from 'src/antelope/types';
+import { useI18n } from 'vue-i18n';
+
+const $i18n = useI18n();
+const { t: $t } = $i18n;
+
+const props = defineProps({
+    trx: {
+        type: Object as () => EvmTransactionParsed,
+        required: true,
+    },
+    block: {
+        type: Object as () => BlockData,
+        required: true,
+    },
+});
+
+onMounted(async () => {
+    await setValues();
+});
+
+
+const limitText = ref('');
+const usageText = ref('');
+
+const limitTextTooltips = ref($t('components.gas_limit_tooltip'));
+const usageTextTooltips = ref($t('components.gas_used_tooltip'));
+
+
+const setValues = async () => {
+    const limit = props.trx.gasLimitBn;
+    const usage = props.trx.gasUsedBn;
+    const locale = useI18n().locale.value;
+
+    limitText.value = limit.toNumber().toLocaleString(locale);
+    usageText.value = usage.toNumber().toLocaleString(locale) + ` (${((usage.toNumber() / limit.toNumber()) * 100).toFixed(2)}%)`;
+};
+
+</script>
+
+<template>
+<div
+    :class="{
+        'c-gas-limit': true,
+    }"
+>
+    <span class="c-gas-limit__limit">
+        {{ limitText }}
+        <q-tooltip>
+            {{ limitTextTooltips }}
+        </q-tooltip>
+    </span>
+    <span> | </span>
+    <span class="c-gas-limit__limit">
+        {{ usageText }}
+        <q-tooltip>
+            {{ usageTextTooltips }}
+        </q-tooltip>
+    </span>
+</div>
+</template>
diff --git a/src/components/Health/Endpoints.vue b/src/components/Health/Endpoints.vue
index e7fe7d65c..841d931c0 100644
--- a/src/components/Health/Endpoints.vue
+++ b/src/components/Health/Endpoints.vue
@@ -10,7 +10,7 @@ export default {
     data() {
         return {
             endpoints: [],
-            blockHeight: 0,
+            blockNumber: 0,
         };
     },
     mounted() {
@@ -70,8 +70,8 @@ export default {
                 });
 
                 const block = parseInt(result.data.result, 16);
-                if (this.blockHeight < block) {
-                    this.blockHeight = block;
+                if (this.blockNumber < block) {
+                    this.blockNumber = block;
                 }
 
                 this.endpoints[idx].latency = result.timings.elapsedTime;
@@ -108,7 +108,7 @@ export default {
                 </q-item-label>
                 <q-item-label v-if="endpoint.block" side top>
                     {{ $t('components.health.block_height') }}:&nbsp;
-                    <span :class="getBlockClass(blockHeight, endpoint.block)">
+                    <span :class="getBlockClass(blockNumber, endpoint.block)">
                         {{ endpoint.block }}
                     </span>
                 </q-item-label>
@@ -126,20 +126,30 @@ export default {
 </div>
 </template>
 
-<style scoped lang='sass'>
-.q-list
-  border-radius: 6px
-  box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%)
-.tableWrapper
-  min-width: 50vw
-  max-width: 100vw
-  border-radius: 6px
-.text-primary
-  margin-left: .25rem
-@media only screen and (max-width: 600px)
-  .full-width
-    min-width: 100%
-    margin-top: .25rem
-  .no-wrap
-    flex-wrap: wrap
+<style scoped lang='scss'>
+.q-list {
+    border-radius: 6px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.20), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
+  }
+
+  .tableWrapper {
+    max-width: 100vw;
+    border-radius: 6px;
+  }
+
+  .text-primary {
+    margin-left: .25rem;
+  }
+
+  @media only screen and (max-width: 600px) {
+    .full-width {
+      min-width: 100%;
+      margin-top: .25rem;
+    }
+
+    .no-wrap {
+      flex-wrap: wrap;
+    }
+  }
+
 </style>
diff --git a/src/components/Health/Monitor.vue b/src/components/Health/Monitor.vue
index 1f80fa554..af1097e89 100644
--- a/src/components/Health/Monitor.vue
+++ b/src/components/Health/Monitor.vue
@@ -5,12 +5,14 @@ const API_URL = (process.env.NETWORK_EVM_CHAIN_ID === 40) ?
     'https://api.monitor-test.telos.net';
 const API_ENDPOINT_TASKS = API_URL + '/tasks';
 const API_ENDPOINT_STATUSES = API_URL + '/task_status';
+const API_ENDPOINT_CATEGORIES = API_URL + '/task_categories';
 
 export default {
     name: 'MonitorComponent',
     async mounted() {
         await this.getTasks();
-        this.onRequest({
+        await this.getCategories();
+        await this.onRequest({
             pagination: this.pagination,
         });
     },
@@ -26,6 +28,11 @@ export default {
                 label: '',
                 align: 'left',
             },
+            {
+                name: 'category',
+                label: '',
+                align: 'left',
+            },
             {
                 name: 'task',
                 label: '',
@@ -40,7 +47,9 @@ export default {
 
         return {
             rows: [],
+            loadingRows: [],
             tasks: [],
+            categories: [],
             columns,
             pagination: {
                 sortBy: 'checked_at',
@@ -56,16 +65,28 @@ export default {
         // initialization of the translated texts
         this.columns[0].label = this.$t('components.health.status');
         this.columns[1].label = this.$t('components.health.checked_at');
-        this.columns[2].label = this.$t('components.health.task');
-        this.columns[3].label = this.$t('components.health.message');
+        this.columns[2].label = this.$t('components.health.category');
+        this.columns[3].label = this.$t('components.health.task');
+        this.columns[4].label = this.$t('components.health.message');
+        for (var i = 1; i <= this.pagination.rowsPerPage; i++) {
+            this.loadingRows.push(i);
+        }
     },
     methods: {
+        async getCategories(){
+            try {
+                const results = await axios.get(API_ENDPOINT_CATEGORIES);
+                this.categories = results.data;
+            } catch (e) {
+                console.error(`Could not retrieve task categories: ${e}`);
+            }
+        },
         async getTasks(){
             try {
                 const results = await axios.get(API_ENDPOINT_TASKS);
                 this.tasks = results.data;
             } catch (e) {
-                console.error(e);
+                console.error(`Could not retrieve tasks: ${e}`);
             }
         },
         async onRequest(props) {
@@ -73,7 +94,7 @@ export default {
             this.loading = true;
             try {
                 let url = API_ENDPOINT_STATUSES;
-                url += '?order=id.desc&select=task(name),message,checked_at,id&limit=';
+                url += '?order=id.desc&select=task(name,category),message,checked_at,type,id&limit=';
                 url += rowsPerPage + '&offset=' + rowsPerPage * (page - 1);
                 const results = await axios.get(url);
 
@@ -94,6 +115,31 @@ export default {
                 console.error(e);
             }
         },
+        getType(id){
+            let type = '';
+            switch (id) {
+            case(1):
+                type = this.$t('components.health.success');
+                break;
+            case(2):
+                type = this.$t('components.health.info');
+                break;
+            case(3):
+                type = this.$t('components.health.alert');
+                break;
+            case(4):
+                type = this.$t('components.health.error');
+                break;
+            }
+            return type;
+        },
+        getCategory(id){
+            for(let i in this.categories){
+                if(this.categories[i].id === id){
+                    return this.categories[i].name;
+                }
+            }
+        },
     },
 };
 </script>
@@ -101,13 +147,12 @@ export default {
 <template>
 <div class="q-mb-md tableWrapper">
     <q-table
+        v-if="!loading"
         v-model:pagination="pagination"
         :rows="rows"
         :row-key="row => row.id"
         :columns="columns"
-        :loading="loading"
         :rows-per-page-options="[10, 20, 50]"
-        flat
         @request="onRequest"
     >
         <q-tr :props="props">
@@ -126,18 +171,89 @@ export default {
         <template v-slot:body="props">
             <q-tr :props="props">
                 <q-td key="status" :props="props">
-                    <q-icon v-if="props.row.message !== ''" name="warning" color="negative"/>
+                    <q-icon
+                        v-if="props.row.type === 4"
+                        name="warning"
+                        color="negative"
+                        size="1.15em"
+                    />
+                    <q-icon
+                        v-else-if="props.row.type === 3"
+                        name="warning"
+                        color="orange"
+                        size="1.15em"
+                    />
+                    <q-icon
+                        v-else-if="props.row.type === 2"
+                        name="info"
+                        color="primary"
+                        size="1.15em"
+                    />
+                    <q-icon
+                        v-else
+                        name="task_alt"
+                        color="positive"
+                        size="1.15em"
+                    />
+                    <q-tooltip>{{ getType(props.row.type) }} </q-tooltip>
                 </q-td>
                 <q-td key="checked_at" :props="props">{{ props.row.checked_at }}</q-td>
+                <q-td key="category" :props="props" class="text-capitalize">
+                    {{ getCategory(props.row.task.category) }}
+                </q-td>
                 <q-td key="task" :props="props">{{ props.row.task.name }}</q-td>
-                <q-td key="message" :props="props">{{ props.row.message }}</q-td>
+                <q-td key="message" :props="props" :class="(props.row.type === 4) ? 'text-negative' : ''">
+                    {{ props.row.message }}
+                </q-td>
+            </q-tr>
+        </template>
+    </q-table>
+    <q-table
+        v-else
+        v-model:pagination="pagination"
+        :rows="loadingRows"
+        :row-key="row => row.id"
+        :columns="columns"
+        :rows-per-page-options="[10, 20, 50]"
+    >
+        <q-tr :props="props">
+            <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                @click="col.name==='checked_at' ? showAge =! showAge : null"
+            />
+            <q-tooltip v-if="col.name === 'checked_at'" anchor="bottom middle" self="bottom middle">
+                {{ $t('components.health.click_to_change_format') }}
+            </q-tooltip>
+            {{ col.label }}
+        </q-tr>
+        <template v-slot:body="">
+            <q-tr>
+                <q-td key="status">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="checked_at">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="category">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="task">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="message">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
             </q-tr>
         </template>
     </q-table>
 </div>
 </template>
 
-<style scoped lang='sass'>
-.tableWrapper
-    width: 50vw
+<style scoped lang='scss'>
+.tableWrapper{
+    width: 100%;
+    margin: auto;
+}
 </style>
diff --git a/src/components/HomeInfo.vue b/src/components/HomeInfo.vue
deleted file mode 100644
index c2975dc4c..000000000
--- a/src/components/HomeInfo.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script>
-import { mapGetters, mapActions } from 'vuex';
-import { ethers } from 'ethers';
-import exchangeImage from 'assets/exchange.png';
-import gasImage from 'assets/gas.png';
-import blockImage from 'assets/block.png';
-
-export default {
-    name: 'HomeInfo',
-    data: () => ({
-        polling: false,
-        gasImage: gasImage,
-        exchangeImage: exchangeImage,
-        blockImage: blockImage,
-    }),
-    computed: {
-        ...mapGetters('evm', ['tlosPrice', 'gasPrice', 'latestBlock']),
-        gasPriceGwei() {
-            let gweiStr = ethers.utils.formatUnits(this.gasPrice, 'gwei');
-            gweiStr = (+gweiStr).toFixed(0);
-            return gweiStr;
-        },
-    },
-    async created() {
-        this.fetchTlosPrice();
-        this.fetchGasPrice();
-        this.fetchLatestBlock();
-        this.polling = setInterval(async () => {
-            this.fetchTlosPrice();
-            this.fetchGasPrice();
-            this.fetchLatestBlock();
-        }, 3000);
-    },
-    methods: {
-        ...mapActions('evm', ['fetchTlosPrice', 'fetchGasPrice', 'fetchLatestBlock']),
-    },
-};
-</script>
-
-<template>
-<div class="row homeInfo">
-    <div class="col q-pa-md">
-        <div class="row items-center">
-            <div class="col-2"></div>
-            <div class="col-2"><img :src="exchangeImage" width="40"></div>
-            <div class="col-8 q-pl-sm">
-                <div class="col-12">
-                    <div class="column text-subtitle2">{{ $t('components.tlos_price') }}</div>
-                </div>
-                <div class="col-12">
-                    <div class="column text-h6 text-weight-bold">$ {{ tlosPrice }}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col q-pa-md">
-        <div class="row items-center">
-            <div class="col-2"></div>
-            <div class="col-2"><img :src="gasImage" width="40"></div>
-            <div class="col-8 q-pl-sm">
-                <div class="col-12">
-                    <div class="column text-subtitle2">{{ $t('components.gas_price') }}</div>
-                </div>
-                <div class="col-12">
-                    <div class="column text-h6 text-weight-bold">{{ gasPriceGwei }} {{ $t('components.gwei') }}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col q-pa-md">
-        <div class="row items-center">
-            <div class="col-2"></div>
-            <div class="col-2"><img :src="blockImage" width="40"></div>
-            <div class="col-8 q-pl-sm">
-                <div class="col-12">
-                    <div class="column text-subtitle2">{{ $t('components.latest_block') }}</div>
-                </div>
-                <div class="col-12">
-                    <div class="column text-h6 text-weight-bold">{{ latestBlock }}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-</template>
-
-<style scoped lang="sass">
-.homeInfo
-    user-select: none
-@media screen and (max-width: 768px)
-    .homeInfo
-        .col-8
-            width: 100% !important
-            text-align: center
-            padding: 0
-        .col-2
-            width: 100% !important
-            text-align: center
-            padding: 0 0 5px 0
-            img
-                width: auto
-                height: 30px
-</style>
diff --git a/src/components/InternalTransactionTable.vue b/src/components/InternalTransactionTable.vue
index cf227e1f6..d04f45dbb 100644
--- a/src/components/InternalTransactionTable.vue
+++ b/src/components/InternalTransactionTable.vue
@@ -3,9 +3,9 @@ import BlockField from 'components/BlockField';
 import DateField from 'components/DateField';
 import TransactionField from 'components/TransactionField';
 import MethodField from 'components/MethodField';
+import InternalTxns from 'components/Transaction/InternalTxns';
 import { formatWei } from 'src/lib/utils';
 import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
-import InternalTxns from 'components/Transaction/InternalTxns';
 
 export default {
     name: 'InternalTransactionTable',
@@ -67,6 +67,7 @@ export default {
 
         return {
             rows: [],
+            loadingRows: [],
             columns,
             transactions: [],
             pageSize: this.initialPageSize,
@@ -87,9 +88,10 @@ export default {
         // initialization of the translated texts
         this.columns[0].label = this.$t('components.tx_hash');
         this.columns[1].label = this.$t('components.block');
-        this.columns[2].label = this.$t('components.date');
+        this.columns[2].label = this.$t('components.age');
         this.columns[3].label = this.$t('components.method');
         this.columns[4].label = this.$t('components.internal_txns');
+        this.updateLoadingRows();
     },
     watch: {
         '$route.query.page': {
@@ -114,6 +116,13 @@ export default {
         },
     },
     methods: {
+        updateLoadingRows() {
+            console.log('updateLoadingRows()', this.pagination.rowsPerPage);
+            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;
@@ -126,6 +135,7 @@ export default {
             if (size) {
                 this.pagination.rowsPerPage = Number(size);
             }
+            this.updateLoadingRows();
             this.onRequest({
                 pagination: this.pagination,
             });
@@ -146,63 +156,61 @@ export default {
         },
         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;
-            let result = await this.$evmEndpoint.get(this.getPath(props));
-
+            let result = await this.$indexerApi.get(this.getPath(props));
             if (this.total === null) {
-                this.pagination.rowsNumber = result.data.total.value;
+                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.transactions];
-            this.rows = this.transactions;
-
+            this.transactions = [...result.data.results];
             for (const transaction of this.transactions) {
                 try {
                     transaction.transfer = false;
                     transaction.value = formatWei(transaction.value.toLocaleString(0, { useGrouping: false }), 18);
-                    if (transaction.input_data === '0x') {
+                    if (transaction.input === '0x') {
                         continue;
                     }
                     if(!transaction.to) {
                         continue;
                     }
-
                     const contract = await this.$contractManager.getContract(
                         transaction.to,
                     );
-
                     if (!contract) {
                         continue;
                     }
-
-                    const parsedTransaction = await contract.parseTransaction(
-                        transaction.input_data,
+                    let traces = await this.$indexerApi.get(
+                        '/transaction/' + transaction.hash + '/internal?limit=1000&sort=ASC&offset=0&includeAbi=1',
                     );
-                    if (parsedTransaction) {
-                        transaction.parsedTransaction = parsedTransaction;
-                        transaction.contract = contract;
+                    for(const trace of [...traces.data.results]){
+                        trace.hash = trace.transaction_hash;
                     }
+                    transaction.traces = traces.data?.results;
+                    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_data.substring(0, 10);
+                    let signature = transaction.input.substring(0, 10);
                     if (
                         signature &&
                         TRANSFER_SIGNATURES.includes(signature) &&
                         transaction.parsedTransaction.args['amount']
                     ) {
-                        let token = await this.$contractManager.getTokenData(transaction.to, 'erc20');
-                        if(transaction.contract && token && token.decimals){
+                        let decimals = transaction.contract.properties?.decimals;
+                        if(transaction.contract && decimals){
                             transaction.transfer = {
-                                'value': `${formatWei(transaction.parsedTransaction.args['amount'], token.decimals)}`,
-                                'symbol': token.symbol,
+                                'value': `${formatWei(transaction.parsedTransaction.args['amount'], decimals)}`,
+                                'symbol': transaction.contract.properties.symbol,
                             };
                         }
                     }
@@ -224,13 +232,16 @@ export default {
         },
         getPath(props) {
             const { page, rowsPerPage, descending } = props.pagination;
-            let path = `/v2/evm/get_transactions?limit=${
-                rowsPerPage === 0 ? 500 : rowsPerPage
-            }`;
+            let path;
             const filter = Object.assign({}, this.filter ? this.filter : {});
             if (filter.address) {
-                path += `&address=${filter.address}`;
+                path = `/address/${filter.address}/transactions`;
+            } else {
+                path = '/transactions';
             }
+            path += `?limit=${
+                rowsPerPage === 0 ? 500 : rowsPerPage
+            }`;
 
             if (filter.block) {
                 path += `&block=${filter.block}`;
@@ -240,8 +251,11 @@ export default {
                 path += `&hash=${filter.hash}`;
             }
 
-            path += `&skip=${(page - 1) * rowsPerPage}`;
+            path += `&offset=${(page - 1) * rowsPerPage}`;
             path += `&sort=${descending ? 'desc' : 'asc'}`;
+            path += '&includeAbi=1&full=1';
+
+            path += (this.total === null) ? '&includePagination=true' : '';  // We only need the count once
 
             return path;
         },
@@ -254,37 +268,42 @@ export default {
 
 <template>
 <q-table
+    v-if="!loading"
     v-model:pagination="pagination"
     :rows="rows"
     :row-key="row => row.hash"
     :columns="columns"
-    :loading="loading"
     :rows-per-page-options="page_size_options"
-    flat
     @request="onPaginationChange"
 >
     <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', { 'u-flex--right': col.align === 'right' } ]" >
-                    {{ col.label }}
-                    <template v-if="col.name === 'date'">
+                    <div
+                        v-if="col.name === 'date'"
+                        @click="toggleDateFormat"
+                    >
+                        <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
                         <q-icon
                             class="info-icon"
-                            name="fas fa-info-circle"
-                            @click="toggleDateFormat"
+                            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>
-                    </template>
-                    <template v-if="col.name === 'method'">
-                        <q-icon class="info-icon" name="fas fa-info-circle" />
+                    </div>
+                    <div v-else-if="col.name === 'method'">
+                        {{ col.label }}
+                        <q-icon class="info-icon" name="far fa-question-circle" />
                         <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
                             {{ $t('components.executed_based_on_decoded_data') }}
                         </q-tooltip>
-                    </template>
+                    </div>
+                    <div v-else>
+                        {{ col.label }}
+                    </div>
                 </div>
             </q-th>
             <q-td auto-width/>
@@ -296,39 +315,111 @@ export default {
                 <TransactionField :transaction-hash="props.row.hash"/>
             </q-td>
             <q-td key="block" :props="props">
-                <BlockField :block="props.row.block"/>
+                <BlockField :block="props.row.blockNumber"/>
             </q-td>
             <q-td key="date" :props="props">
-                <DateField :epoch="props.row.epoch" :force-show-age="showDateAge"/>
+                <DateField :epoch="(props.row.timestamp / 1000)" :force-show-age="showDateAge"/>
             </q-td>
             <q-td key="method" :props="props">
                 <MethodField v-if="props.row.parsedTransaction" :trx="props.row" :shortenName="true"/>
             </q-td>
             <q-td key="int_txns" :props="props">
-                <span v-if="props.row.itxs.length > 0">
-                    <b> {{ $t('components.n_internal_txns', {amount: props.row.itxs.length} ) }} </b>
+                <span v-if="props.row.traces?.length > 0">
+                    <b> {{ $t('components.n_internal_txns', {amount: props.row.traces.length} ) }} </b>
                 </span>
                 <span v-else>{{ $t('components.none') }}</span>
             </q-td>
             <q-td auto-width>
                 <q-icon
-                    v-if="props.row.itxs.length > 0"
+                    v-if="props.row.traces?.length > 0"
                     :name="props.expand ? 'expand_more' : 'expand_less'"
                     size="sm"
+                    class="clickable"
+                    clickable
                     @click="props.expand = !props.expand"
                 />
             </q-td>
         </q-tr>
         <q-tr
-            v-show="!props.expand"
-            v-if="props.row.itxs.length > 0"
+            v-show="props.expand"
+            v-if="props.row.traces?.length > 0"
             :props="props"
             class="q-virtual-scroll--with-prev"
         >
             <q-td colspan="100%">
-                <InternalTxns :itxs="props.row.itxs"/>
+                <InternalTxns :traces="props.row.traces" :transaction="props.row" />
+            </q-td>
+        </q-tr>
+    </template>
+</q-table>
+<q-table
+    v-else
+    v-model:pagination="pagination"
+    :rows="loadingRows"
+    :row-key="row => row.hash"
+    :columns="columns"
+    :rows-per-page-options="page_size_options"
+>
+    <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', { 'u-flex--right': col.align === 'right' } ]" >
+                    <div
+                        v-if="col.name === 'date'"
+                        @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>
+                    <div v-else-if="col.name === 'method'">
+                        {{ col.label }}
+                        <q-icon class="info-icon" name="far fa-question-circle" />
+                        <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
+                            {{ $t('components.executed_based_on_decoded_data') }}
+                        </q-tooltip>
+                    </div>
+                    <div v-else>
+                        {{ col.label }}
+                    </div>
+                </div>
+            </q-th>
+            <q-td auto-width/>
+        </q-tr>
+    </template>
+    <template v-slot:body="">
+        <q-tr>
+            <q-td key="hash" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="block" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="date" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="method" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="int_txns" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td auto-width>
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
             </q-td>
         </q-tr>
     </template>
 </q-table>
 </template>
+<style lang="scss" scoped>
+.info-icon{
+    margin-left: .25rem;
+    padding-bottom: 0.2rem;
+}
+</style>
diff --git a/src/components/LoginModal.vue b/src/components/LoginModal.vue
index eec734ba3..cd5267946 100644
--- a/src/components/LoginModal.vue
+++ b/src/components/LoginModal.vue
@@ -1,314 +1,290 @@
-<!-- eslint-disable max-len -->
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable no-unused-vars -->
-<script lang="ts">
+<script lang="ts" setup>
+import { useQuasar } from 'quasar';
+import { computed, onMounted, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 import detectEthereumProvider from '@metamask/detect-provider';
-import { defineComponent } from 'vue';
-import { mapGetters, mapMutations } from 'vuex';
+import { Authenticator } from 'universal-authenticator-library';
+import { TelosEvmApi } from '@telosnetwork/telosevm-js';
+
 import {
     LOGIN_EVM,
     LOGIN_NATIVE,
-    PROVIDER_TELOS_CLOUD,
     PROVIDER_WALLET_CONNECT,
     PROVIDER_BRAVE,
     PROVIDER_METAMASK,
     LOGIN_DATA_KEY,
 } from 'src/lib/utils';
-import { AccountModel, CURRENT_CONTEXT, EvmAccountModel, getAntelope, useAccountStore, useChainStore } from 'src/antelope/mocks';
-import { Authenticator } from 'universal-authenticator-library';
-import InlineSvg from 'vue-inline-svg';
-import { isTodayBeforeTelosCloudDown } from 'src/App.vue';
-
-export default defineComponent({
-    name: 'LoginModal',
-    components: {
-        InlineSvg,
-    },
-    props: {
-        show: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data: () => ({
-        tab: 'web3',
-        showLogin: false,
-        isMobile: false,
-        browserSupportsMetaMask: true,
-        isBraveBrowser: false,
-        isIOSMobile: false,
-    }),
-    emits: ['hide'],
-    computed: {
-        ...mapGetters('login', [
-            'isLoggedIn',
-            'isNative',
-            'address',
-            'nativeAccount',
-        ]),
-        authenticators(): Authenticator[] {
-            return this.$ual.getAuthenticators().availableAuthenticators;
-        },
-        darkModeEnabled(): boolean {
-            return localStorage.getItem('darkModeEnabled') === 'true';
-        },
-        isTodayBeforeTelosCloudDown() {
-            return isTodayBeforeTelosCloudDown;
-        },
-    },
-    async mounted() {
-        await this.detectProvider();
-        this.detectMobile();
-
-        // On login we must set the address and record the provider
-        getAntelope().events.onLoggedIn.subscribe((account: AccountModel) => {
-            const evm_account = account as EvmAccountModel;
-            const address = evm_account.account;
-            const pr_name = evm_account.authenticator.getName();
-            this.setLogin({ address });
-
-            localStorage.setItem(LOGIN_DATA_KEY, JSON.stringify({
-                type: LOGIN_EVM,
-                provider: pr_name,
-                account: address,
-            }));
-        });
+import {
+    AccountModel,
+    CURRENT_CONTEXT,
+    EvmAccountModel,
+    getAntelope,
+    useAccountStore,
+    useChainStore,
+} from 'src/antelope/mocks';
+import { ual } from 'src/boot/ual';
+import { evm, providerManager } from 'src/boot/evm';
 
-        const loginData = localStorage.getItem(LOGIN_DATA_KEY);
-        if (!loginData) {
-            return;
+const $q = useQuasar();
+const store = useStore();
+const { t: $t } = useI18n();
+
+const props = withDefaults(defineProps<{show?: boolean}>(), {
+    show: false,
+});
+
+const emit = defineEmits(['hide']);
+
+const tab = ref('web3');
+const isMobile = ref(false);
+const browserSupportsMetaMask = ref(true);
+const isBraveBrowser = ref(false);
+const isIOSMobile = ref(false);
+
+const authenticators = computed(() => ual.getAuthenticators().availableAuthenticators);
+
+onMounted(async () => {
+    await detectProvider();
+    detectMobile();
+
+    // On login we must set the address and record the provider
+    getAntelope().events.onLoggedIn.subscribe((account: AccountModel) => {
+        const evm_account = account as EvmAccountModel;
+        const address = evm_account.account;
+        const pr_name = evm_account.authenticator.getName();
+        setLogin({ address });
+
+        localStorage.setItem(LOGIN_DATA_KEY, JSON.stringify({
+            type: LOGIN_EVM,
+            provider: pr_name,
+            account: address,
+        }));
+    });
+
+    const loginData = localStorage.getItem(LOGIN_DATA_KEY);
+    if (!loginData) {
+        return;
+    }
+
+    const loginObj = JSON.parse(loginData);
+    if (loginObj.type === LOGIN_EVM) {
+        loginWithAntelope(loginObj.provider, loginObj.account);
+    } else if (loginObj.type === LOGIN_NATIVE) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const wallet = authenticators.value.find((a: { getName: () => any; }) => a.getName() === loginObj.provider);
+        if (wallet) {
+            ualLogin(wallet);
+        } else {
+            console.error(`Unknown login type: ${loginObj.type}`);
+            $q.notify({
+                position: 'top',
+                message: $t('components.unknown_native_login_provider', { provider: loginObj.provider }),
+                timeout: 6000,
+            });
         }
+    }
+});
 
-        const loginObj = JSON.parse(loginData);
-        if (loginObj.type === LOGIN_EVM) {
-            this.loginWithAntelope(loginObj.provider, loginObj.account);
-        } else if (loginObj.type === LOGIN_NATIVE) {
-            const wallet = this.authenticators.find((a: { getName: () => any; }) => a.getName() === loginObj.provider);
-            if (wallet) {
-                this.ualLogin(wallet);
-            } else {
-                console.error(`Unknown login type: ${loginObj.type}`);
-                this.$q.notify({
-                    position: 'top',
-                    message: this.$t('components.unknown_native_login_provider', { provider: loginObj.provider }),
-                    timeout: 6000,
-                });
-            }
+async function detectProvider() {
+    const provider = await detectEthereumProvider({ mustBeMetaMask: true });
+    browserSupportsMetaMask.value = provider?.isMetaMask || false;
+    isBraveBrowser.value = navigator.brave && await navigator.brave.isBrave() || false;
+}
+
+function detectMobile() {
+    // eslint-disable-next-line max-len
+    const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i;
+    isMobile.value = mobileRegex.test(navigator.userAgent);
+    /* used for temp exclusion from Brave Browser wallet.
+    See https://github.com/telosnetwork/teloscan/issues/335 */
+    isIOSMobile.value = (/iPhone|iPad|iPod/i).test(navigator.userAgent);
+}
+
+function setLogin(account: { address?: string, nativeAccount?: string}){
+    store.commit('login/setLogin', account);
+}
+
+async function ualLogin(wallet: Authenticator, account?: string) {
+    await wallet.init();
+    const users = await wallet.login(account);
+    if (users.length) {
+        const account = users[0];
+        const accountName = await account.getAccountName();
+        let evmAccount;
+        try {
+            evmAccount = await (evm as unknown as TelosEvmApi).telos.getEthAccountByTelosAccount(accountName);
+        } catch (e) {
+            $q.notify({
+                position: 'top',
+                message: $t('components.search_evm_address_failed', { accountName }),
+                timeout: 6000,
+            });
+            wallet.logout();
+            return;
         }
-    },
-    methods: {
-        ...mapMutations('login', [
-            'setLogin',
-        ]),
-
-        async detectProvider() {
-            const provider = await detectEthereumProvider({ mustBeMetaMask: true });
-            this.browserSupportsMetaMask = provider?.isMetaMask || false;
-            this.isBraveBrowser = navigator.brave && await navigator.brave.isBrave() || false;
-        },
-
-        detectMobile() {
-            // eslint-disable-next-line max-len
-            const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i;
-            this.isMobile = mobileRegex.test(navigator.userAgent);
-            /* used for temp exclusion from Brave Browser wallet.
-               See https://github.com/telosnetwork/teloscan/issues/335 */
-            this.isIOSMobile = (/iPhone|iPad|iPod/i).test(navigator.userAgent);
-        },
-
-        getLoginDisplay() {
-            return this.isNative ? this.nativeAccount : `0x...${this.address.slice(this.address.length - 4)}`;
-        },
-        goToAddress() {
-            this.$router.push(`/address/${this.address}`);
-        },
-        async ualLogin(wallet: Authenticator, account?: string) {
-            await wallet.init();
-            const users = await wallet.login(account);
-            if (users.length) {
-                const account = users[0];
-                const accountName = await account.getAccountName();
-                let evmAccount;
-                try {
-                    evmAccount = await this.$evm.telos.getEthAccountByTelosAccount(accountName);
-                } catch (e) {
-                    this.$q.notify({
-                        position: 'top',
-                        message: this.$t('components.search_evm_address_failed', { accountName }),
-                        timeout: 6000,
-                    });
-                    wallet.logout();
-                    return;
-                }
-                this.setLogin({
-                    address: evmAccount.address,
-                    nativeAccount: accountName,
-                });
-                this.$providerManager.setProvider(account);
-                localStorage.setItem(LOGIN_DATA_KEY, JSON.stringify({ type: LOGIN_NATIVE, provider: wallet.getName(), account: evmAccount.address }));
-            }
-            this.$emit('hide');
-        },
-        getIconForWallet(wallet: { getName: () => string; getStyle: () => { icon: string; }; }) {
-            if (wallet.getName() === 'wombat') {
-                // Wombat UAL logo is 32x32px; substitute for higher res
-                return '/assets/wombat-logo.png';
-            }
+        setLogin({
+            address: evmAccount.address,
+            nativeAccount: accountName,
+        });
+        providerManager.setProvider(account);
+        localStorage.setItem(LOGIN_DATA_KEY, JSON.stringify({
+            type: LOGIN_NATIVE,
+            provider: wallet.getName(),
+            account: evmAccount.address,
+        }));
+    }
+    emit('hide');
+}
 
-            return wallet.getStyle().icon;
-        },
-        async loginWithAntelope(name:string, autoLogAccount?: string) {
-            const label = CURRENT_CONTEXT;
-            const auth = getAntelope().wallets.getAuthenticator(name);
-            if (!auth) {
-                console.error(`${name} authenticator not found`);
-                return;
-            }
-            const authenticator = auth.newInstance(label);
-            const network = useChainStore().currentChain.settings.getNetwork();
-            useAccountStore().loginEVM({ authenticator, network, autoLogAccount }, true).then(() => {
-                const address = useAccountStore().getAccount(label).account;
-                this.setLogin({ address });
-                localStorage.setItem(LOGIN_DATA_KEY, JSON.stringify({
-                    type: LOGIN_EVM,
-                    provider: name,
-                    account: address,
-                }));
+function getIconForWallet(wallet: { getName: () => string; getStyle: () => { icon: string; }; }) {
+    if (wallet.getName() === 'wombat') {
+        // Wombat UAL logo is 32x32px; substitute for higher res
+        return '/assets/wombat-logo.png';
+    }
+    return wallet.getStyle().icon;
+}
+
+async function loginWithAntelope(name:string, autoLogAccount?: string) {
+    const label = CURRENT_CONTEXT;
+    const auth = getAntelope().wallets.getAuthenticator(name);
+    if (!auth) {
+        console.error(`${name} authenticator not found`);
+        return;
+    }
+    const authenticator = auth.newInstance(label);
+    const network = useChainStore().currentChain.settings.getNetwork();
+    useAccountStore().loginEVM({ authenticator, network, autoLogAccount }, true).then(() => {
+        const address = useAccountStore().getAccount(label).account;
+        setLogin({ address });
+        localStorage.setItem(LOGIN_DATA_KEY, JSON.stringify({
+            type: LOGIN_EVM,
+            provider: name,
+            account: address,
+        }));
+    });
+    emit('hide');
+}
+
+async function connectMetaMask() {
+    if (isBraveBrowser.value && window.ethereum.isBraveWallet && !isMobile.value){
+        $q.notify({
+            position: 'top',
+            message: $t('components.enable_wallet_extensions'),
+            timeout: 6000,
+        });
+        return;
+    }
+
+    if (!browserSupportsMetaMask.value || !window.ethereum || (isMobile.value && isBraveBrowser.value)){
+        try {
+            window.open('https://metamask.app.link/dapp/teloscan.io');
+        } catch {
+            $q.notify({
+                position: 'top',
+                message: $t('components.enable_wallet_extensions'),
+                timeout: 6000,
             });
-            this.$emit('hide');
-        },
-        async connectMetaMask() {
-            if (this.isBraveBrowser && window.ethereum.isBraveWallet && !this.isMobile){
-                this.$q.notify({
-                    position: 'top',
-                    message: this.$t('components.enable_wallet_extensions'),
-                    timeout: 6000,
-                });
-                return;
-            }
+        }
+        return;
+    }
 
-            if (!this.browserSupportsMetaMask || !window.ethereum || (this.isMobile && this.isBraveBrowser)){
-                try {
-                    window.open('https://metamask.app.link/dapp/teloscan.io');
-                } catch {
-
-                    this.$q.notify({
-                        position: 'top',
-                        message: this.$t('components.enable_wallet_extensions'),
-                        timeout: 6000,
-                    });
-                }
-                return;
-            }
+    loginWithAntelope(PROVIDER_METAMASK);
+}
+
+async function connectBraveWallet() {
+    // Brave Wallet is not set as default and/or has other extensions enabled
+    if (!window.ethereum.isBraveWallet){
+        $q.notify({
+            position: 'top',
+            message: $t('components.disable_wallet_extensions'),
+            timeout: 6000,
+        });
+        return;
+    }
+    loginWithAntelope(PROVIDER_BRAVE);
+}
+
+function connectWalletConnect() {
+    loginWithAntelope(PROVIDER_WALLET_CONNECT);
+}
+
+function hideDialog(){
+    emit('hide');
+}
 
-            this.loginWithAntelope(PROVIDER_METAMASK);
-        },
-        async connectTelosCloud() {
-            this.loginWithAntelope(PROVIDER_TELOS_CLOUD);
-        },
-        async connectBraveWallet() {
-            // Brave Wallet is not set as default and/or has other extensions enabled
-            if (!window.ethereum.isBraveWallet){
-                this.$q.notify({
-                    position: 'top',
-                    message: this.$t('components.disable_wallet_extensions'),
-                    timeout: 6000,
-                });
-                return;
-            }
-            this.loginWithAntelope(PROVIDER_BRAVE);
-        },
-        connectWalletConnect() {
-            this.loginWithAntelope(PROVIDER_WALLET_CONNECT);
-        },
-    },
-});
 </script>
 <template>
-<div class="c-login-modal">
-    <q-dialog :model-value="show" @hide="() => $emit('hide')">
-        <q-card rounded class="c-login-modal__modal-inner">
-            <q-tabs v-model="tab">
-                <q-tab name="web3" :label="$t('components.evm_wallets')" />
-                <q-tab name="native" :label="$t('components.advanced')" />
-            </q-tabs>
-            <q-separator/>
-            <q-tab-panels v-model="tab" animated>
-                <q-tab-panel name="web3">
-                    <q-card class="c-login-modal__image-container" @click="connectMetaMask()">
-                        <q-img
-                            :src="require('src/assets/metamask-fox.svg')"
-                            height="64px"
-                            width="64px"
-                        />
-                        <span>
-                            {{ isMobile && (!browserSupportsMetaMask || isBraveBrowser) ?
-                                $t('components.continue_on_metamask') : 'Metamask' }}</span>
-                    </q-card>
+<q-dialog :model-value="props.show" @hide="hideDialog">
+    <q-card rounded class="c-login-modal__modal-inner">
+        <q-tabs v-model="tab">
+            <q-tab name="web3" :label="$t('components.evm_wallets')" />
+            <q-tab name="native" :label="$t('components.advanced')" />
+        </q-tabs>
+        <q-separator/>
+        <q-tab-panels v-model="tab" animated class="c-login-modal__panels">
+            <q-tab-panel name="web3">
+                <q-card class="c-login-modal__image-container" @click="connectMetaMask()">
+                    <q-img
+                        :src="require('src/assets/metamask-fox.svg')"
+                        height="64px"
+                        width="64px"
+                    />
+                    <span>
+                        {{ isMobile && (!browserSupportsMetaMask || isBraveBrowser) ?
+                            $t('components.continue_on_metamask') : 'Metamask' }}</span>
+                </q-card>
+                <q-card
+                    v-if="isBraveBrowser && !isIOSMobile"
+                    class="c-login-modal__image-container"
+                    @click="connectBraveWallet()"
+                >
+                    <q-img
+                        :src="require('src/assets/brave_lion.svg')"
+                        width="50px"
+                    />
+                    <span> Brave Wallet </span>
+                </q-card>
+                <q-card
+                    class="c-login-modal__image-container"
+                    @click="connectWalletConnect()"
+                >
+                    <q-img
+                        :src="require('src/assets/logo--wallet-connect.svg')"
+                        height="64px"
+                        width="64px"
+                        fit="contain"
+                    />
+                    <span> Wallet Connect </span>
+                </q-card>
+            </q-tab-panel>
+            <q-tab-panel name="native">
+                <p>
+                    {{ $t('components.text1_native_wallets') }}
+                    <span class="text-red">
+                        {{ $t('components.text2_advanced_users') }}
+                    </span>
+                    {{ $t('components.text3_or_to_recover_assets') }}
+                </p>
+                <div class="u-flex--center">
                     <q-card
-                        v-if="isBraveBrowser && !isIOSMobile"
+                        v-for="wallet in authenticators"
+                        :key="wallet.getStyle().text"
                         class="c-login-modal__image-container"
-                        @click="connectBraveWallet()"
+                        @click="ualLogin(wallet)"
                     >
                         <q-img
-                            :src="require('src/assets/brave_lion.svg')"
-                            width="50px"
-                        />
-                        <span> Brave Wallet </span>
-                    </q-card>
-                    <q-card
-                        v-if="isTodayBeforeTelosCloudDown"
-                        class="c-login-modal__image-container"
-                        @click="connectTelosCloud()"
-                    >
-                        <InlineSvg
-                            :src="require('src/assets/logo--telos-cloud-wallet.svg')"
+                            :src="getIconForWallet(wallet)"
                             height="64px"
                             width="64px"
                         />
-                        <span> Telos Cloud </span>
+                        {{ wallet.getStyle().text }}
                     </q-card>
-                    <q-card
-                        class="c-login-modal__image-container"
-                        @click="connectWalletConnect()"
-                    >
-                        <q-img
-                            :src="require('src/assets/logo--wallet-connect.svg')"
-                            height="64px"
-                            width="64px"
-                            fit="contain"
-                        />
-                        <span> Wallet Connect </span>
-                    </q-card>
-                </q-tab-panel>
-                <q-tab-panel name="native">
-                    <p>
-                        {{ $t('components.text1_native_wallets') }}
-                        <span class="text-red">
-                            {{ $t('components.text2_advanced_users') }}
-                        </span>
-                        {{ $t('components.text3_or_to_recover_assets') }}
-                    </p>
-                    <div class="u-flex--center">
-                        <q-card
-                            v-for="wallet in authenticators"
-                            :key="wallet.getStyle().text"
-                            class="c-login-modal__image-container"
-                            @click="ualLogin(wallet)"
-                        >
-                            <q-img
-                                :src="getIconForWallet(wallet)"
-                                height="64px"
-                                width="64px"
-                            />
-                            {{ wallet.getStyle().text }}
-                        </q-card>
-                    </div>
-                </q-tab-panel>
-            </q-tab-panels>
-        </q-card>
-    </q-dialog>
-</div>
+                </div>
+            </q-tab-panel>
+        </q-tab-panels>
+    </q-card>
+</q-dialog>
 </template>
 
 <style lang='scss'>
@@ -337,6 +313,11 @@ export default defineComponent({
             }
         }
     }
+    &__panels{
+        .scroll{
+            overflow: unset;
+        }
+    }
 }
 
 
diff --git a/src/components/MethodField.vue b/src/components/MethodField.vue
index 4b6a7d21d..f8738044c 100644
--- a/src/components/MethodField.vue
+++ b/src/components/MethodField.vue
@@ -1,87 +1,140 @@
-<script>
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-import { formatWei } from 'src/lib/utils';
-import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
+import { ZERO_ADDRESSES } from 'src/lib/utils';
 
-export default {
-    name: 'MethodField',
-    props: {
-        trx: {
-            type: Object,
-            required: true,
-        },
-        contract: {
-            type: Object,
-            default: null,
-        },
-        shortenSignature: {
-            type: Boolean,
-            default: false,
-        },
-        shortenName: {
-            type: Boolean,
-            default: false,
+const { t: $t } = useI18n();
+
+const props = defineProps({
+    highlightMethod: {
+        type: String,
+        required: false,
+        default: '',
+    },
+    trx: {
+        type: Object as () => {
+            parsedTransaction?: {
+                name: string;
+            };
+            from?: string;
+            value?: string;
+            gasPrice?: string;
+            to?: string | null;
+            input?: string;
+            hash?: string;
         },
+        required: true,
     },
-    data() {
-        return {
-            transferAmount: null,
-            transferTo: null,
-            expand: false,
-        };
+    fullText: {
+        type: Boolean,
+        default: false,
     },
-    mounted() {
-        this.setValues();
-    },
-    methods: {
-        toggle(){
-            this.expand = !this.expand;
-        },
-        async setValues() {
-            if (!this.trx.parsedTransaction) {
-                return;
-            }
-
-            if (TRANSFER_SIGNATURES.includes(this.trx.parsedTransaction.sighash) && this?.contract?.token?.decimals) {
-                const wei = formatWei(this.trx.parsedTransaction.args[1], this.contract.token.decimals);
-                this.transferAmount = `${wei} ${this.contract.token.symbol}`;
-            }
-        },
+    contract: {
+        type: Object,
+        default: () => null,
     },
+});
+
+const emit = defineEmits(['highlight']);
+
+const methodName = ref('');
+const nativeTooltipText = ref('');
+
+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'
+        return props.trx.input.slice(0, 10);
+    }
+
+    return '';
+});
+const displayText = computed(() => {
+    if (methodName.value) {
+        return methodName.value;
+    }
+
+    if (props.trx.input && props.trx.input !== '0x') {
+        return methodSignature.value;
+    }
+
+    return '';
+});
+const propValue = computed(() => +(props.trx.value || '0x0'));
+
+onMounted(async () => {
+    await setValues();
+});
+
+const setValues = async () => {
+    if (
+        !props.trx.parsedTransaction
+        && props.trx.from === ZERO_ADDRESSES
+        && propValue.value
+        && parseInt(props.trx.gasPrice as string) === 0
+    ) {
+        nativeTooltipText.value = $t('pages.transactions.native_deposit_tooltip');
+        methodName.value = $t('pages.transactions.deposit_action_name');
+    } else if (
+        !props.trx.parsedTransaction
+        && props.trx.to === ZERO_ADDRESSES
+        && propValue.value
+        && parseInt(props.trx.gasPrice as string) === 0
+    ) {
+        nativeTooltipText.value = $t('pages.transactions.native_withdraw_tooltip');
+        methodName.value = $t('pages.transactions.withdraw_action_name');
+    } else if (!props.trx.parsedTransaction && props.trx.input === '0x' && propValue.value) {
+        methodName.value = $t('pages.transactions.transfer_tlos_action_name');
+    } else if (!props.trx.parsedTransaction && props.trx.to === null) {
+        methodName.value = $t('pages.transactions.contract_deployment');
+    } else if (props.trx.parsedTransaction) {
+        methodName.value = props.trx.parsedTransaction.name;
+    }
 };
+
+function emitHighlight(val: string) {
+    emit('highlight', val);
+}
 </script>
 
 <template>
-<div>
-    <span v-if="trx.parsedTransaction">
-        <span>
-            {{
-                trx.parsedTransaction.name.length > 11 && shortenName ?
-                    `${trx.parsedTransaction.name.slice(0,8)}...` :
-                    trx.parsedTransaction.name
-            }}
-        </span>
-        <span v-if="transferAmount"> ({{ transferAmount }})</span>
-        <q-tooltip v-if="shortenName" anchor="center middle" self="center middle">
-            {{ trx.parsedTransaction.name }}
-        </q-tooltip>
-    </span>
-    <span v-else :class="shortenSignature && 'clickable'">
-        <span v-if="!expand" clickable="clickable" v-on:click="shortenSignature && toggle()">
-            {{trx.input_data.length > 10 && shortenSignature ? `${trx.input_data.slice(0,10)}` : trx.input_data}}
-        </span>
-        <q-tooltip v-if="shortenSignature &amp;&amp; !expand">
-            {{ $t('components.click_to_expand') }}
-        </q-tooltip>
-        <span
-            v-if="shortenSignature && expand"
-            class="word-break"
-            anchor="center middle"
-            self="center middle"
-            v-on:click="toggle()"
-        >
-            {{ trx.input_data }}
-        </span>
-    </span>
+<div
+    :class="{
+        'c-method': true,
+        'c-method--highlight': [methodName, methodSignature].includes(highlightMethod) && highlightMethod !== '',
+        'c-method--full-text': fullText,
+    }"
+    @mouseenter="emitHighlight(methodName || methodSignature)"
+    @mouseleave="emitHighlight('')"
+>
+    {{ displayText }}
+
+    <q-tooltip>
+        {{ nativeTooltipText || methodName || displayText }}
+    </q-tooltip>
 </div>
 </template>
+
+<style lang="scss">
+.c-method {
+    width: 80px;
+    height: 24px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: 3px 4px 0;
+    text-align: center;
+    border-radius: 5px;
+    font-size: 0.9em;
+    border: 1px solid var(--border-color);
+
+    &--highlight {
+        background: rgba($secondary, 0.2);
+        border: 1px dashed $secondary;
+    }
+
+    &--full-text {
+        width: auto;
+    }
+}
+</style>
diff --git a/src/components/NftTransfersTable.vue b/src/components/NftTransfersTable.vue
new file mode 100644
index 000000000..b5172b7e6
--- /dev/null
+++ b/src/components/NftTransfersTable.vue
@@ -0,0 +1,633 @@
+<!-- eslint-disable no-case-declarations -->
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { contractManager, indexerApi } from 'src/boot/telosApi';
+
+import TransactionField from 'components/TransactionField';
+import AddressField from 'components/AddressField';
+import MethodField from 'components/MethodField';
+import DateField from 'components/DateField.vue';
+import { formatWei, toChecksumAddress } from 'src/lib/utils';
+import { EvmTransactionExtended, Pagination } from 'src/types';
+import { EvmContractFunctionParameter, EvmTransaction, EvmTransactionLog } from 'src/antelope/types';
+import { ethers } from 'ethers';
+
+const { t: $t } = useI18n();
+
+// ---------------------
+interface TransfersResponse {
+    code: number;
+    success: boolean;
+    total_count: number;
+    more: boolean;
+    message: string;
+    contracts: { [address: string]: ContractData };
+    results: TransferData[];
+}
+
+interface ContractData {
+    symbol?: string;
+    creator?: string;
+    address: string;
+    fromTrace?: boolean;
+    trace_address?: string;
+    supply?: string;
+    calldata?: string;
+    block_timestamp?: number;
+    decimals?: number | null;
+    name?: string;
+    block?: number;
+    supportedInterfaces?: string[];
+    transaction?: string;
+}
+
+interface TransferData {
+    amount: string; // amount of tokens
+    logIndex: number;
+    contract: string;
+    blockNumber: number;
+    from: string;
+    id: string;
+    to: string;
+    type: string;
+    transaction: string;
+    timestamp: string;
+}
+
+// ---------------------
+
+export interface NftTransferData {
+    hash: string;
+    timestamp: number;
+    amount: string;
+    id: string;
+    value: string;
+    contract: {
+        address: string;
+        name: string;
+        symbol: string;
+        decimals: number;
+    };
+    from: string;
+    to: string;
+    trx: EvmTransactionExtended | null;
+}
+
+export interface NftTransferProps {
+    title: string;
+    tokenType: string;
+    address: string;
+    initialPageSize: number;
+}
+
+const props = withDefaults(defineProps<NftTransferProps>(), {
+    title: '',
+    tokenType: '',
+    address: '',
+    initialPageSize: 10,
+});
+
+const rows = ref<Array<NftTransferData>>([]);
+const loading = ref(false);
+const loadingRows = ref<Array<number>>([]);
+const loadingCols = ref<Array<number>>([]);
+const showDateAge = ref(true);
+const highlightMethod = ref('');
+
+const pagination = ref<Pagination>(
+    {
+        sortBy: 'number',
+        descending: true,
+        page: 1,
+        rowsPerPage: props.initialPageSize || 10,
+        rowsNumber: 0,
+    },
+);
+
+const columns = [
+    {
+        name: 'hash',
+        label: $t('components.tx_hash'),
+        align: 'left',
+    },
+    {
+        name: 'method',
+        label: $t('components.method'),
+        align: 'left',
+    },
+    {
+        name: 'date',
+        label: $t('components.age'),
+        align: 'left',
+    },
+    {
+        name: 'direction',
+        label: '',
+        align: 'left',
+    },
+    {
+        name: 'from',
+        label: $t('components.from'),
+        align: 'left',
+    },
+    {
+        name: 'to',
+        label: $t('components.to'),
+        align: 'left',
+    },
+    {
+        name: 'id',
+        label: $t('components.nfts.id'),
+        align: 'left',
+    },
+    {
+        name: 'value',
+        label: $t('components.value'),
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: $t('components.amount'),
+        align: 'left',
+    },
+    {
+        name: 'token',
+        label: $t('components.token'),
+        align: 'left',
+    },
+    {
+        name: 'item',
+        label: $t('components.item'),
+        align: 'left',
+    },
+] as {
+    name: string,
+    label: string,
+    align: string,
+}[];
+
+function setHighlightMethod(val: string) {
+    highlightMethod.value = val;
+}
+
+const truncatedId = (id: string) => {
+    if (id.length > 7) {
+        return `${id.substring(0, 4)}...${id.substring(id.length - 3)}`;
+    } else {
+        return id;
+    }
+};
+
+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=${
+        rowsPerPage === 0 ? 10 : rowsPerPage
+    }`;
+    path += `&type=${props.tokenType}`;
+    path += `&offset=${(page - 1) * rowsPerPage}&includePagination=true`;
+    path += `&sort=${descending ? 'desc' : 'asc'}`;
+
+    return path;
+};
+
+// Method name resolution ------------------
+// This must be refactored in the future. Follow issue #654
+// https://github.com/telosnetwork/teloscan/issues/654
+const resolveMethodName = async (hash: string) => {
+    try {
+        const trxResponse = await indexerApi.get(`/transaction/${hash}?full=true&includeAbi=true`);
+        if (trxResponse.data.results.length === 0) {
+            console.error(`Transaction ${hash} not found`);
+            return;
+        }
+        const aux = trxResponse.data.results[0] as EvmTransaction;
+        let logsArray: EvmTransactionLog[] = [];
+        if(aux.logs){
+            const fixedStr = aux.logs.replace('transaction_hash', 'transactionHash');
+            try {
+                logsArray = JSON.parse(fixedStr) as EvmTransactionLog[];
+            } catch (e) {
+                console.error('Error parsing logs', e);
+            }
+        }
+        const _trx:EvmTransactionExtended = {
+            ...aux,
+            gasUsedBn: ethers.BigNumber.from(aux.gasUsed),
+            gasLimitBn: ethers.BigNumber.from(aux.gasLimit),
+            valueBn: ethers.BigNumber.from(aux.value),
+            gasPriceBn: ethers.BigNumber.from(aux.gasPrice),
+            contract: undefined,
+            parsedTransaction: undefined,
+            functionParams: [],
+            logsArray,
+        };
+        await loadContract(_trx);
+    } catch (e) {
+        console.error('Error resolving method name', e);
+        return;
+    }
+};
+const loadContract = async (_trx: EvmTransactionExtended) => {
+    const transfer = rows.value.find(t => t.hash === _trx.hash && t.trx === null);
+    if (!_trx || _trx.input === '0x') {
+        if (transfer) {
+            transfer.trx = _trx;
+        }
+        return;
+    }
+    _trx.contract = await contractManager.getContract(_trx.to?.toLowerCase());
+    if (!_trx.contract) {
+        if (transfer) {
+            transfer.trx = _trx;
+        }
+        return;
+    }
+
+    _trx.parsedTransaction = await contractManager.parseContractTransaction(
+        _trx,
+        _trx.input,
+        _trx.contract,
+    );
+
+    _trx.functionParams = getFunctionParams(_trx);
+
+    if (transfer) {
+        transfer.trx = _trx;
+    }
+};
+const getFunctionParams = (trx: EvmTransactionExtended) => {
+    if (!trx.parsedTransaction) {
+        return [];
+    }
+    const args:EvmContractFunctionParameter[] = [];
+    trx.parsedTransaction.functionFragment.inputs.forEach((input, i) => {
+        args.push({
+            name: input.name,
+            type: input.type,
+            arrayChildren: (input.arrayChildren !== null) ? input.arrayChildren.type : false,
+            value:  trx.parsedTransaction?.args[i],
+        });
+    });
+    return args;
+};
+// ----------------------------------------------------
+
+
+
+
+const onRequest = async (settings: { pagination: Pagination}) => {
+    loading.value = true;
+
+    const { page, rowsPerPage, sortBy, descending } = settings.pagination;
+
+    let response = await indexerApi.get(getPath(settings)) as { data: TransfersResponse };
+    if (!pagination.value.rowsNumber && response.data?.total_count) {
+        pagination.value.rowsNumber = response.data.total_count;
+    }
+
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+    updateLoadingRows();
+
+    let newTransfers = [] as NftTransferData[];
+    for (const transfer of response.data.results) {
+        resolveMethodName(transfer.transaction);
+        const contractData = response.data.contracts[transfer.contract];
+        let valueDisplay;
+        if(props.tokenType === 'erc20'){
+            if (contractData && contractData.decimals) {
+                valueDisplay = formatWei(transfer.amount, contractData.decimals);
+            } else {
+                valueDisplay = $t('components.unknown_precision');
+            }
+        }
+
+        const nTransfer = {
+            hash: transfer.transaction,
+            timestamp: new Date(transfer.timestamp).getTime(),
+            amount: transfer.amount,
+            id: transfer.id,
+            value: valueDisplay,
+            contract: contractData,
+            from: toChecksumAddress(transfer.from),
+            to: toChecksumAddress(transfer.to),
+            trx: null,
+        } as NftTransferData;
+
+        newTransfers.push(nTransfer);
+    }
+
+    rows.value.splice(
+        0,
+        rows.value.length,
+        ...newTransfers,
+    );
+    loading.value = false;
+};
+
+const convertToEpoch = (dateString: string | number) => {
+    if (typeof dateString === 'number'){
+        return dateString / 1000;
+    }
+    const d: number[] = dateString.split(/\D+/).map(n => parseInt(n, 10));
+    const epoch = new Date(d[0], --d[1], d[1], d[3], d[4], d[5]).getTime() / 1000;
+    return epoch;
+};
+
+function toggleDateFormat() {
+    showDateAge.value = !showDateAge.value;
+}
+
+const updateLoadingRows = () => {
+    loadingRows.value = [];
+    for (var i = 1; i <= pagination.value.rowsPerPage; i++) {
+        loadingRows.value.push(i);
+    }
+};
+
+const updateCols = () => {
+    console.log('updateCols()', props.tokenType);
+    let exclude = [] as string[];
+
+    switch (props.tokenType) {
+    case 'erc20':
+        exclude = ['id', 'amount', 'item'];
+        break;
+    case 'erc721':
+        exclude = ['value', 'amount', 'item'];
+        break;
+    case 'erc1155':
+        exclude = ['value', 'item'];
+        break;
+    default:
+        throw new Error($t('components.unsupported_token_type', { tokenType: props.tokenType }));
+    }
+
+    const filtered = columns.filter(col => !exclude.includes(col.name));
+    columns.splice(
+        0,
+        columns.length,
+        ...filtered,
+    );
+    loadingCols.value = [];
+    for (var i = 1; i <= columns.length; i++) {
+        loadingCols.value.push(i);
+    }
+};
+
+watch(() => columns, () => {
+    updateCols();
+});
+
+watch(() => pagination.value.rowsPerPage, () => {
+    updateLoadingRows();
+});
+
+watch(() => props.tokenType, () => {
+    updateCols();
+    updateLoadingRows();
+},
+{ immediate: true });
+
+onMounted(() => {
+    updateCols();
+    updateLoadingRows();
+    onRequest({ pagination: pagination.value });
+});
+
+</script>
+
+<template>
+<q-table
+    v-if="!loading"
+    v-model:pagination="pagination"
+    :rows="rows"
+    :row-key="row => row.hash"
+    :columns="columns"
+    :rows-per-page-label="$t('global.records_per_page')"
+    :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
+                    v-if="col.name==='date'"
+                    class="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">
+                            {{ $t('components.click_to_change_format') }}
+                        </q-tooltip>
+                    </q-icon>
+                </div>
+                <div v-else 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="hash" :props="props">
+                <TransactionField :transaction-hash="props.row.hash"/>
+            </q-td>
+            <q-td key="method" :props="props">
+                <MethodField
+                    v-if="props.row.trx"
+                    :trx="props.row.trx"
+                    :shortenName="true"
+                    :highlightMethod="highlightMethod"
+                    @highlight="setHighlightMethod"
+                />
+                <q-skeleton v-else type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="date" :props="props">
+                <DateField :epoch="convertToEpoch(props.row.timestamp)" :force-show-age="showDateAge"/>
+            </q-td>
+            <q-td key="direction" :props="props">
+                <span v-if="toChecksumAddress(address) === toChecksumAddress(props.row.from)" class="direction out">
+                    {{ $t('components.transaction.out').toUpperCase() }}
+                </span>
+                <span
+                    v-else-if="toChecksumAddress(address) === toChecksumAddress(props.row.to)"
+                    class="direction in"
+                >
+                    {{ $t('components.transaction.in').toUpperCase() }}
+                </span>
+            </q-td>
+            <q-td key="from" :props="props">
+                <AddressField
+                    v-if="props.row.from"
+                    :key="props.row.from"
+                    :address="props.row.from"
+                    :truncate="12"
+                    :highlightAddress="highlightAddress"
+                    @highlight="setHighlightAddress"
+                />
+            </q-td>
+            <q-td key="to" :props="props">
+                <AddressField
+                    v-if="props.row.to"
+                    :key="props.row.to"
+                    :address="props.row.to"
+                    :truncate="12"
+                    :highlightAddress="highlightAddress"
+                    @highlight="setHighlightAddress"
+                />
+            </q-td>
+            <q-td key="id" :props="props">
+                <span class="q-pl-xs" >
+                    #{{ truncatedId(props.row.id) }}
+                    <q-tooltip>{{ props.row.id }}</q-tooltip>
+                </span>
+            </q-td>
+            <q-td key="amount" :props="props">
+                <span>
+                    {{ truncatedId(props.row.amount) }}
+                    <q-tooltip>{{ props.row.amount }}</q-tooltip>
+                </span>
+            </q-td>
+            <q-td key="value" :props="props">
+                <span>
+                    {{ truncatedId(props.row.value) }}
+                    <q-tooltip>{{ props.row.value }}</q-tooltip>
+                </span>
+            </q-td>
+            <q-td key="token" :props="props" class="flex items-center">
+                <AddressField
+                    :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">
+                <AddressField
+                    :key="props.row.contract.address"
+                    :address="props.row.contract.address"
+                    :truncate="16"
+                    :highlightAddress="highlightAddress"
+                    @highlight="setHighlightAddress"
+                />
+            </q-td>
+        </q-tr>
+    </template>
+</q-table>
+<q-table
+    v-else
+    v-model:pagination="pagination"
+    :rows="loadingRows"
+    :row-key="row => row.hash"
+    :columns="columns"
+    :rows-per-page-label="$t('global.records_per_page')"
+    :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
+                    v-if="col.name==='date'"
+                    class="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">
+                            {{ $t('components.click_to_change_format') }}
+                        </q-tooltip>
+                    </q-icon>
+                </div>
+                <div v-else class="u-flex--center-y">
+                    {{ col.label }}
+                </div>
+
+            </q-th>
+        </q-tr>
+    </template>
+
+    <template v-slot:body="">
+        <q-tr>
+            <q-td v-for="col in loadingCols" :key="col">
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+        </q-tr>
+    </template>
+</q-table>
+</template>
+
+<style lang='scss' scoped>
+.direction {
+  user-select: none;
+  padding: 3px 6px;
+  border-radius: 5px;
+  font-size: 0.9em;
+
+  &.in {
+    color: rgb(0, 161, 134);
+    background: rgba(0, 161, 134, 0.1);
+    border: 1px solid rgb(0, 161, 134);
+  }
+
+  &.out {
+    color: #cc9a06 !important;
+    background: rgba(255, 193, 7, 0.1);
+    border: 1px solid #cc9a06 !important;
+  }
+}
+
+.nft-icon {
+  width: 32px;
+  height: 32px;
+  vertical-align: middle;
+  border-radius: 100%;
+}
+
+.coin-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: .25rem;
+  vertical-align: middle;
+  border-radius: 100%;
+}
+
+.token-name {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.info-icon{
+    margin-left: .25rem;
+}
+
+</style>
diff --git a/src/components/OutlineButton.vue b/src/components/OutlineButton.vue
new file mode 100644
index 000000000..06bc6529a
--- /dev/null
+++ b/src/components/OutlineButton.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { computed } from 'vue';
+
+const $q = useQuasar();
+
+const props = defineProps<{
+    textColor: 'primary' | 'negative' | 'default';
+    iconOnly?: boolean;
+    highlight?: boolean;
+}>();
+
+const buttonColor = computed(() => props.highlight ? 'primary' : ($q.dark.isActive ? 'grey-7' : 'grey-5'));
+
+</script>
+
+<template>
+<q-btn
+    outline
+    dense
+    no-caps
+    :color="buttonColor"
+    :class="{
+        'c-outline-button': true,
+        'c-outline-button--icon-only': iconOnly,
+        'c-outline-button--primary-text': textColor === 'primary',
+        'c-outline-button--red-text': textColor === 'negative',
+    }"
+>
+    <slot></slot>
+</q-btn>
+</template>
+
+<style lang="scss">
+.c-outline-button {
+    --button-height: 32px;
+    color: var(--border-color) !important;
+
+    height: var(--button-height);
+    padding: 0 12px;
+    flex-shrink: 0;
+
+    &--icon-only {
+        width: var(--button-height);
+        padding: 0;
+    }
+
+    .q-btn__content {
+        color: var(--text-color) !important;
+    }
+
+    &--primary-text {
+        .q-btn__content {
+            color: var(--q-primary) !important;
+        }
+    }
+
+    &--red-text {
+        .q-btn__content {
+            color: $negative !important;
+        }
+    }
+}
+</style>
diff --git a/src/components/SocialLinks.vue b/src/components/SocialLinks.vue
new file mode 100644
index 000000000..c364296ca
--- /dev/null
+++ b/src/components/SocialLinks.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import InlineSvg from 'vue-inline-svg';
+</script>
+<template>
+<div class="c-social-links">
+    <a class="c-social-links__link" href="http://t.me/HelloTelos">
+        <InlineSvg
+            :src="require('src/assets/icon-social--telegram.svg')"
+            class="c-social-links__img c-social-links__img--telegram"
+            height="24"
+            width="24"
+            aria-hidden="true"
+        />
+        <q-tooltip anchor="top middle" self="bottom middle">
+            Telegram
+        </q-tooltip>
+    </a>
+    <a class="c-social-links__link" href="https://twitter.com/HelloTelos">
+        <InlineSvg
+            :src="require('src/assets/icon-social--x-twitter.svg')"
+            class="c-social-links__img c-social-links__img--x-twitter"
+            height="24px"
+            width="24px"
+            aira-hidden="true"
+        />
+        <q-tooltip anchor="top middle" self="bottom middle">
+            X (Twitter)
+        </q-tooltip>
+    </a>
+    <a class="c-social-links__link" href="https://www.youtube.com/@TheTelosNetwork">
+        <InlineSvg
+            :src="require('src/assets/icon-social--youtube.svg')"
+            class="c-social-links__img c-social-links__img--youtube"
+            height="24px"
+            width="24px"
+            aira-hidden="true"
+        />
+        <q-tooltip anchor="top middle" self="bottom middle">
+            YouTube
+        </q-tooltip>
+    </a>
+    <a class="c-social-links__link" href="https://discord.gg/telos">
+        <InlineSvg
+            :src="require('src/assets/icon-social--discord.svg')"
+            class="c-social-links__img c-social-links__img--discord"
+            height="24px"
+            width="24px"
+            aira-hidden="true"
+        />
+        <q-tooltip anchor="top middle" self="bottom middle">
+            Discord
+        </q-tooltip>
+    </a>
+</div>
+</template>
+
+
+<style lang="scss">
+.c-social-links {
+    flex-direction: row;
+    justify-content: flex-end;
+    display: flex;
+
+    &__link {
+        display: inline-block;
+        margin-right: 1rem;
+    }
+
+    &__img {
+        .st0 {
+            fill: var(--grey-text-color);
+        }
+        .st1 {
+            fill: var(--invert-text-color);
+        }
+        &:hover {
+            .st0 {
+                fill: var(--text-color);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/components/Token/ApprovalList.vue b/src/components/Token/ApprovalList.vue
new file mode 100644
index 000000000..d45c98032
--- /dev/null
+++ b/src/components/Token/ApprovalList.vue
@@ -0,0 +1,790 @@
+<!-- eslint-disable @typescript-eslint/no-this-alias -->
+<script>
+import AddressField from 'components/AddressField';
+import DateField from 'components/DateField';
+import {
+    formatWei,
+    ZERO_ADDRESSES,
+} from 'src/lib/utils';
+import { mapGetters } from 'vuex';
+import { BigNumber, ethers } from 'ethers';
+import { CURRENT_CONTEXT, useAccountStore } from 'src/antelope/mocks';
+
+const approveABI = [
+    {
+        'constant': false,
+        'inputs': [
+            {
+                'name': '_spender',
+                'type': 'address',
+            },
+            {
+                'name': '_value',
+                'type': 'uint256',
+            },
+        ],
+        'name': 'approve',
+        'outputs': [
+            {
+                'name': '',
+                'type': 'bool',
+            },
+        ],
+        'payable': false,
+        'stateMutability': 'nonpayable',
+        'type': 'function',
+    },
+];
+
+const approvalForAllABI = [
+    {
+        'inputs': [
+            {
+                'internalType': 'address',
+                'name': 'operator',
+                'type': 'address',
+            },
+            {
+                'internalType': 'bool',
+                'name': '_approved',
+                'type': 'bool',
+            },
+        ],
+        'name': 'setApprovalForAll',
+        'outputs': [],
+        'stateMutability': 'nonpayable',
+        'type': 'function',
+    },
+];
+export default {
+    name: 'ApprovalList',
+    components: { AddressField, DateField },
+    props: {
+        type: {
+            type: String,
+            required: false,
+            default: 'erc20',
+        },
+        accountAddress: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        let columns = [
+            {
+                name: 'spender',
+                label: this.$t('components.approvals.spender'),
+                align: 'left',
+            },
+            {
+                name: 'amount',
+                label: (this.type === 'erc20') ?
+                    this.$t('components.approvals.amount') :
+                    this.$t('components.approvals.token_id'),
+                align: 'left',
+                sortable: !this.isNFT(),
+            },
+            {
+                name: 'contract',
+                label: this.$t('pages.contract'),
+                align: 'left',
+            },
+            {
+                name: 'updated',
+                label: this.$t('global.updated'),
+                align: 'left',
+                sortable: this.isNFT(),
+            },
+            {
+                name: 'action',
+                label: this.$t('global.action'),
+                align: 'left',
+            },
+        ];
+        return {
+            columns: columns,
+            confirmModal: null,
+            approved: false,
+            approvals: [],
+            selected: [],
+            loadingRows: [],
+            displayConfirmModal: false,
+            displayUpdateModal: false,
+            modalUpdateValue: false,
+            mask: '##################',
+            pagination: {
+                sortBy: (this.isNFT()) ? 'updated' : 'amount',
+                descending: true,
+                page: 1,
+                rowsPerPage: 10,
+                rowsNumber: 0,
+            },
+            signing: false,
+            loading: true,
+        };
+    },
+    created(){
+        for (var i = 1; i <= this.pagination.rowsPerPage; i++) {
+            this.loadingRows.push(i);
+        }
+    },
+    async mounted() {
+        await this.onRequest({
+            pagination: this.pagination,
+        });
+        if (!this.isLoggedIn) {
+            this.displayLoginModal = true;
+        }
+    },
+
+    computed: {
+        ...mapGetters('login', ['address', 'isLoggedIn', 'isNative']),
+    },
+    methods: {
+        async onRequest(props){
+            this.loading = true;
+
+            const { page, rowsPerPage, sortBy, descending } = props.pagination;
+
+            let response = await this.$indexerApi.get(this.getPath(props));
+
+            this.pagination.page = page;
+            this.pagination.rowsPerPage = rowsPerPage;
+            this.pagination.sortBy = sortBy;
+            this.pagination.descending = descending;
+            this.pagination.rowsNumber = response.data.total_count;
+            let approvals = [];
+            for (let approval of response.data.results) {
+                approval.selected = (this.selected.includes(approval.spender + ':' + approval.contract));
+                approval.contract = await this.$contractManager.getContract(approval.contract);
+                approval.single = 0;
+                if(this.isNFT() === false){
+                    approval.usd = 0;
+                    if(approval.contract.properties?.price){
+                        approval.usd = (formatWei(
+                            approval.amount,
+                            approval.contract.properties.decimals,
+                        ) * approval.contract.properties?.price).toFixed(2);
+                    }
+                    if(approval.amount > 0){
+                        approval.amountRaw = formatWei(
+                            approval.amount,
+                            approval.contract.properties?.decimals || 18,
+                            approval.contract.properties?.decimals || 18,
+                        );
+                        approval.amount = formatWei(
+                            approval.amount,
+                            approval.contract.properties?.decimals || 18,
+                            4,
+                        ).toString();
+                    }
+                } else {
+                    if(typeof approval.tokenId !== 'undefined'){
+                        approval.single = 1;
+                    }
+                    approval.amountRaw = approval.approved;
+                    approval.amount = approval.approved;
+                    approval.spender = (approval.operator) ? approval.operator : approval.spender;
+                }
+                approvals.push(approval);
+            }
+            this.approvals = approvals;
+            this.loading = false;
+        },
+        isNFT(){
+            return (this.type !== 'erc20');
+        },
+        getPath(props){
+            const { page, rowsPerPage, descending } = props.pagination;
+            let path = `/account/${this.accountAddress}/approvals?type=${this.type}&limit=${
+                rowsPerPage === 0 ? 10 : rowsPerPage
+            }`;
+            path += `&includeAbi=true&offset=${(page - 1) * rowsPerPage}`;
+            path += '&includePagination=true';
+            path += `&sort=${descending ? 'desc' : 'asc'}`;
+            return path;
+        },
+        async toggleApproval(contractAddress, single, spender, param2, message, error){
+            if(this.isNFT()){
+                if(this.type === 'erc1155'){
+                    return await useAccountStore().signCustomTransaction(
+                        CURRENT_CONTEXT,
+                        message,
+                        error,
+                        contractAddress,
+                        approveABI,
+                        [spender, param2],
+                    );
+                } else {
+                    // ERC721 has both approve & setApprovalForAll..
+                    if(single){
+                        return await useAccountStore().signCustomTransaction(
+                            CURRENT_CONTEXT,
+                            message,
+                            error,
+                            contractAddress,
+                            approveABI,
+                            [spender, param2],
+                        );
+                    } else {
+                        return await useAccountStore().signCustomTransaction(
+                            CURRENT_CONTEXT,
+                            message,
+                            error,
+                            contractAddress,
+                            approvalForAllABI,
+                            [spender, false],
+                        );
+                    }
+                }
+            } else {
+                return await useAccountStore().signCustomTransaction(
+                    CURRENT_CONTEXT,
+                    message,
+                    error,
+                    contractAddress,
+                    approveABI,
+                    [spender, param2],
+                );
+            }
+        },
+        async updateApproval(spender, contractAddress, single, param2) {
+            if(!contractAddress || !spender){
+                return;
+            }
+            this.signing = true;
+            const contract  = await this.$contractManager.getContract(contractAddress);
+            if(!contract){
+                return;
+            }
+
+            if (this.isLoggedIn && !this.isNative) {
+                let spenderAddress = spender; // Needed to avoid reassign error
+                if(single){
+                    spenderAddress = ZERO_ADDRESSES;
+                }
+                const spenderContract  = await this.$contractManager.getContract(spenderAddress);
+                try {
+                    await this.toggleApproval(contract.address, single, spenderAddress, param2, this.$t(
+                        'components.approvals.update_success',
+                        {
+                            spender: spenderContract?.getName() || spenderAddress,
+                            contract: contract.getName() || contract.address,
+                        }), this.$t('components.approvals.update_failed'),
+                    );
+                    return true;
+                } catch (e) {
+                    return false;
+                }
+            } else {
+                return false;
+            }
+        },
+        async handleCtaClick(spender, contract, single, tokenId) {
+            if (!this.isLoggedInAccount()) {
+                this.displayLoginModal = true;
+                return;
+            }
+
+            this.displayConfirmModal = true;
+            const ctx = this;
+            this.confirmModal = async function () {
+                const result = await ctx.updateApproval(spender, contract, single, tokenId || 0);
+                if(result){
+                    await ctx.checkChanges();
+                }
+                this.signing = false;
+                this.displayConfirmModal = false;
+            };
+        },
+        async checkChanges(){
+            let approval = true;
+            let i = 0;
+            let currentApprovals = this.approvals;
+            this.displayConfirmModal = false;
+            this.displayUpdateModal = false;
+            this.signing = false;
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            while(approval) {
+                await this.onRequest({
+                    pagination: this.pagination,
+                });
+                for(let k = 0; k < currentApprovals.length; k++){
+                    if(
+                        !this.approvals[k]
+                        || currentApprovals[k].amount !== this.approvals[k].amount
+                        || currentApprovals[k].spender !== this.approvals[k].spender
+                        || currentApprovals[k].contract !== this.approvals[k].contract
+                    ){
+                        approval = false;
+                        this.selected = [];
+                        break;
+                    }
+                }
+                if(i === 10){
+                    approval  = false;
+                    break;
+                }
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                i++;
+            }
+        },
+        toggleAll(value){
+            for(let i = 0; i < this.approvals.length; i++){
+                this.toggleSelected(
+                    this.approvals[i].spender + ':' +
+                    (this.approvals[i].contract.address || this.approvals[i].contract) + ':' +
+                    this.approvals[i].single + ':' +
+                    this.approvals[i].tokenId,
+                    value,
+                );
+            }
+        },
+        toggleSelected(id, value){
+            let parts = id.split(':');
+            for(let i = 0; i < this.approvals.length; i++){
+                if(parts[0] === this.approvals[i].spender && parts[1] === this.approvals[i].contract.address){
+                    if(this.approvals[i].tokenId){
+                        if(parts[3] === this.approvals[i].tokenId){
+                            this.approvals[i].selected = value;
+                        }
+                    } else {
+                        this.approvals[i].selected = value;
+                    }
+                }
+            }
+
+            let index = this.selected.indexOf(id);
+            if(value && index === -1){
+                this.selected.push(id);
+            } else if (index > - 1 && (this.selected.length === 1 || index === 0)) {
+                this.selected = [];
+            } else if (index > -1) {
+                this.selected = this.selected.slice(index, 1);
+            }
+        },
+        async isLoggedInAccount(){
+            if(!this.isLoggedIn){
+                return false;
+            }
+            return (this.accountAddress === this.address);
+        },
+        async handleCtaRemoveAll(){
+            this.toggleAll(true);
+            if (!this.isLoggedInAccount()) {
+                this.displayLoginModal = true;
+                return;
+            }
+            let more = true;
+            let limit = 100;
+            let offset = 0;
+            while(more){
+                let response = await this.$indexerApi.get(
+                    `/account/${this.accountAddress}/approvals?limit=${limit}&offset=${offset}&includePagination=true
+                    &type=${this.type}`,
+                );
+                more = response.data?.more || false;
+                offset = offset + limit;
+                if(response.data){
+                    for(let approval of response.data.results){
+                        this.toggleSelected(
+                            approval.spender + ':' + approval.contract + ':' + approval.single + ':' + approval.tokenId,
+                            true,
+                        );
+                    }
+                }
+            }
+            this.handleCtaRemoveSelected();
+        },
+        async handleCtaRemoveSelected(){
+            if (!this.isLoggedIn) {
+                this.displayLoginModal = true;
+                return;
+            }
+            this.displayConfirmModal = true;
+            const ctx = this;
+            this.confirmModal = async function () {
+                let results = [];
+                await Promise.all(
+                    ctx.selected.map(async (id) => {
+                        let parts = id.split(':');
+                        let result = await ctx.updateApproval(
+                            parts[0],
+                            parts[1],
+                            (parts[2] === '1' || parts[2] === 'true'),
+                            parseInt(parts[3]) || 0,
+                        );
+                        if(result){
+                            results.push(true);
+                        }
+                    }),
+                );
+                if(results.includes(true)){
+                    await ctx.checkChanges();
+                }
+                this.signing = false;
+                this.displayConfirmModal = false;
+            };
+        },
+        async handleCtaUpdate(spender, contractAddress, single, tokenId, current){
+            this.displayUpdateModal = true;
+            this.modalUpdateValue = current;
+            const contract  = await this.$contractManager.getContract(contractAddress);
+            this.mask = '#'.repeat(contract.properties?.decimals || 18);
+            this.confirmModalUpdate = async function(){
+                let success = await this.updateApproval(
+                    spender,
+                    contractAddress,
+                    single,
+                    tokenId ||
+                    BigNumber.from(ethers.utils.parseUnits(this.modalUpdateValue, contract.properties.decimals)),
+                );
+                if(success){
+                    await this.checkChanges();
+                }
+                this.displayUpdateModal = false;
+                this.signing = false;
+                return success;
+            };
+        },
+        modalHide(){
+            this.signing = false;
+            this.displayConfirmModal = false;
+            this.displayUpdateModal = false;
+        },
+        formatWei,
+    },
+};
+</script>
+
+<template>
+<div v-if="!isLoggedInAccount">
+    <p>{{ $t('components.approvals.login_account') }}</p>
+</div>
+<div>
+    <q-table
+        v-if="!loading"
+        v-model:pagination="pagination"
+        :rows="approvals"
+        :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="spender" :props="props">
+                    <AddressField :key="props.row.spender + 'c'" :address="props.row.spender" :truncate="18" />
+                </q-td>
+                <q-td key="amount" :props="props" >
+                    <div v-if="!this.isNFT()">
+                        <div class="flex items-center">
+                            <span
+                                v-if="parseFloat(props.row.amount)>props.row.contract.properties?.supply"
+                                key="infinite"
+                                class="flex items-center"
+                            >
+                                <q-icon name="all_inclusive" class="q-mr-xs" />
+                                <span>{{ $t('components.approvals.infinite') }}</span>
+                                <q-tooltip>{{ $t('components.approvals.infinite_tooltip') }}</q-tooltip>
+                            </span>
+                            <span v-else :key="props.row.amount">
+                                <span v-if="parseFloat(props.row.amountRaw) > 0.0001" >{{ props.row.amount }}</span>
+                                <span v-else >{{ '< 0.0001' }}</span>
+                                <q-tooltip v-if="parseFloat(props.row.amountRaw) > parseFloat(props.row.amount)">
+                                    {{ props.row.amountRaw }}
+                                </q-tooltip>
+                            </span>
+                            <span class="flex items-center">
+                                <q-icon
+                                    name="build"
+                                    size="11px"
+                                    class="q-ml-xs clickable"
+                                    @click="handleCtaUpdate(
+                                        props.row.spender,
+                                        props.row.contract.address,
+                                        props.row.single,
+                                        props.row.tokenId,
+                                        props.row.amountRaw
+                                    )"
+                                />
+                                <q-tooltip>{{ $t('components.approvals.update') }}</q-tooltip>
+                            </span>
+                        </div>
+                        <div >
+                            <small
+                                v-if="
+                                    parseFloat(props.row.amount)<=props.row.contract.properties?.supply
+                                        && props.row.usd > 0
+                                "
+                                class="text-grey"
+                            >
+                                ~{{ props.row.usd }} $
+                            </small>
+                        </div>
+                    </div>
+                    <div v-else class="flex items-center">
+                        <span v-if="props.row.single">
+                            {{ props.row.tokenId }}
+                        </span>
+                        <span v-else>
+                            {{ $t('global.all') }}
+                        </span>
+                    </div>
+                </q-td>
+                <q-td key="contract" :props="props">
+                    <AddressField
+                        :key="props.row.contract.address + 'contract'"
+                        :address="props.row.contract.address"
+                        :truncate="18"
+                    />
+                </q-td>
+                <q-td key="updated" :props="props">
+                    <DateField :epoch="props.row.updated / 1000" />
+                </q-td>
+                <q-td
+                    key="action"
+                    :props="props"
+                    @click="handleCtaClick(
+                        props.row.spender,
+                        props.row.contract.address,
+                        props.row.single,
+                        props.row.tokenId
+                    )"
+                >
+                    <span>
+                        <q-checkbox
+                            v-model="selected"
+                            :val="props.row.spender + ':' + props.row.contract.address + ':' + props.row.single + ':'
+                                + props.row.tokenId"
+                            :true-val="props.row.spender + ':' + props.row.contract.address + ':' + props.row.single
+                                + ':' + props.row.tokenId"
+                            color="primary"
+                            size="xs"
+                        />
+                        <q-tooltip v-if="selected.includes(props.row.spender + ':' + props.row.contract.address)">
+                            {{ $t('components.approvals.unselect') }}
+                        </q-tooltip>
+                        <q-tooltip v-else>{{ $t('components.approvals.select') }}</q-tooltip>
+                    </span>
+                    <span v-if="isLoggedIn">
+                        <q-icon name="delete" size="xs" class="clickable" />
+                        <q-tooltip>{{ $t('components.approvals.removal_approval') }}</q-tooltip>
+                    </span>
+                </q-td>
+            </q-tr>
+        </template>
+        <template v-if="approvals.length > 0" v-slot:bottom-row>
+            <q-tr class="text-right">
+                <q-td colspan="12">
+                    <div class="flex justify-end">
+                        <div v-if="selected.length > 0" class="flex justify-end">
+                            <div>
+                                <q-btn class="items-center q-mr-sm" color="primary" @click="toggleAll(false)">
+                                    <q-icon
+                                        name="highlight_off"
+                                        class="q-mr-xs"
+                                        size="14px"
+                                    />
+                                    <span>{{ $t('components.approvals.unselect_all').toUpperCase() }}</span>
+                                </q-btn>
+                                <q-tooltip>
+                                    {{ $t('components.approvals.unselect_all') }}
+                                </q-tooltip>
+                            </div>
+                            <div>
+                                <q-btn
+                                    class="items-center q-mr-sm"
+                                    color="negative"
+                                    @click="handleCtaRemoveSelected"
+                                >
+                                    <q-icon
+                                        v-if="!signing"
+                                        name="delete"
+                                        class="q-mr-xs"
+                                        size="14px"
+                                    />
+                                    <q-spinner v-else size="14px" class="q-mr-xs" />
+                                    <span>
+                                        {{ $t('components.approvals.delete').toUpperCase() }} {{ selected.length }}
+                                    </span>
+                                </q-btn>
+                                <q-tooltip>{{ $t('components.approvals.removal_selected_approvals') }}</q-tooltip>
+                            </div>
+                        </div>
+                        <div v-else>
+                            <q-btn
+                                class="items-center q-mr-sm"
+                                color="negative"
+                                @click="handleCtaRemoveAll"
+                            >
+                                <q-icon
+                                    v-if="!signing"
+                                    name="delete"
+                                    class="q-mr-xs"
+                                    size="14px"
+                                />
+                                <q-spinner v-else size="14px" class="q-mr-xs" />
+                                <span>{{ $t('components.approvals.delete_all').toUpperCase() }}</span>
+                            </q-btn>
+                            <q-tooltip>{{ $t('components.approvals.removal_approvals') }}</q-tooltip>
+                        </div>
+                    </div>
+                </q-td>
+            </q-tr>
+        </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="spender">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="amount">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="contract">
+                    <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-td key="action">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+            </q-tr>
+        </template>
+    </q-table>
+    <q-dialog v-model="displayUpdateModal" @hide="modalHide">
+        <q-card v-if="!signing" class="q-pa-xl">
+            <q-card-section>
+                <p class="text-h5">{{ $t('components.approvals.update') }}</p>
+                <p class="text-grey">{{ $t('components.approvals.update_description') }}</p>
+                <q-input
+                    v-if="!this.isNFT()"
+                    ref="input"
+                    v-model="modalUpdateValue"
+                    type="number"
+                    for="updateBtn"
+                    :mask="'#.' + mask"
+                    :value="modalUpdateValue"
+                    :rules="[
+                        val => (val.split('.')[1]?.length <= mask.length) || val.indexOf('.') === -1
+                            || $t('global.max_decimals_reached', {max: mask.length})
+                    ]"
+                />
+                <q-select
+                    v-else
+                    v-model="approved"
+                    :options="[true, false]"
+                    label="Approved"
+                />
+            </q-card-section>
+            <q-card-actions align="right" class="q-pb-md q-px-md">
+                <q-btn
+                    v-close-popup
+                    flat
+                    :label="$t('components.approvals.cancel')"
+                    color="negative"
+                />
+                <q-btn
+                    id="updateBtn"
+                    :disabled="!modalUpdateValue"
+                    :label="$t('global.sign')"
+                    color="primary"
+                    text-color="black"
+                    @click="this.$refs.input.validate() && this.confirmModalUpdate()"
+                />
+            </q-card-actions>
+        </q-card>
+        <q-card v-else>
+            <q-card-section class="items-center flex justify-center column">
+                <div class="text-h5 text-center">{{ $t('global.wallet_response') }}...</div>
+                <q-spinner size="xl" class="q-mt-lg" />
+            </q-card-section>
+        </q-card>
+    </q-dialog>
+    <q-dialog v-model="displayConfirmModal" @hide="modalHide">
+        <q-card v-if="!signing">
+            <q-card-section>
+                <p class="text-h5">
+                    {{ $t('components.approvals.update') }}
+                </p>
+                <p>
+                    {{ $t('components.approvals.approval_text' ) }}
+                </p>
+            </q-card-section>
+
+            <q-card-actions align="right" class="q-pb-md q-px-md">
+                <q-btn
+                    v-close-popup
+                    flat
+                    :label="$t('components.approvals.cancel')"
+                    color="negative"
+                />
+                <q-btn
+                    v-close-popup
+                    :label="$t('global.sign')"
+                    color="primary"
+                    text-color="black"
+                    @click="confirmModal()"
+                />
+            </q-card-actions>
+        </q-card>
+        <q-card v-else>
+            <q-card-section class="items-center flex justify-center column">
+                <div class="text-h5 text-center">{{ $t('global.wallet_response') }}...</div>
+                <q-spinner size="xl" class="q-mt-lg" />
+            </q-card-section>
+        </q-card>
+    </q-dialog>
+</div>
+</template>
+
+<style scoped lang="sass">
+    .body--dark .q-checkbox__bg
+        border-color: lightgray
+    .q-card
+        min-width: 320px
+        flex-grow: 1
+    .sortable
+        height: 60px
+        display: flex
+        align-items: center
+</style>
diff --git a/src/components/Token/HolderList.vue b/src/components/Token/HolderList.vue
new file mode 100644
index 000000000..76fdd1930
--- /dev/null
+++ b/src/components/Token/HolderList.vue
@@ -0,0 +1,308 @@
+<script>
+import AddressField from 'components/AddressField';
+import DateField from 'components/DateField';
+import { formatWei } from 'src/lib/utils';
+import BigDecimal from 'js-big-decimal';
+export default {
+    name: 'HolderList',
+    components: {
+        AddressField,
+        DateField,
+    },
+    props: {
+        contract: {
+            type: Object,
+            required: true,
+        },
+    },
+    created(){
+        for (var i = 1; i <= this.pagination.rowsPerPage; i++) {
+            this.loadingRows.push(i);
+        }
+    },
+    async mounted() {
+        let list = await this.$contractManager.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,
+        });
+    },
+    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);
+        }
+        return {
+            columns: columns,
+            holders: [],
+            loadingRows: [],
+            loading: true,
+            systemContractsList: '',
+            showSystemContracts: false,
+            filterBy: this.filter,
+            pagination: {
+                sortBy: 'balance',
+                descending: true,
+                page: 1,
+                rowsPerPage: 10,
+                rowsNumber: 0,
+            },
+        };
+    },
+    methods: {
+        async onRequest(props) {
+            this.loading = true;
+
+            const { page, rowsPerPage, sortBy, descending } = props.pagination;
+
+            let response = await this.$indexerApi.get(this.getPath(props));
+
+            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 = `/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%';
+            }
+            return share.getValue() + '%';
+        },
+    },
+};
+</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" />
+            </q-td>
+            <q-td key="balance" :props="props">
+                <span v-if="contract?.properties?.decimals">
+                    {{ formatWei(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(
+                                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>
+</template>
+
+<style scoped lang="sass">
+.q-table .q-toggle
+    font-size: 12px
+    position: absolute
+    bottom: 4px
+.sortable
+    height: 60px
+    display: flex
+    align-items: center
+
+@media only screen and (max-width: 764px)
+    .q-table .q-toggle
+        display: none
+
+</style>
diff --git a/src/components/Token/NFTList.vue b/src/components/Token/NFTList.vue
new file mode 100644
index 000000000..f35a9238d
--- /dev/null
+++ b/src/components/Token/NFTList.vue
@@ -0,0 +1,469 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { indexerApi } from 'src/boot/telosApi';
+import { ALLOWED_VIDEO_EXTENSIONS } from 'src/lib/utils';
+
+import AddressField from 'components/AddressField.vue';
+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();
+
+const props = defineProps({
+    address: {
+        type: String,
+        required: true,
+    },
+    filter: {
+        type: String,
+        required: false,
+        default: 'account',
+    },
+});
+
+const columns = ref<QTableProps['columns']>([]);
+const loading = ref(true);
+const showWithoutMetadata = ref(false);
+const nfts = ref<NFT[]>([]);
+const loadingRows = ref<Array<number>>([]);
+const pagination = ref({
+    sortBy: '',
+    descending: true,
+    page: 1,
+    rowsPerPage: 10,
+});
+
+watch(() => props.filter, () => {
+    setupColumns();
+});
+
+function setupColumns() {
+    columns.value = [
+        {
+            name: 'minted',
+            label: $t('components.nfts.minted'),
+            align: 'left',
+            sortable: true,
+            field: '',
+        },
+        {
+            name: 'token_id',
+            label: $t('components.token_id'),
+            align: 'left',
+            field: '',
+        },
+        {
+            name: (props.filter === 'account') ? 'contract' : 'owner',
+            label: (props.filter === 'account') ? $t('components.nfts.contract')
+                : $t('components.nfts.owner'),
+            align: 'left',
+            field: '',
+        },
+        {
+            name: 'name',
+            label: $t('components.nfts.name'),
+            align: 'left',
+            field: '',
+        },
+        {
+            name: 'minter',
+            label: $t('components.nfts.minter'),
+            align: 'left',
+            field: '',
+        },
+        {
+            name: 'amount',
+            label: $t('components.nfts.amount'),
+            align: 'left',
+            field: '',
+        },
+        {
+            name: 'attributes',
+            label: $t('components.nfts.attributes')[0].toUpperCase() +
+                $t('components.nfts.attributes').slice(1),
+            align: 'left',
+            field: '',
+        },
+        {
+            name: 'media',
+            label: $t('components.nfts.media'),
+            align: 'left',
+            field: '',
+        },
+        {
+            name: 'metadata',
+            label: $t('components.nfts.metadata'),
+            align: 'center',
+            field: '',
+        },
+    ];
+}
+
+onBeforeMount(() => {
+    for (var i = 1; i <= pagination.value.rowsPerPage; i++) {
+        loadingRows.value.push(i);
+    }
+});
+
+onMounted(async () => {
+    await onRequest();
+    setupColumns();
+});
+
+function getMedia(nft: NFT) {
+    if(
+        !nft.metadata
+                && !(nft.metadata as any)?.image
+                && !(nft.metadata as any)?.animation_url
+                && (!nft.tokenUri || nft.tokenUri.endsWith('.json'))
+    ){
+        return false;
+    }
+    let media = (nft.metadata?.animation_url && nft.metadata.animation_url.length > 0)
+        ? nft.metadata.animation_url
+        : nft.metadata?.image
+            ;
+    media = (typeof media !== 'undefined' && media) ? media : nft.metadata?.properties?.image;
+    media = (typeof media !== 'undefined' && media) ? media : nft.tokenUri;
+    if(!media){
+        return false;
+    }
+    return media;
+}
+
+function hasVideo(nft: NFT) {
+    const video = getMedia(nft);
+    let parts = [];
+    if (video){
+        parts = video?.split('.');
+    }
+    if(parts.length > 1){
+        let ext = parts[parts.length - 1].split('?')[0];
+        if(!ALLOWED_VIDEO_EXTENSIONS.includes(ext)){
+            return nft;
+        }
+        nft.metadata = (typeof nft.metadata === 'string') ? {} : nft.metadata;
+        nft.metadata.animation = video.replace('ipfs://', 'https://ipfs.io/ipfs/');
+        nft.metadata.animationExtension = ext;
+    }
+    nft.tokenUri = (nft.tokenUri) ? nft.tokenUri.replace('ipfs://', 'https://ipfs.io/ipfs/') : null;
+    return nft;
+}
+
+function isDataImage(nft: NFT) {
+    let image = getMedia(nft);
+    const regex = new RegExp(/(data:image\/[^;]+;base64[^"]+)/);
+    return regex.test(image);
+}
+
+async function onRequest() {
+    loading.value = true;
+
+    const { page, rowsPerPage, sortBy, descending } = pagination.value;
+
+    const erc721 = await indexerApi.get(getPath(NFT_TYPE.ERC721));
+    const erc1155 = await indexerApi.get(getPath(NFT_TYPE.ERC1155));
+
+    // merge erc1155 data into erc721 results
+    const response = erc721;
+    response.data.total_count += erc1155.data.total_count;
+    response.data.results = [...response.data.results, ...erc1155.data.results];
+
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+
+    let nftsArr = [];
+    for (let nft of response.data.results) {
+        nft.metadata = (nft.metadata) ? JSON.parse(nft.metadata) : nft.metadata;
+        if(nft.metadata?.image){
+            nft.metadata.image = (nft.metadata.image)
+                ? nft.metadata.image.replace('ipfs://', 'https://ipfs.io/ipfs/')
+                : false
+            ;
+        }
+        if(nft.metadata?.attributes){
+            nft.metadata.attributesStr = '';
+            for(let i = 0; i < nft.metadata.attributes.length; i++){
+                nft.metadata.attributesStr += (typeof nft.metadata.attributes[i]['trait_type'] !== 'undefined')
+                    ? nft.metadata.attributes[i]['trait_type']  + ' : '
+                    : ''
+                ;
+                nft.metadata.attributesStr += nft.metadata.attributes[i]['value'] + '\n';
+            }
+        }
+        nft = hasVideo(nft);
+        nft.tokenUri = (nft.tokenUri) ? nft.tokenUri.replace('ipfs://', 'https://ipfs.io/ipfs/') : null;
+        nftsArr.push(nft);
+    }
+    nfts.value = nftsArr;
+    loading.value = false;
+}
+
+function getPath(type: string) {
+    let queryFilter = props.filter;
+    if(!allowedFilters.includes(queryFilter)){
+        queryFilter = 'contract';
+    }
+    return `/${queryFilter}/${props.address}/nfts?type=${type}&includeAbi=true&limit=10000&forceMetadata=1&includePagination=true`;
+}
+</script>
+
+<template>
+<div :key="address">
+    <q-table
+        v-if="!loading"
+        v-model:pagination="pagination"
+        :rows="nfts"
+        :rows-per-page-label="$t('global.records_per_page')"
+        :binary-state-sort="true"
+        :row-key="row => row.contract + row.tokenId"
+        :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="props">
+            <q-tr :props="props">
+                <q-td key="minted" :props="props">
+                    <BlockField v-if="props.row.blockMinted" :block="props.row.blockMinted" />
+                </q-td>
+                <q-td key="token_id" :props="props">
+                    <span v-if="props.row.tokenId.toString().length < 8">{{ props.row.tokenId }}</span>
+                    <span  v-else>
+                        <span>{{ props.row.tokenId.substr(0, 8) + '...' }}</span>
+                        <q-tooltip>{{ props.row.tokenId }}</q-tooltip>
+                    </span>
+                </q-td>
+                <q-td v-if="filter !== 'account'" key="owner" :props="props">
+                    <AddressField :key="props.row.tokenId + 'owner'"  :address="props.row.owner" :truncate="12" />
+                </q-td>
+                <q-td v-else key="contract" :props="props">
+                    <AddressField :key="props.row.tokenId + 'contract'" :address="props.row.contract" :truncate="12" />
+                </q-td>
+                <q-td key="name" :props="props">
+                    <span v-if="props.row.metadata?.name && props.row.metadata?.name.length < 22">
+                        <span :key="props.row.tokenId + 'name'">
+                            {{ props.row.metadata?.name }}
+                        </span>
+                    </span>
+                    <span v-else-if="props.row.metadata?.name">
+                        <span :key="props.row.tokenId + 'name'">
+                            {{ props.row.metadata?.name.substring(0, 22) }}...
+                        </span>
+                        <q-tooltip>{{ props.row.metadata?.name }}</q-tooltip>
+                    </span>
+                </q-td>
+                <q-td key="minter" :props="props">
+                    <AddressField
+                        :key="props.row.tokenId + 'minter'"
+                        :address="props.row.minter ?? props.row.owner"
+                        :truncate="12"
+                    />
+                </q-td>
+                <q-td  key="amount" :props="props">
+                    x{{ props.row.amount ?? 1 }}
+                </q-td>
+                <q-td key="attributes" :props="props">
+                    <div v-if="props.row.metadata?.attributes" class="flex items-center">
+                        <q-icon name="list" size="xs" class="q-mr-xs" />
+                        <span>{{ props.row.metadata.attributes.length }}</span>
+                        <q-tooltip>
+                            <pre>{{ props.row.metadata.attributesStr }}</pre>
+                        </q-tooltip>
+                    </div>
+                </q-td>
+                <q-td key="media" :props="props">
+                    <a
+                        v-if="props.row.metadata?.animation"
+                        :href="props.row.metadata.animation"
+                        target="_blank"
+                    >
+                        <div class="overlay"></div>
+                        <q-media-player
+                            type="video"
+                            loop="loop"
+                            :autoplay="true"
+                            :show-big-play-button="false"
+                            muted="muted"
+                            big-play-button-color="purpleBright"
+                            :hideVolumeSlider="true"
+                            :noControls="true"
+                            :hideVolumeBtn="true"
+                            :hidePlayBtn="true"
+                            :hideSettingsBtn="true"
+                            :hideFullscreenBtn="true"
+                            :sources="[{
+                                type: 'video/' + props.row.metadata.animationExtension,
+                                src: props.row.metadata.animation,
+                            }]"
+                        />
+                    </a>
+                    <span
+                        v-else-if="props.row.imageCache || props.row.metadata?.image"
+                        clickable="clickable"
+                    >
+                        <a
+                            v-if="props.row.imageCache && !isDataImage(props.row)"
+                            :href="
+                                (props.row.imageCache) ? props.row.imageCache + '/1440.webp' :
+                                props.row.metadata?.image
+                            "
+                            target="_blank"
+                        >
+                            <q-img
+                                :src="props.row.imageCache + '/280.webp'"
+                                :alt="props.row.metadata?.name"
+                            />
+                        </a>
+                        <a
+                            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>
+                        <a
+                            v-else
+                            :href="props.row.metadata?.image"
+                            target="_blank"
+                        >
+                            <q-img :src="props.row.metadata?.image" :alt="props.row.metadata?.name" />
+                        </a>
+                    </span>
+                    <q-tooltip v-if="props.row?.metadata?.description">{{ props.row.metadata.description }}</q-tooltip>
+                </q-td>
+                <q-td key="metadata" :props="props">
+                    <a
+                        v-if="props.row.tokenUri && props.row.tokenUri !== '___MISSING_TOKEN_URI___'"
+                        clickable="clickable"
+                        :href="props.row.tokenUri"
+                        target="_blank"
+                    >
+                        <q-icon name="download" size="sm" />
+                        <q-tooltip v-if="props.row.tokenUri">{{ $t('components.nfts.ipfs') }}</q-tooltip>
+                    </a>
+                </q-td>
+            </q-tr>
+        </template>
+        <template v-slot:bottom-row>
+            <q-toggle
+                v-model="showWithoutMetadata"
+                :label="$t('components.nfts.show_without_metadata')"
+                :class="(nfts.length > 0) ? '' : 'right'"
+                color="primary"
+                checked-icon="visibility"
+                unchecked-icon="visibility_off"
+                @update:model-value="onRequest()"
+            />
+        </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="minted" >
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="token_id" >
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td v-if="filter !== 'account'" key="owner" >
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td v-else key="contract">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="name">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="minter">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td  key="amount">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="attributes">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="media">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="metadata">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+            </q-tr>
+        </template>
+    </q-table>
+</div>
+</template>
+
+<style scoped lang="scss">
+.q-table .q-toggle.right {
+    right: 20px;
+}
+.q-table .q-toggle {
+    font-size: 12px;
+    position: absolute;
+    bottom: 4px;
+}
+.overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 55;
+}
+.q-media {
+    justify-content: space-evenly;
+    padding: 0;
+    margin: 0;
+    z-index: 1;
+    max-width: 220px;
+    max-height: 160px;
+}
+.q-img {
+    min-width: 120px;
+}
+.sortable {
+    height: 60px;
+    display: flex;
+    align-items: center;
+}
+</style>
diff --git a/src/components/Token/TokenGridElement.vue b/src/components/Token/TokenGridElement.vue
new file mode 100644
index 000000000..a6c6fc25e
--- /dev/null
+++ b/src/components/Token/TokenGridElement.vue
@@ -0,0 +1,86 @@
+<script>
+import AddressField from 'src/components/AddressField';
+import AddToWallet from 'src/components/AddToWallet';
+
+export default {
+    name: 'TokenGridElement',
+    components: { AddressField, AddToWallet },
+    props: {
+        token: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            element: { ...this.token },
+            symbol: (this.token.symbol.length > 12) ? this.token.symbol.slice(0, 12).trim() + '...' : this.token.symbol,
+        };
+    },
+};
+</script>
+
+<template>
+<div v-if="element?.balance" class="c-token-list__token-card">
+    <q-card >
+        <q-card-section class="flex">
+            <q-avatar class="q-mr-md">
+                <img :src="element.logoURI" :alt="element.name + ' Token Logo'">
+            </q-avatar>
+            <div class="c-token-list__token-info-container">
+                <div class="text-h6 c-token-list__token-name" :title="element.name">
+                    <span v-if="element.name.length < 17">{{ this.token.name }}</span>
+                    <span v-else>
+                        <span>{{ this.token.name.slice(0, 17) }}</span>
+                        <span>...</span>
+                        <q-tooltip>{{ this.token.name }}</q-tooltip>
+                    </span>
+                </div>
+                <AddressField :address="element.address" :name="symbol" class="q-mb-sm"/>
+                <div>
+                    <div class="flex">
+                        <span v-if="element.balance === '0.0000' && element.fullBalance > 0">
+                            {{ '< 0.0001 ' + symbol }}
+                        </span>
+                        <span v-else>
+                            {{ element.balance + ' ' + symbol || $t('components.error_fetching_balance') }}
+                        </span>
+                        <q-tooltip v-if="element.fullBalance > element.balance">
+                            {{ element.fullBalance + ' ' + symbol || $t('components.error_fetching_balance') }}
+                        </q-tooltip>
+                    </div>
+                    <div class="text-grey q-mb-sm">
+                        <span v-if="element.valueUSD" >{{ element.valueUSD }} $</span>
+                        <span v-else>-</span>
+                    </div>
+                </div>
+                <AddToWallet
+                    :token="element"
+                    :icon="false"
+                    :label="$t('components.add_to_metamask', { symbol: symbol })"
+                />
+            </div>
+        </q-card-section>
+    </q-card>
+</div>
+</template>
+
+<style lang="scss">
+.c-token-list {
+    &__token-card {
+        min-width: 0;
+        .text-grey {
+            font-size: 0.8em;
+        }
+    }
+    &__token-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__token-info-container {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+}
+</style>
diff --git a/src/components/Token/TokenList.vue b/src/components/Token/TokenList.vue
new file mode 100644
index 000000000..51a179e93
--- /dev/null
+++ b/src/components/Token/TokenList.vue
@@ -0,0 +1,184 @@
+<script>
+import { markRaw } from 'vue';
+import { formatWei } from 'src/lib/utils';
+import erc20Abi from 'erc-20-abi';
+import DEFAULT_TOKEN_LOGO from 'assets/logo--teloscan.png';
+import TokenGridElement from 'src/components/Token/TokenGridElement';
+import TokenTable from 'src/components/Token/TokenTable';
+import BigDecimal from 'js-big-decimal';
+
+export default {
+    name: 'TokenList',
+    props: {
+        address: {
+            type: String,
+            required: true,
+        },
+    },
+    components: { TokenGridElement, TokenTable },
+    data() {
+        return {
+            processing: false,
+            showGrid: false,
+            tokens: false,
+            tokensOfficial: false,
+        };
+    },
+    async mounted() {
+        await this.loadTokens();
+    },
+    methods: {
+        checkTokenList(address, tokenList){
+            return tokenList.tokens.filter((token) => {
+                if(address.toLowerCase() === token.address.toLowerCase()){
+                    return markRaw(token);
+                }
+            })[0];
+        },
+        async loadTokens() {
+            if(this.tokensOfficial !== false || this.tokens !== false || this.processing || this.address === null){
+                return;
+            }
+            this.processing = true;
+            const tokenList = await this.$contractManager.getTokenList();
+            const response = await this.$indexerApi.get(`/account/${this.address}/balances?limit=1000`);
+            let tokens = [];
+            let tokensOfficial = [];
+            await Promise.all(await response.data.results.map(async (result) => {
+                let token = this.checkTokenList(result.contract.toLowerCase(), tokenList);
+                if(token){
+                    const contract = await this.$contractManager.getContract(token.address);
+                    if(!contract || !contract.supportedInterfaces.includes('erc20')){
+                        return;
+                    }
+                    token.price = contract.properties?.price || 0;
+                    token.balance = `${formatWei(result.balance, token.decimals, 4)}`;
+                    token.fullBalance = `${formatWei(result.balance, token.decimals)}`;
+                    if(token.price && parseFloat(token.price) > 0){
+                        token.valueUSD = `${Math.round((token.price * token.fullBalance) * 10000) / 10000}`;
+                        token.fullValueUSD = (token.valueUSD !== '0.0')
+                            ? new BigDecimal(token.price).multiply(new BigDecimal(token.fullBalance)).getValue()
+                            : '0'
+                        ;
+                    }
+                    if (token.logoURI && token.logoURI.startsWith('ipfs://')) {
+                        token.logoURI = `https://ipfs.io/ipfs/${token.logoURI.replace(/ipfs:\/\//, '')}`;
+                    } else if (!token.logoURI) {
+                        token.logoURI = DEFAULT_TOKEN_LOGO;
+                    }
+                    if(!contract.abi){
+                        contract.abi = erc20Abi;
+                    }
+                    tokensOfficial.push(token);
+                    return token;
+                } else if(result.contract !== '___NATIVE_CURRENCY___'){
+                    let contract = await this.$contractManager.getContract(result.contract);
+                    result.address = contract.address;
+                    result.name = contract.name;
+                    result.symbol = contract.properties?.symbol;
+                    result.decimals = contract.properties?.decimals;
+                    result.price = contract.properties?.price || 0;
+                    result.contract = contract;
+                    result.logoURI = DEFAULT_TOKEN_LOGO;
+                    result.fullBalance = `${formatWei(result.balance, result.contract.properties?.decimals)}`;
+                    result.balance = `${formatWei(result.balance, result.contract.properties?.decimals, 4)}`;
+                    tokens.push(result);
+                    return result;
+                }
+            }));
+            this.tokensOfficial = this.sortTokens(tokensOfficial, 'valueUSD');
+            this.tokens = this.sortTokens(tokens, 'balance');
+            this.processing = false;
+        },
+        sortTokens(tokens, key) {
+            if(key === 'balance'){
+                return tokens.sort((a, b) => new BigDecimal(b.fullBalance)
+                    .compareTo(new BigDecimal(a.fullBalance)));
+            } else {
+                return tokens.sort((a, b) => {
+                    if(!a.fullValueUSD && !b.fullValueUSD){
+                        return new BigDecimal(b.fullBalance).compareTo(new BigDecimal(a.fullBalance));
+                    }
+                    return new BigDecimal(b.fullValueUSD || '0')
+                        .compareTo(new BigDecimal(a.fullValueUSD || '0'));
+                });
+            }
+        },
+    },
+};
+</script>
+
+<template>
+<div v-if="!tokensOfficial || !tokens" class="row">
+    <div class="col-12 flex items-center justify-center">
+        <q-spinner size="md" class="q-mb-xl q-mt-xl" />
+    </div>
+</div>
+<div v-else-if="tokensOfficial.length === 0 && tokens?.length === 0" class="row">
+    <div class="col-12 flex items-center justify-center">
+        <q-icon class="fa fa-info-circle" size="md" />
+        <h5 class="text-center  q-mb-xl q-mt-xl q-ml-md"> {{ $t('components.no_balances_found') }}</h5>
+    </div>
+</div>
+<div v-else>
+    <div class="flex q-px-md q-mt-sm">
+        <q-toggle
+            v-model="showGrid"
+            :label="(showGrid) ? $t('global.show_table') : $t('global.show_grid')"
+            checked-icon="table_rows"
+            unchecked-icon="apps"
+            color="primary"
+        />
+    </div>
+    <div v-if="showGrid">
+        <div v-if="tokensOfficial.length > 0" class="c-token-list-container">
+            <div class="col-12 flex q-mt-md q-pl-lg">
+                <h5 class="text-left"> {{ $t('components.known_tokens') }}</h5>
+            </div>
+            <div v-if="showGrid" class="c-token-grid">
+                <TokenGridElement
+                    v-for="token in tokensOfficial"
+                    :key="token.address"
+                    :token="token"
+                />
+            </div>
+        </div>
+        <div v-if="tokens.length > 0" class="c-token-list-container">
+            <div class="col-12 flex q-mt-md q-pl-lg">
+                <h5 class="text-left"> {{ $t('components.other_tokens') }}</h5>
+            </div>
+            <div v-if="showGrid" class="c-token-grid" >
+                <TokenGridElement
+                    v-for="token in tokens"
+                    :key="token.address"
+                    :token="token"
+                />
+            </div>
+        </div>
+    </div>
+    <div v-else class="c-token-table">
+        <TokenTable :tokens="tokensOfficial.concat(tokens)" />
+    </div>
+</div>
+</template>
+
+<style lang="scss">
+.c-token-list-container h5 {
+    margin: 0;
+}
+.c-token-grid {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: repeat(1, 1fr);
+
+    padding: 24px;
+
+    @media screen and (min-width: $breakpoint-sm-min) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media screen and (min-width: $breakpoint-lg-min) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+</style>
diff --git a/src/components/Token/TokenTable.vue b/src/components/Token/TokenTable.vue
new file mode 100644
index 000000000..64b0f13c0
--- /dev/null
+++ b/src/components/Token/TokenTable.vue
@@ -0,0 +1,137 @@
+<script>
+import AddressField from 'src/components/AddressField';
+import AddToWallet from 'src/components/AddToWallet';
+
+export default {
+    name: 'TokenTable',
+    components: { AddressField, AddToWallet },
+    props: {
+        tokens: {
+            type: Array,
+            required: true,
+        },
+    },
+    data() {
+        const columns = [
+            {
+                name: 'icon',
+                label: '',
+                align: 'left',
+            },
+            {
+                name: 'name',
+                label: this.$t('global.name'),
+                align: 'left',
+            },
+            {
+                name: 'symbol',
+                label: this.$t('global.symbol'),
+                align: 'left',
+            },
+            {
+                name: 'balance',
+                label: this.$t('components.balance'),
+                align: 'left',
+            },
+            {
+                name: 'usd',
+                label: this.$t('components.usd_value'),
+                align: 'left',
+            },
+            {
+                name: 'action',
+                label: this.$t('global.action'),
+                align: 'left',
+            },
+        ];
+
+        return {
+            rows: [... this.tokens],
+            columns,
+        };
+    },
+};
+</script>
+
+<template>
+<q-table
+    :rows="rows"
+    :row-key="row => row.address"
+    :columns="columns"
+    :loading="!(rows)"
+    :rows-per-page-options="[0]"
+>
+
+    <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="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"/>
+            </q-td>
+            <q-td key="symbol" :props="props">
+                {{ props.row.symbol }}
+            </q-td>
+            <q-td key="balance" :props="props">
+                <span v-if="props.row.balance === '0.0000'">{{ '< 0.0001' }}</span>
+                <span v-else>{{ props.row.balance }}</span>
+                <q-tooltip>{{ props.row.fullBalance }}</q-tooltip>
+            </q-td>
+            <q-td key="usd" :props="props">
+                <span v-if="props.row.price > 0">
+                    <span v-if="props.row.fullBalance > 0.0001">
+                        {{ props.row.valueUSD }}$
+                    </span>
+                    <span v-else>
+                        {{ '< 0.0001 $' }}
+                    </span>
+                </span>
+                <span v-else>-</span>
+            </q-td>
+            <q-td key="action" :props="props">
+                <AddToWallet
+                    :token="props.row"
+                    :icon="true"
+                    :label="$t('components.add_to_metamask', { symbol : props.row.symbol })"
+                />
+            </q-td>
+        </q-tr>
+    </template>
+    <template v-slot:bottom>
+    </template>
+</q-table>
+</template>
+<style lang='scss' scoped>
+tbody {
+    tr {
+      td:first-child {
+        width: 50px;
+      }
+      td:last-child {
+        width: 100px;
+      }
+    }
+  }
+
+  .c-token-icon {
+    width: 32px;
+    height: auto;
+    border-radius: 100%;
+  }
+
+</style>
diff --git a/src/components/Token/TokenValueField.vue b/src/components/Token/TokenValueField.vue
new file mode 100644
index 000000000..f7fcea321
--- /dev/null
+++ b/src/components/Token/TokenValueField.vue
@@ -0,0 +1,130 @@
+<script>
+import { getIcon } from 'src/lib/token-utils';
+import { BigNumber } from 'ethers';
+import { formatWei } from 'src/lib/utils';
+export default {
+    name: 'TokenValueField',
+    props: {
+        value: {
+            type: String,
+            required: true,
+        },
+        address: {
+            type: String,
+            required: false,
+        },
+        showWei: {
+            type: Boolean,
+            required: false,
+        },
+        truncate: {
+            type: Number,
+            required: false,
+            default: 3,
+        },
+    },
+    methods: {
+        getIcon,
+        BigNumber,
+        shorten(value, decimals){
+            let valueShort = formatWei(value, decimals, this.truncate);
+            let valueRaw = formatWei(value, decimals);
+            let parts = valueRaw.split('.');
+            let compare = '0.';
+            for (let i = 0; i < this.truncate - 1; i++) {
+                compare += '0';
+            }
+            if (valueShort === (compare + '0') && parts[1]?.length > this.truncate) {
+                valueShort = '< ' + compare + '1';
+            }
+            return valueShort;
+        },
+        async getLogo(contract){
+            let logoURI = '';
+            const tokenList = await this.$contractManager.getTokenList();
+            tokenList.tokens.forEach((token) => {
+                if(token.address.toLowerCase() ===  contract.address.toLowerCase()){
+                    logoURI = token.logoURI;
+                }
+            });
+            return logoURI;
+        },
+    },
+    async mounted() {
+        this.valueRaw = this.value.toLocaleString(0, { useGrouping: false }).replace('.', '');
+        if(this.address){
+            const contract = await this.$contractManager.getContract(this.address);
+            if(contract){
+                this.valueWei = BigNumber.from(this.value);
+                this.valueShort = this.shorten(this.valueRaw, contract.properties?.decimals);
+                this.valueRaw = formatWei(this.valueRaw, contract.properties?.decimals);
+                this.name = contract.getName() || contract.properties?.name;
+                this.symbol = contract.properties?.symbol || this.name || this.address;
+                this.logo = await this.getLogo(contract);
+                return;
+            }
+        }
+        this.valueShort = formatWei(this.valueRaw, 18, this.truncate);
+        this.valueRaw = formatWei(this.valueRaw, 18);
+        this.valueWei = this.value;
+        this.symbol = 'TLOS';
+        this.logo = false;
+    },
+    data(){
+        return {
+            valueShort: this.valueShort,
+            valueRaw: this.valueRaw,
+            valueWei: this.valueWei,
+            name: null,
+            symbol: this.symbol,
+            logo: this.logo,
+            displaySwitch: this.displaySwitch,
+        };
+    },
+};
+</script>
+<template>
+<span v-if="symbol" >
+    <span v-if="!displaySwitch">
+        <span class="clickable" @click="displaySwitch = !displaySwitch">
+            <span>
+                {{ valueShort }}
+                <q-img
+                    v-if="logo !== false"
+                    class="coin-icon"
+                    :src="getIcon(logo)"
+                />
+            </span>
+            <q-tooltip v-if="!showWei">{{ $t('components.transaction.show_total') }}</q-tooltip>
+            <q-tooltip v-else >{{ $t('components.transaction.show_wei') }}</q-tooltip>
+        </span>
+        <router-link v-if="symbol !== 'TLOS'" :to="`/address/${address}`">
+            <span>{{ symbol.slice(0, 6) }}</span>
+            <span v-if="symbol.length > 6">...</span>
+            <q-tooltip>{{ name }}</q-tooltip>
+        </router-link>
+        <span v-else>TLOS</span>
+    </span>
+    <span v-else class="clickable" @click="displaySwitch = !displaySwitch">
+        <span v-if="!showWei">
+            {{ valueRaw }}
+        </span>
+        <span v-else>
+            {{ valueWei }}
+        </span>
+        <q-tooltip v-if="!showWei">{{ $t('components.transaction.show_short') }}</q-tooltip>
+        <q-tooltip v-else>{{ $t('components.transaction.show_total') }}</q-tooltip>
+    </span>
+</span>
+</template>
+
+<!--eslint-enable-->
+<style scoped lang="sass">
+    .coin-icon
+        width: 16px
+        height: 16px
+        margin-top: -6px
+        margin-right: 3px
+        vertical-align: middle
+        border-radius: 100%
+</style>
diff --git a/src/components/TokenInfo.vue b/src/components/TokenInfo.vue
new file mode 100644
index 000000000..0240ef310
--- /dev/null
+++ b/src/components/TokenInfo.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { formatWei } from 'src/antelope/wallets/utils';
+
+const { t: $t } = useI18n();
+
+defineProps({
+    contract: {
+        type: Object,
+        required: true,
+    },
+});
+
+</script>
+
+<template>
+<div>
+    <q-card class="c-token">
+        <div class="flex">
+            <div class="metrics">
+                <div class="dataCardsContainer balance">
+                    <div
+                        v-if="contract.properties?.price
+                            && parseFloat(contract.properties.price) > 0"
+                        class="dataCardItem"
+                    >
+                        <div class="dataCardTile">
+                            {{ $t('components.usd_price') }}
+                        </div>
+                        <div class="dataCardData">
+                            <span v-if="parseFloat(contract.properties.price) < 0.0001">{{ '< 0.0001 $' }}</span>
+                            <span v-else>
+                                {{
+                                    Number(parseFloat(contract.properties.price))
+                                        .toLocaleString('en-US', { minimumFractionDigits: 4 })
+                                }} $
+                            </span>
+                        </div>
+                        <q-tooltip> {{ $t('components.price_sources') }}</q-tooltip>
+                    </div>
+                    <div
+                        v-if="contract.properties?.marketcap
+                            && parseFloat(contract.properties.marketcap) > 0
+                        "
+                        class="dataCardItem"
+                    >
+                        <div class="dataCardTile">
+                            {{ $t('components.usd_marketcap') }}
+                        </div>
+                        <div class="dataCardData">
+                            <span v-if="parseFloat(contract.properties.marketcap)< 0.0001">
+                                {{ '< 0.0001 $' }}
+                            </span>
+                            <span v-else>
+                                {{ Number(parseFloat(contract.properties.marketcap))
+                                    .toLocaleString('en-US', { minimumFractionDigits: 4 })
+                                }} $
+                            </span>
+                        </div>
+                        <q-tooltip> {{ $t('components.marketcap_sources') }}</q-tooltip>
+                    </div>
+                    <div
+                        v-if="
+                            contract && contract.properties?.supply
+                                && (contract.supportedInterfaces?.includes('erc721')
+                                    || contract.supportedInterfaces?.includes('erc20'))
+                        "
+                        class="dataCardItem"
+                    >
+                        <div
+                            v-if="contract.supportedInterfaces?.includes('erc721')"
+                            :key="contract.properties.supply + contract.address"
+                        >
+                            <div class="dataCardTile text-center">
+                                {{ $t('pages.minted') }}
+                            </div>
+                            <div class="dataCardData text-center">
+                                <span>
+                                    {{ contract.properties.supply }}
+                                </span>
+                                <q-tooltip>{{ $t('pages.total_nfts_minted') }}</q-tooltip>
+                            </div>
+                        </div>
+                        <div v-else>
+                            <div class="dataCardTile text-center">
+                                {{ $t('pages.telos_supply') }}
+                            </div>
+                            <div class="dataCardData text-center">
+                                <span>
+                                    {{
+                                        Number(parseFloat(formatWei(
+                                            contract.properties.supply,
+                                            contract.properties.decimals
+                                        ))).toLocaleString('en-US', { minimumFractionDigits: 4 })
+                                    }}
+                                </span>
+                            </div>
+                            <q-tooltip>
+                                {{ Number(formatWei(
+                                    contract.properties.supply ,
+                                    contract.properties.decimals
+                                )).toLocaleString('en-US', {
+                                    minimumFractionDigits: 4,
+                                    maximumFractionDigits: contract.properties?.decimals
+                                })}}
+                            </q-tooltip>
+                        </div>
+                    </div>
+                    <div
+                        v-if="contract && contract.properties?.holders &&
+                            (contract.supportedInterfaces?.includes('erc20')
+                                || contract.supportedInterfaces?.includes('erc721'))"
+                        class="dataCardItem"
+                    >
+                        <div class="dataCardTile">
+                            {{ $t('pages.holders') }}
+                        </div>
+                        <div class="dataCardData">
+                            {{ contract.properties?.holders }}
+                        </div>
+                        <q-tooltip>{{ $t('pages.evm_holders')  }}</q-tooltip>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </q-card>
+</div>
+</template>
+
+<style lang="scss">
+.c-token{
+    height:100%;
+    box-shadow: none;
+    margin-top: 12px;
+}
+</style>
diff --git a/src/components/TokenList.vue b/src/components/TokenList.vue
deleted file mode 100644
index 873aa50a0..000000000
--- a/src/components/TokenList.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script>
-import AddressField from 'components/AddressField';
-import { promptAddToMetamask } from 'src/lib/token-utils';
-import { formatWei } from 'src/lib/utils';
-
-export default {
-    name: 'TokenList',
-    components: { AddressField },
-    props: {
-        address: {
-            type: String,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            tokens: null,
-        };
-    },
-    computed: {
-        showMetamaskPrompt() {
-            return window?.ethereum?.isMetaMask === true;
-        },
-    },
-    mounted() {
-        this.loadTokens();
-    },
-    methods: {
-        promptAddToMetamask(address, symbol, logoURI, type, decimals) {
-            promptAddToMetamask(this.$q, address, symbol, logoURI, type, decimals);
-        },
-        async loadTokens() {
-            const tokenList = await this.$contractManager.getTokenList();
-            let tokens = tokenList.tokens;
-            tokens = this.sortTokens(tokens);
-            await Promise.all(tokens.map(async (token) => {
-                if (token.logoURI && token.logoURI.startsWith('ipfs://')) {
-                    token.logoURI = `https://ipfs.io/ipfs/${token.logoURI.replace(/ipfs:\/\//, '')}`;
-                } else if (!token.logoURI) {
-                    // eslint-disable-next-line max-len
-                    token.logoURI = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT28t_CidqCQ0st_OhY3MxnPKMFjclG9ppwWA&usqp=CAU';
-                }
-
-                const contract = await this.$contractManager.getContract(token.address);
-                const contractInstance = contract.getContractInstance();
-
-                try {
-                    const balance = await contractInstance.balanceOf(this.address);
-                    token.balance = `${formatWei(balance, token.decimals, 4)}`;
-                    token.fullBalance = `${formatWei(balance, token.decimals)}`;
-                } catch (e) {
-                    throw `Failed to fetch balance:\n${e}`;
-                }
-            }));
-            this.tokens = tokens;
-        },
-        sortTokens(tokens) {
-            return tokens.sort((a, b) => {
-                if (a.symbol === 'WTLOS') {
-                    return -1;
-                }
-
-                if (b.symbol === 'WTLOS') {
-                    return 1;
-                }
-
-                if (a.tags.includes('stablecoin') && !b.tags.includes('stablecoin')) {
-                    return -1;
-                }
-
-                if (!a.tags.includes('stablecoin') && b.tags.includes('stablecoin')) {
-                    return 1;
-                }
-
-                if (a.tags.includes('telosevm') && !b.tags.includes('telosevm')) {
-                    return 1;
-                }
-
-                if (!a.tags.includes('telosevm') && b.tags.includes('telosevm')) {
-                    return -1;
-                }
-
-                return a.symbol > b.symbol ? 1 : -1;
-            });
-        },
-    },
-};
-</script>
-
-<template>
-<div class="c-token-list">
-    <div
-        v-for="{ name, logoURI, address, balance, symbol, fullBalance, type, decimals } in tokens"
-        :key="address"
-        class="c-token-list__token-card"
-    >
-        <q-card>
-            <q-card-section class="u-flex--center-y">
-                <q-avatar class="q-mr-md">
-                    <img :src="logoURI" alt="Token Logo">
-                </q-avatar>
-                <div class="c-token-list__token-info-container">
-                    <div class="text-h6 c-token-list__token-name" :title="name">
-                        {{ name }}
-                    </div>
-                    <AddressField :address="address" class="q-mb-sm"/>
-                    <div class="q-mb-sm">
-                        <span class="q-pr-xs">
-                            {{ $t('components.balance') }}
-                        </span>
-                        <span v-if="balance === '0.0000'">
-                            {{ '< 0.0001 ' + symbol }}
-                        </span>
-                        <span v-else>
-                            {{ balance + ' ' + symbol || $t('components.error_fetching_balance') }}
-                        </span>
-                        <q-tooltip v-if="fullBalance > balance">
-                            {{ fullBalance + ' ' + symbol || $t('components.error_fetching_balance') }}
-                        </q-tooltip>
-                    </div>
-                    <span
-                        v-if="showMetamaskPrompt"
-                        class="c-token-list__metamask-prompt"
-                        tabindex="0"
-                        :aria-label="$t('components.launch_metamask_dialog_to_add', { symbol })"
-                        @click="promptAddToMetamask(address, symbol, logoURI, type, decimals)"
-                    >
-                        {{ $t('components.add_to_metamask', { symbol }) }}
-                    </span>
-                </div>
-            </q-card-section>
-        </q-card>
-    </div>
-</div>
-</template>
-
-<style lang="scss">
-.c-token-list {
-    display: grid;
-    gap: 12px;
-    grid-template-columns: repeat(1, 1fr);
-
-    padding: 24px;
-
-    @media screen and (min-width: $breakpoint-sm-min) {
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    @media screen and (min-width: $breakpoint-lg-min) {
-        grid-template-columns: repeat(3, 1fr);
-    }
-
-    &__token-card {
-        min-width: 0;
-    }
-
-    &__token-name {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    &__token-info-container {
-        overflow: hidden;
-        white-space: nowrap;
-    }
-
-    &__metamask-prompt {
-        color: $secondary;
-        cursor: pointer ;
-    }
-}
-</style>
diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
new file mode 100644
index 000000000..a19869678
--- /dev/null
+++ b/src/components/ToolTip.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps({
+    content: {
+        type: String,
+        required: true,
+    },
+});
+</script>
+
+<template>
+<q-tooltip class="c-tooltip">
+    <pre class="c-tooltip__content">{{ content }}</pre>
+</q-tooltip>
+</template>
+
+<style lang="scss">
+.c-tooltip {
+    word-break: break-all;
+    max-height: 100% !important;
+
+    &__content {
+        font-family: "silkaregular", sans-serif;
+        white-space: pre-wrap;
+        word-break: break-all;
+        font-size: 0.75em;
+    }
+}
+</style>
diff --git a/src/components/Transaction/ApprovalList.vue b/src/components/Transaction/ApprovalList.vue
new file mode 100644
index 000000000..72d831d58
--- /dev/null
+++ b/src/components/Transaction/ApprovalList.vue
@@ -0,0 +1,204 @@
+<script>
+import AddressField from 'components/AddressField';
+import TokenValueField from 'components/Token/TokenValueField';
+import { formatWei } from 'src/lib/utils';
+import { BigNumber } from 'ethers';
+import BigDecimal from 'js-big-decimal';
+import { getIcon } from 'src/lib/token-utils';
+import { APPROVAL_SIGNATURES, ERC_APPROVAL_SIGNATURE } from 'src/lib/abi/signature/approval_signatures';
+
+const INFINITE = BigNumber.from('115792089237316195423570985008687907853269984665640560039451964907916451577029');
+
+export default {
+    name: 'ApprovalList',
+    components: {
+        AddressField,
+        TokenValueField,
+    },
+    props: {
+        logs: {
+            type: Array,
+            required: true,
+        },
+        expanded: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    methods: {
+        formatWei,
+        getIcon,
+        async expand(){
+            this.isExpanded = true;
+            this.pApprovals = await this.loadApprovals();
+        },
+        isInfiniteApproval(log, contract){
+            let amount = BigNumber.from(log.data);
+            let infinite = (amount.gte(INFINITE));
+            if(!infinite && contract.properties?.supply){
+                let fAmount = new BigDecimal(
+                    formatWei(amount, contract.properties.decimals, contract.properties.decimals),
+                );
+                let supply = new BigDecimal(contract.properties.supply);
+                infinite = (fAmount.compareTo(supply) > -1);
+            }
+            return infinite;
+        },
+        async loadApprovals() {
+            let approvals = [];
+            for (const log of this.logs) {
+                let sig = log.topics[0].substr(0, 10);
+                if (APPROVAL_SIGNATURES.includes(sig)) {
+                    let contract = await this.$contractManager.getContract(log.address);
+                    if (!contract || contract.supportedInterfaces === null) {
+                        continue;
+                    }
+                    if(approvals.length >= 10 && this.isExpanded === false){
+                        this.more = true;
+                        break;
+                    }
+                    let spender = '0x' + log.topics[2].substr(log.topics[2].length - 40, 40);
+                    if (sig === ERC_APPROVAL_SIGNATURE) {
+                        if(contract.supportedInterfaces.includes('erc20')){
+                            let infinite = this.isInfiniteApproval(log, contract);
+                            approvals.push({
+                                amount: BigNumber.from(log.data).toString(),
+                                infinite: infinite,
+                                token: contract,
+                                spender: spender,
+                            });
+                        } else if(contract.supportedInterfaces.includes('erc721')){
+                            approvals.push({
+                                tokenId: BigNumber.from(log.topics[3]).toString(),
+                                token: contract,
+                                spender: spender,
+                            });
+                        }
+                    } else {
+                        approvals.push({
+                            token: contract,
+                            spender: spender,
+                        });
+                    }
+                }
+
+            }
+
+            this.isLoading = false;
+            return approvals;
+        },
+    },
+
+    async mounted() {
+        this.pApprovals = await this.loadApprovals();
+    },
+    data() {
+        return {
+            pApprovals: [],
+            isExpanded: this.expanded,
+            more: false,
+            isLoading: true,
+        };
+    },
+};
+</script>
+
+<template>
+<div v-if="pApprovals?.length > 0" class="fit row wrap justify-start items-start content-start q-pb-md q-mb-xs">
+    <div  class="col-3">
+        <strong>
+            <span>{{ $t('components.approvals.approvals_granted_title') }}</span>
+        </strong>
+    </div>
+    <div class="col-9 erc-approvals">
+        <div
+            v-for="(approval, index) in pApprovals"
+            :key="'erca' + index"
+            class="fit row wrap justify-start items-start content-start"
+        >
+            <div class="col-4 flex">
+                <q-icon class="list-arrow" name="arrow_right" />
+                <strong class="q-pr-sm">{{ $t('components.approvals.spender') }} :</strong>
+                <AddressField :address="approval.spender" :truncate="18" />
+            </div>
+            <div v-if="approval.amount && !approval.infinite" class="col-6 flex">
+                <strong class="q-pr-sm">{{ $t('components.approvals.amount') }} :</strong>
+                <TokenValueField
+                    :value="approval.amount"
+                    :showWei="true"
+                    :address="approval.token.address"
+                    :truncate="6"
+                />
+            </div>
+            <div v-else-if="approval.amount && approval.infinite" class="col-6 flex items-center">
+                <strong class="q-pr-sm">{{ $t('components.approvals.amount') }} : </strong>
+                <span class="flex items-center">
+                    <q-icon name="all_inclusive" class="q-mr-xs" />
+                    <span class="q-mr-xs">{{ $t('components.approvals.infinite') }} </span>
+                </span>
+                <q-tooltip>{{ $t('components.approvals.infinite_tooltip') }}</q-tooltip>
+                <span><AddressField :address="approval.token.address" :truncate="18" /></span>
+            </div>
+            <div v-else-if="approval.tokenId" class="col-6 flex">
+                <strong class="q-pr-sm">{{ $t('components.token') }} :</strong>
+                <AddressField :address="approval.token.address" :truncate="16" />
+                <span class="q-pl-xs">#{{ approval.tokenId }}</span>
+            </div>
+            <div v-else class="col-6 flex items-center">
+                <strong class="q-pr-sm">{{ $t('components.token') }} :</strong>
+                <q-icon name="all_inclusive" class="q-mr-xs" />
+                <AddressField :address="approval.token.address" :truncate="16" />
+            </div>
+        </div>
+    </div>
+</div>
+<div v-else-if="isLoading" class="fit row wrap justify-center items-center q-mt-sm q-pb-md q-mb-xs">
+    <div class="col-3"></div>
+    <div class="col-9 justify-center flex">
+        <q-spinner size="1.5em" class="q-mr-xs"/>
+        <span>{{ $t('pages.loading_approvals') }}</span>
+    </div>
+</div>
+</template>
+
+<!--eslint-enable-->
+<style scoped lang="sass">
+.body--dark .expand-btn
+    color: rgba(255, 255, 255, 0.6)
+.expand-btn
+    position: relative
+    margin-top: 4px
+    cursor: pointer
+    color: rgba(0, 0, 0, 0.6)
+.body--dark .expand-btn .flex
+    background: var(--q-dark)
+.expand-btn .flex
+    background: white
+    padding-right: 5px
+    z-index: 2
+.erc-approvals
+    .row
+        .col-5
+            strong
+                margin-right: 3px
+
+@media (max-width: 1024px)
+    .row
+        .col-3
+            width: 100%
+    .erc-approvals
+        .row
+            .col-3, .col-9, .col-5
+                width: 100%
+                padding-left: 0px
+            .col-5
+                padding-top: 2px
+            .col-3, .col-5
+                padding-left: 15px
+            .col-4
+                padding-top: 10px
+                width: 100%
+            .col-9
+                padding-left: 10px
+</style>
diff --git a/src/components/Transaction/ERCTransferList.vue b/src/components/Transaction/ERCTransferList.vue
index cc89d4d5c..8880ac564 100644
--- a/src/components/Transaction/ERCTransferList.vue
+++ b/src/components/Transaction/ERCTransferList.vue
@@ -1,168 +1,264 @@
-<script>
-import AddressField from 'components/AddressField';
-import { formatWei } from 'src/lib/utils';
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { PropType, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import { BigNumber } from 'ethers';
 
-export default {
-    name: 'ERCTransfersList',
-    components: {
-        AddressField,
-    },
-    props: {
-        type: {
-            type: String,
-            required: true,
-        },
-        transfers: {
-            type: Array,
-            required: true,
-        },
-        trxFrom: {
-            type: String,
-            required: false,
-        },
-        contract: {
-            type: Object,
-            required: true,
-        },
+import { EvmTransactionLog  } from 'antelope/types/EvmTransaction';
+import AddressField from 'components/AddressField.vue';
+import { ERCTransfer, ERC721Transfer, ERC1155Transfer, ERC20Transfer, TokenBasicData } from 'src/types';
+import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
+
+import { contractManager } from 'src/boot/telosApi';
+import { TRANSFER_SIGNATURES } from 'src/antelope/types';
+
+const $q = useQuasar();
+const { t: $t } = useI18n();
+const locale = useI18n().locale.value;
+
+const props = defineProps({
+    logs: {
+        type: Array as PropType<ERCTransfer[]>,
+        required: false,
+        default: () => [],
     },
-    methods: {
-        formatWei,
+    type: {
+        type: String,
+        required: false,
+        default: 'erc20',
     },
-    data() {
-        return {
-            BigNumber: BigNumber,
-        };
+    highlightAddress: {
+        type: String,
+        required: false,
+        default: '',
     },
+});
+
+const emit = defineEmits(['highlight']);
+
+const erc721_transfers  = ref<ERC721Transfer[]>([]);
+const erc1155_transfers = ref<ERC1155Transfer[]>([]);
+const erc20_transfers   = ref<ERC20Transfer[]>([]);
+
+const loadTransfers = async () => {
+    if (!props.logs || props.logs.length === 0) {
+        return;
+    }
+
+    const logs = props.logs as EvmTransactionLog[];
+
+    for (const log of logs) {
+        // ERC20, ERC721 & ERC1155 transfers (ERC721 & ERC20 have same first topic but ERC20 has 4 topics for
+        // transfers, ERC20 has 3 log topics, ERC1155 has a different first topic)
+        let sig = log.topics[0].substring(0, 10);
+        if (TRANSFER_SIGNATURES.includes(sig)) {
+            let type = contractManager.getTokenTypeFromLog(log);
+            let contract = await contractManager.getContract(log.address, type);
+            if (typeof contract.properties !== 'undefined' && contract.properties !== null) {
+                let token: TokenBasicData = {
+                    'symbol': contract.properties.symbol,
+                    'address': log.address,
+                    'name': contract.properties.name,
+                    'decimals': contract.properties.decimals,
+                };
+                if (type === 'erc721') {
+                    console.error('NOT IMPLEMENTED: ERC721 transfers');
+                    let tokenId = BigNumber.from(log.topics[3]).toString();
+                    if (contract.token.extensions?.metadata) {
+                        try {
+                            token = await contractManager.loadTokenMetadata(
+                                log.address,
+                                contract.token,
+                                tokenId,
+                            );
+                        } catch (e: any) {
+                            console.error(`Could not retreive metadata for ${contract.address}: ${e.message}`);
+                            // notify the user
+                            $q.notify({
+                                message: $t(
+                                    'pages.couldnt_retreive_metadata_for_address',
+                                    { address: contract.address, message: e.message },
+                                ),
+                                color: 'negative',
+                                position: 'top',
+                                timeout: 5000,
+                            });
+                        }
+                    }
+                    erc721_transfers.value.push({
+                        'tokenId': tokenId,
+                        'to': '0x' + log.topics[2].substring(log.topics[2].length - 40, 40),
+                        'from': '0x' + log.topics[1].substring(log.topics[1].length - 40, 40),
+                        'token': token,
+                    });
+                } else if (type === 'erc1155') {
+                    console.error('NOT IMPLEMENTED: ERC1155 transfers');
+                    let tokenId = BigNumber.from(log.data.substring(0, 66)).toString();
+                    if (contract.token.extensions?.metadata) {
+                        try {
+                            token = await contractManager.loadTokenMetadata(
+                                log.address,
+                                contract.token,
+                                tokenId,
+                            );
+                        } catch (e: any) {
+                            console.error(`Could not retreive metadata for ${contract.address}: ${e.message}`);
+                            // notify the user
+                            $q.notify({
+                                message: $t(
+                                    'pages.couldnt_retreive_metadata_for_address',
+                                    { address: contract.address, message: e.message },
+                                ),
+                                color: 'negative',
+                                position: 'top',
+                                timeout: 5000,
+                            });
+                        }
+                    }
+                    erc1155_transfers.value.push({
+                        'tokenId': tokenId,
+                        'amount': BigNumber.from(log.data).toString(),
+                        'to': '0x' + log.topics[3].substring(log.topics[3].length - 40, 40),
+                        'from': '0x' + log.topics[2].substring(log.topics[2].length - 40, 40),
+                        'token': token,
+                    });
+                } else {
+
+                    erc20_transfers.value.push({
+                        'value': log.data,
+                        'wei': BigNumber.from(log.data).toString(),
+                        'from': '0x' + log.topics[1].substring(log.topics[1].length - 40),
+                        'to': '0x' + log.topics[2].substring(log.topics[2].length - 40),
+                        'token': token,
+                    });
+                }
+            }
+        }
+    }
 };
+
+function setHighlightAddress(val: string) {
+    emit('highlight', val);
+}
+
+const getValueDisplay = (value: string, symbol: string, decimals: number) =>
+    prettyPrintCurrency(
+        BigNumber.from(value),
+        4,
+        locale,
+        false,
+        symbol,
+        false,
+        decimals,
+        false,
+    );
+
+watch(() => props.logs, async (newTrx) => {
+    if (newTrx) {
+        await loadTransfers();
+    }
+}, { immediate: true });
+
+
 </script>
 
+
 <template>
-<div class="fit row wrap justify-start items-start content-start">
-    <div class="col-3"><strong>{{ type + ` transfers: ` }}</strong></div>
-    <div id="erc-transfers" class="col-9">
-        <div
-            v-for="(transfer, index) in transfers"
-            :key="index"
-            class="fit row wrap justify-start items-start content-start"
-        >
-            <div class="col-4">
-                <q-icon class="list-arrow" name="arrow_right"/>
-                <strong>
-                    {{ $t('components.transaction.form_from') }}
-                </strong>
-                <AddressField
-                    :highlight="trxFrom === transfer.from && transfers.length > 1"
-                    :address="transfer.from"
-                    :truncate="15"
-                    copy
-                    :name="contract && transfer.from === contract.address && contract.name ?  contract.name : null"
-                />
-            </div>
-            <div class="col-3">
-                <strong>{{ $t('components.transaction.form_to') }}</strong>
-                <AddressField
-                    :highlight="trxFrom === transfer.to && transfers.length > 1"
-                    :address="transfer.to"
-                    :truncate="15"
-                    copy
-                    :name="contract && transfer.to === contract.address && contract.name ?  contract.name : null"
-                />
-            </div>
-            <div v-if="type === 'ERC721' || type==='ERC1155'" class="flex col-4">
-                <strong class="col-2">
-                    {{ $t('components.transaction.form_token') }}
-                </strong>
-                <router-link class="q-ml-xs" :to="'/address/' + transfer.token.address">
-                    {{ transfer.token.symbol }}
-                </router-link>
-                <div class="col">
-                    <span v-if="transfer.tokenId.length > 15">
-                        <span class="word-break q-pl-xs">
-                            {{ ' #' + transfer.tokenId.slice(0, 15) + '...' }}
-                            <q-tooltip>{{ '#' + transfer.tokenId }}</q-tooltip>
-                        </span>
-                    </span>
-                    <span v-else>
-                        <span class="word-break q-pl-xs">
-                            {{ ' #' + transfer.tokenId }}
-                        </span>
-                    </span>
-                    <span v-if="type==='ERC1155'">
-                        <a clickable="clickable" :href="'/address/' + transfer.token.address" target="_blank">
-                            <q-tooltip>{{ $t('components.transaction.consult_collection') }}</q-tooltip>
-                        </a>
-                    </span>
-                    <span v-if="transfer.token.metadata" class="word-break">
-                        <span>
-                            <a clickable="clickable" :href="transfer.token.metadata" target="_blank">
-                                <q-icon class="q-pb-sm q-ml-xs" name="description" size="14px"/>
-                            </a>
-                            <q-tooltip>{{ $t('components.transaction.consult_metadata') }}</q-tooltip>
-                        </span>
-                        <span>
-                            <a
-                                v-if="transfer.token.image"
-                                class="q-pl-xs"
-                                clickable="clickable"
-                                :href="transfer.token.image"
-                                target="_blank"
-                            >
-                                <q-icon class="q-pb-sm q-ml-xs" name="image" size="14px"/>
-                            </a>
-                            <q-tooltip>{{ $t('components.transaction.consult_media') }}</q-tooltip>
-                        </span>
-                    </span>
-                </div>
-            </div>
-            <div v-else class="col-5">
-                <strong>{{ $t('components.transaction.form_token') }}</strong>
-                <span class="clickable" @click="transfer.showWei = !transfer.showWei">
-                    <span v-if="transfer.showWei">{{ BigNumber.from(transfer.value) }}
-                        <q-tooltip>{{ $t('components.transaction.show_total') }}</q-tooltip>
-                    </span>
-                    <span v-else>
-                        {{ formatWei(transfer.value, transfer.token.decimals) }}
-                        <q-tooltip>{{ $t('components.transaction.show_wei') }}</q-tooltip>
-                    </span>
-                </span>
-                <router-link class="q-ml-xs" :to="`/address/${transfer.token.address}`">
-                    <span>
-                        <span>{{ transfer.token.symbol.slice(0, 10) }}</span>
-                        <span v-if="transfer.token.symbol.length > 10">...</span>
-                    </span>
-                    <q-tooltip v-if="transfer.token.symbol.length > 10">{{ transfer.token.symbol }}</q-tooltip>
-                </router-link>
-            </div>
+<div class="c-erc-transfers">
+    <div
+        v-for="(transfer, index) in erc20_transfers"
+        :key="index"
+        class="c-erc-transfers__row"
+    >
+        <q-icon class="c-erc-transfers__icon list-arrow" name="arrow_right"/>
+        <div class="c-erc-transfers__cell c-erc-transfers__cell--a">
+            <strong> {{ $t('components.transaction.from') }} </strong>
+            <AddressField
+                copy
+                :address="transfer.from"
+                :truncate="15"
+                :highlightAddress="props.highlightAddress"
+                @highlight="setHighlightAddress"
+            />
+        </div>
+        <div class="c-erc-transfers__cell c-erc-transfers__cell--b">
+            <strong>{{ $t('components.transaction.to') }}</strong>
+            <AddressField
+                copy
+                :address="transfer.to"
+                :truncate="15"
+                :highlightAddress="props.highlightAddress"
+                @highlight="setHighlightAddress"
+            />
+        </div>
+        <div class="c-erc-transfers__cell c-erc-transfers__cell--c">
+            <strong>{{ $t('components.nfts.amount') }}</strong>
+            <span>{{ getValueDisplay(transfer.value, '', transfer.token.decimals ) }}</span>
+            <AddressField
+                :address="transfer.token.address"
+                :truncate="15"
+                :highlightAddress="props.highlightAddress"
+                @highlight="setHighlightAddress"
+            />
         </div>
     </div>
 </div>
-<br>
 </template>
 
-<!--eslint-enable-->
-<style scoped lang="sass">
-@media (max-width: $breakpoint-sm-max)
-    #erc-transfers
-        .row
-            display: block
-            margin-bottom: 10px
-            .col-4
-                display: block
-                width: 100%
-        .list-arrow
-            display: none
-
-@media screen and (max-width: 650px)
-    .row
-        .col-9
-            padding-left: 20px
-
-@media screen and (max-width: 420px)
-    .row
-        .col-3, .col-9
-            width: 100%
-            padding-left: 0px
-        .col-9
-            padding-top: 10px
+<style lang="scss">
+.c-erc-transfers {
+    max-height: 200px;
+    overflow-y: auto;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    @include scroll-bar;
+
+    &__row {
+        margin-bottom: 10px;
+        grid-template-rows: auto;
+        grid-auto-columns: 19px 1fr;
+        grid-template:
+            'icon a'
+            'icon b'
+            'icon c';
+        display: grid;
+    }
+
+    &__icon {
+        grid-area: icon;
+    }
+    &__cell {
+        display: flex;
+        gap: 5px;
+        &--a {
+            grid-area: a;
+        }
+        &--b {
+            grid-area: b;
+        }
+        &--c {
+            grid-area: c;
+        }
+    }
+
+    @media screen and (min-width: $breakpoint-sm-min) {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        overflow-x: hidden;
+        &__row {
+            display: flex;
+            gap: 5px;
+            align-items: baseline;
+        }
+        &__cell {
+            display: flex;
+            gap: 5px;
+            align-items: flex-start;
+        }
+    }
+}
+
 </style>
diff --git a/src/components/Transaction/FragmentList.vue b/src/components/Transaction/FragmentList.vue
index 7ea7b08db..aa00465fe 100644
--- a/src/components/Transaction/FragmentList.vue
+++ b/src/components/Transaction/FragmentList.vue
@@ -14,11 +14,15 @@ export default {
             type: Array,
             required: true,
         },
+        transactionFrom: {
+            type: String,
+            required: false,
+        },
     },
 };
 </script>
 <template>
-<div :key="parsedFragments.length == fragments.length" class="q-pa-md">
+<div :key="parsedFragments.length === fragments.length" class="q-pa-md">
     <div class="row">
         <div class="col-12">
             <FragmentListElement
@@ -26,6 +30,7 @@ export default {
                 :key="'ltr' + (parsedFragments[i]) ? '1' : '0' + i"
                 :rawFragment="fragment"
                 :fragment="parsedFragments[i]"
+                :transactionFrom="transactionFrom"
             />
         </div>
         <div v-if="fragments.length !== parsedFragments.length" class="col-12 u-flex--center">
diff --git a/src/components/Transaction/FragmentListElement.vue b/src/components/Transaction/FragmentListElement.vue
index c139fd098..2c9a72798 100644
--- a/src/components/Transaction/FragmentListElement.vue
+++ b/src/components/Transaction/FragmentListElement.vue
@@ -1,5 +1,7 @@
 <script>
-import JsonViewer from 'vue-json-viewer';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
+import ParameterList from 'components/Transaction/ParameterList';
 import AddressField from 'components/AddressField';
 import { formatWei } from 'src/lib/utils';
 import { BigNumber } from 'ethers';
@@ -8,7 +10,8 @@ export default {
     name: 'FragmentListElement',
     components: {
         AddressField,
-        JsonViewer,
+        VueJsonPretty,
+        ParameterList,
     },
     props: {
         fragment: {
@@ -19,11 +22,16 @@ export default {
             type: Object,
             required: true,
         },
+        transactionFrom: {
+            type: String,
+            required: false,
+        },
     },
     data(){
         return {
             showWei: false,
-            expanded: false,
+            address: null,
+            name: null,
             expanded_parameters: [],
         };
     },
@@ -31,6 +39,10 @@ export default {
         if(!this.fragment) {
             return;
         }
+        this.address = (this.fragment.contract) ? this.fragment.contract.address : this.fragment.address;
+        if(this.address){
+            this.address = (this.address.startsWith('0x')) ? this.address : '0x' + this.address;
+        }
         let inputs = this.fragment.eventFragment ? this.fragment.eventFragment.inputs : this.fragment.inputs;
         if(inputs){
             for(let i=0; i < inputs.length;i++){
@@ -51,199 +63,164 @@ export default {
             if(typeof this.fragment.depth === 'undefined') {
                 return;
             }
-            return { marginLeft: ((this.fragment.depth * 20)  + 20) + 'px' };
+            return { marginLeft: (this.fragment.depth * 20)  + 'px' };
         },
         inputs(){
             return this.fragment.eventFragment ? this.fragment.eventFragment.inputs : this.fragment.inputs;
         },
-        fragmentClass(){
-            let fragmentClass = 'c-fragment-list-element__head justify-between items-center';
-            return (this.isExpandable) ? fragmentClass + ' clickable' : fragmentClass;
+        params(){
+            let args = [];
+            this.inputs?.forEach((input, i) => {
+                args.push({
+                    name: input.name,
+                    type: input.type,
+                    arrayChildren: (input.arrayChildren !== null) ? input.arrayChildren.type : false,
+                    value:  this.fragment.args[i],
+                });
+            });
+            return args;
         },
         isExpandable(){
             return (
+                this.fragment.error ||
                 this.fragment.inputs && this.fragment.inputs.length > 0 ||
-                this.fragment.value ||
+                this.fragment.value && this.fragment.value !== '0.0' ||
                 !this.fragment.name
             );
         },
-        arrowIcon() {
-            if(!this.isExpandable) {
-                return '';
-            }
-            return this.expanded ? 'arrow_drop_down' : 'arrow_right';
-        },
     },
 };
 </script>
 
 <template>
 <div v-if="fragment" class="c-fragment-list-element" :style="depthStyle"  >
-    <div :class="fragmentClass" @click="expanded = !expanded">
-        <span class="row items-center">
-            <q-icon :name="arrowIcon" size="sm" />
-            <strong v-if="fragment?.name">
-                {{ fragment.name }}
-            </strong>
-            <strong v-else>
-                {{ $t('components.transaction.unknown') }} ({{ fragment.sig }})
-            </strong>
-        </span>
-        <small v-if="fragment.contract">
-            <AddressField
-                :address="
-                    (fragment.contract.address[0] === '0' && fragment.contract.address[1] === 'x') ?
-                        fragment.contract.address :
-                        '0x' + fragment.contract.address
-                "
-                :truncate="15"
-                class="word-break"
-                :name="fragment.contract.name"
-                :copy="true"
-            />
-        </small>
-    </div>
-    <div v-if="expanded" class="q-pl-md">
-        <div v-if="fragment?.name" :key="fragment.name">
-            <div
-                v-for="(param, index) in inputs"
-                :key="`fragment-${index}`"
-                class="fit row justify-start items-start content-start"
-            >
-                <div class="col-4">
-                    <template v-if="param.name">
-                        {{ param.name }} ({{ param.type }}):
-                    </template>
-
-                    <template v-else>
-                        {{ param.type }}:
-                    </template>
+    <q-expansion-item
+        :disable="!isExpandable"
+        class="shadow-1 q-mb-md"
+    >
+        <template v-slot:header>
+            <div class="flex items-center justify-between">
+                <div class="flex items-center col-shrink">
+                    <strong v-if="fragment.name">
+                        <span v-if="fragment.name.length > 190">{{ fragment.name.substring(0, 190) }}...</span>
+                        <span v-else>{{ fragment.name }}</span>
+                    </strong>
+                    <strong v-else>
+                        {{ $t('components.transaction.unknown') }} ({{ fragment?.sig }})
+                    </strong>
+                    <strong v-if="fragment.error" class="q-ml-xs">
+                        {{ ' - ' + $t('global.error') }}
+                    </strong>
+                    <q-icon
+                        v-if="fragment.error"
+                        name="warning"
+                        color="negative"
+                        class="q-ml-xs"
+                    />
                 </div>
-
-                <div class="col-8">
-                    <AddressField
-                        v-if="param.type === 'address'"
-                        :address="fragment.args[index]"
-                        :truncate="0"
-                        class="word-break"
-                        :copy="true"
+                <div>
+                    <small>
+                        <AddressField
+                            v-if="address"
+                            :address="address"
+                            :truncate="15"
+                            class="word-break"
+                            :name="fragment.contract?.name"
+                            @click.stop=""
+                        />
+                    </small>
+                </div>
+            </div>
+        </template>
+        <q-card class="q-pl-md q-pr-md">
+            <q-card-section
+                v-if="this.fragment?.error"
+                class="q-pa-sm"
+            >
+                <div class="negative q-pa-md flex align-center q-mb-sm rounded-borders q-mt-sm">
+                    <q-icon
+                        name="warning"
+                        color="negative"
+                        class="q-mr-xs"
+                        size="1.4em"
                     />
-                    <div v-else-if="param.type === 'uint256' || param.type === 'uint128'"  class="word-break">
-                        <div v-if="fragment.isTransfer && fragment.token">
-                            <div
-                                v-if="!fragment.token.type || fragment.token.type === 'erc20'"
-                                class="clickable"
-                                @click="showWei = !showWei"
-                            >
-                                <span v-if="!showWei">
-                                    <span> {{ formatWei(fragment.args[index], fragment.token.decimals) }}</span>
-                                    <q-tooltip>Show wei</q-tooltip>
-                                    <AddressField
-                                        :address="fragment.token.address"
-                                        :truncate="0"
-                                        :name="fragment.token.symbol"
-                                        class="word-break q-ml-xs"
-                                    />
-                                </span>
-                                <span v-else>
-                                    {{ fragment.args[index] }}
-                                </span>
+                    <span class="text-negative">{{ fragment?.error }}</span>
+                </div>
+            </q-card-section>
+            <q-card-section v-if="fragment.name" :key="this.fragment.name">
+                <ParameterList :params="params" :trxFrom="transactionFrom" :contract="fragment.contract" />
+                <div v-if="fragment.value && fragment.value !== 0">
+                    <div v-if="fragment.isTransferETH" >
+                        <div class="fit row justify-start items-start content-start">
+                            <div class="col-4">
+                                <q-icon class="list-arrow" name="arrow_right"/>
+                                <span>{{ $t('pages.from').toLowerCase() }}</span>
                             </div>
-                            <div v-else>
+                            <div class="col-8">
                                 <AddressField
-                                    v-if="fragment.token.symbol"
-                                    :address="fragment.token.address"
+                                    :address="fragment.from"
                                     :truncate="0"
-                                    :name="fragment.token.symbol"
+                                    :copy="true"
                                     class="word-break"
                                 />
-                                <span v-if="fragment.token.symbol"> #</span>
-                                <span> {{ fragment.args[index] }}</span>
                             </div>
                         </div>
-                        <div v-else class="word-break">
-                            {{ fragment.args[index] }}
-                        </div>
-                    </div>
-                    <div v-else-if="param.type === 'tuple'" v-on:click.stop="toggle(index, 'expanded')">
-                        <div>[ </div>
-                        <div
-                            v-for="(i) in fragment.args[index].length - 1"
-                            :key="param.type + i"
-                            :class="
-                                (expanded_parameters[index]['expanded']) ?
-                                    'q-pl-xl word-break' :
-                                    'q-pl-xl word-break hidden'
-                            "
-                        >
-                            {{ i }},
-                        </div>
-                        <div
-                            v-if="!expanded_parameters[index]['expanded']"
-                            class="q-px-sm ellipsis-label q-mb-xs"
-                        >...</div>
-                        <div>]</div>
-                    </div>
-                    <div
-                        v-else-if="param.arrayChildren && fragment.args[index]"
-                        v-on:click.stop="toggle(index, 'expanded')"
-                    >
-                        <div>[ </div>
-                        <div
-                            v-for="i in fragment.args[index].length - 1"
-                            :key="param.type + i"
-                            :class="
-                                (expanded_parameters[index]['expanded']) ?
-                                    'q-pl-xl word-break' :
-                                    'q-pl-xl word-break hidden'
-                            "
-                        >
-                            <div v-if="param.arrayChildren.type === 'address'">
+                        <div class="fit row justify-start items-start content-start">
+                            <div class="col-4">
+                                <q-icon class="list-arrow" name="arrow_right"/>
+                                <span>{{ $t('pages.to').toLowerCase() }}</span>
+                            </div>
+                            <div class="col-8">
                                 <AddressField
-                                    :address="fragment.args[index][i]"
+                                    :address="fragment.to"
                                     :truncate="0"
-                                    class="word-break"
                                     :copy="true"
+                                    class="word-break"
                                 />
                             </div>
-                            <span v-else class="word-break">{{ fragment.args[index][i] }},</span>
                         </div>
-                        <div
-                            v-if="!expanded_parameters[index]['expanded']"
-                            class="q-px-sm ellipsis-label q-mb-xs"
-                        >...</div>
-                        <div>]</div>
-                    </div>
-                    <div v-else class="word-break">
-                        {{ fragment.args[index] }}
-                    </div>
-                </div>
-            </div>
-            <div v-if="fragment.value">
-                <div class="fit row justify-start items-start content-start">
-                    <div class="col-4">
-                        {{ $t('components.transaction.value_uint256') }}
                     </div>
-                    <div class="col-8">
-                        {{ fragment.value }} TLOS
+                    <div class="fit row justify-start items-start content-start">
+                        <div class="col-4">
+                            <q-icon class="list-arrow" name="arrow_right"/>
+                            <span>{{ $t('components.transaction.value_uint256').toLowerCase() }}</span>
+                        </div>
+                        <div class="col-8">
+                            {{ fragment.value }} TLOS
+                        </div>
                     </div>
                 </div>
-            </div>
-        </div>
-        <JsonViewer
-            v-else
-            :value="rawFragment"
-            theme="custom-theme"
-            class="q-mb-md"
-        />
-    </div>
+            </q-card-section>
+            <q-card-section v-else>
+                <VueJsonPretty
+                    :data="rawFragment"
+                    :showLine="false"
+                    :deep="1"
+                    class="q-mb-md q-pl-md"
+                />
+            </q-card-section>
+        </q-card>
+    </q-expansion-item>
+
 </div>
 </template>
 
 <style lang="scss" scoped>
+body.body--dark .c-fragment-list-element  .negative {
+    background: $negative;
+    span, .q-icon {
+        color: white !important;
+    }
+}
+.q-expansion-item__container > .q-item > .flex {
+    width: 100%;
+}
 .c-fragment-list-element {
     margin-bottom: 24px;
-
+    .col-shrink {
+        max-width: 90%;
+        word-break: break-all;
+    }
     &__head {
         background: rgba(0, 0, 0, 0.1);
         padding: 10px 20px;
@@ -258,15 +235,54 @@ export default {
         @at-root .body--dark & {
             background: rgba(0, 0, 0, 0.25);
         }
+        .row {
+            flex-flow: nowrap;
+            max-width: 70%;
+        }
+        .q-icon {
+            margin-top: -3px;
+        }
+    }
+    pre {
+        font-family: inherit;
+        font-size: inherit;
+        margin: auto;
     }
 
     &__fragment {
         white-space: pre;
     }
+    .negative {
+        border: 1px solid;
+    }
 }
 .jv-container .jv-code {
     padding: 10px 10px 10px 10px;
 }
+@media only screen and (max-width: 480px){
+    .c-fragment-list-element {
+        &__head {
+            display: block;
+            text-align: center;
+            padding: 15px;
+            .c-address-field {
+                border-top: 1px solid rgba(255, 255, 255, 0.3);
+                padding-top: 10px;
+                width: 100%;
+                display: flex;
+                margin-top: 15px;
+            }
+            .q-icon {
+                margin-left: -7px;
+                font-size: 20px;
+            }
+            .row {
+                flex-flow: nowrap;
+                max-width: 100%;
+            }
+        }
+    }
+}
 @media only screen and (max-width: 400px){
     .c-fragment-list-element {
         &__head {
diff --git a/src/components/Transaction/InternalTxns.vue b/src/components/Transaction/InternalTxns.vue
index 475115a47..0fba6a82e 100644
--- a/src/components/Transaction/InternalTxns.vue
+++ b/src/components/Transaction/InternalTxns.vue
@@ -1,23 +1,24 @@
 <script>
-import JsonViewer from 'vue-json-viewer';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
 import FragmentList from 'components/Transaction/FragmentList.vue';
-import { WEI_PRECISION, formatWei } from 'src/lib/utils';
-import { BigNumber } from 'ethers';
+import { WEI_PRECISION, formatWei, parseErrorMessage  } from 'src/lib/utils';
 
 export default {
     name: 'InternalTxns',
     components: {
-        JsonViewer,
+        VueJsonPretty,
         FragmentList,
     },
     props: {
-        itxs: {
-            type: Array,
-            required: true,
+        traces : {
+            type: Object,
+            required: false,
         },
-        contract: {
+        transaction : {
             type: Object,
             required: false,
+            default: null,
         },
     },
     methods: {
@@ -36,97 +37,176 @@ export default {
         },
     },
     async created() {
-        let i = 0;
-        for(let k = 0; k < this.itxs.length;k++){
-            let itx = this.itxs[k];
-            let contract = await this.getContract(itx.to);
-            let fnsig =  itx.input.slice(0, 8);
-            let name = this.$t('components.transaction.unknown');
-            let inputs, outputs, args  = false;
-            if(itx.type === 'create'){
-                name = this.$t('components.transaction.contract_deployment');
-            } else if (fnsig){
-                name = this.$t('components.transaction.unknown') + ' (' + '0x' + fnsig + ')';
-            } else if (itx.value){
-                name = this.$t('components.transaction.tlos_transfer');
-            }
-            if(itx.traceAddress.length < 2){
-                itx.index = i;
-                i++;
+        this.loading = true;
+        try {
+            let dataset;
+            if(typeof this.traces !== 'undefined' && this.traces !== null) {
+                dataset = this.traces;
+            } else {
+                if(this.transaction === null || this.itxs.length > 0){
+                    return;
+                }
+                let query = `/transaction/${this.transaction.hash}/internal?limit=1000&sort=ASC&offset=0&includeAbi=1`;
+                let response = await this.$indexerApi.get(query);
+                if(response && response.data?.results?.length > 0) {
+                    dataset = response.data?.results;
+                    this.$contractManager.addContractsToCache(response.data?.contracts);
+                } else {
+                    console.error(`Could not retrieve internal transactions for transaction ${this.transaction.hash}`,
+                        response,
+                    );
+                    return;
+                }
             }
+            for (let k = 0; k < dataset.length; k++) {
+                let itx = dataset[k];
+
+                // Get rid of duplicated calls
+                if(k === 1){
+                    if(itx.action.input === dataset[k - 1].action.input
+                        && itx.action.from === dataset[k - 1].action.from
+                        && itx.action.to === dataset[k - 1].action.to
+                        && itx.action.value === dataset[k - 1].action.value
+                    ){
+                        continue;
+                    }
+                }
 
-            if(itx.input_trimmed){
-                const parsedTransaction = await contract.parseTransaction(
-                    '0x' + itx.input_trimmed,
-                );
+                itx.callType = itx.action.callType;
+                let contract = await this.getContract(itx.action.to);
+                let inputs, outputs, args, name, isTransferETH = false;
 
-                if(parsedTransaction){
-                    args = parsedTransaction.args;
-                    name = parsedTransaction.signature;
-                    outputs = parsedTransaction.functionFragment ?
-                        parsedTransaction.functionFragment.outputs :
-                        parsedTransaction.outputs;
+                if (itx.type === 'create') {
+                    name = this.$t('components.transaction.contract_deployment');
+                } else if (itx.action.value > 0) {
+                    name = this.$t('components.transaction.tlos_transfer');
+                    isTransferETH = true;
+                }
+
+                if (itx.action.input) {
+                    const parsedTransaction = await this.$contractManager.parseContractTransaction(
+                        itx,
+                        itx.action.input,
+                        contract,
+                    );
+                    if (parsedTransaction) {
+                        args = parsedTransaction.args;
+                        name = parsedTransaction.signature;
+                        isTransferETH = false;
+                        outputs = parsedTransaction.functionFragment ?
+                            parsedTransaction.functionFragment.outputs :
+                            parsedTransaction.outputs;
 
-                    inputs = parsedTransaction.functionFragment ?
-                        parsedTransaction.functionFragment.inputs :
-                        parsedTransaction.inputs;
+                        inputs = parsedTransaction.functionFragment ?
+                            parsedTransaction.functionFragment.inputs :
+                            parsedTransaction.inputs;
+                    }
                 }
+                this.itxs.push(itx);
+                this.parsedItxs.push({
+                    index: itx.index,
+                    type: itx.type,
+                    args: args,
+                    error: (itx.error !== null && itx.result?.output?.slice(0, 10) === '0x08c379a0')
+                        ? itx.error + ': ' + parseErrorMessage(itx.result?.output)
+                        : itx.error,
+                    traceAddress: itx.traceAddress,
+                    parent: itx.traceAddress[0] || 0,
+                    name: name,
+                    from: itx.action?.from,
+                    isTransferETH: isTransferETH,
+                    sig: (itx.action.input) ? itx.action.input.slice(0, 10) : '',
+                    inputs: inputs,
+                    outputs: outputs,
+                    depth: itx.traceAddress.length,
+                    to: itx.action?.to,
+                    contract: contract,
+                    value: (itx.type !== 'create' && itx.action?.value !== '0')
+                        ? formatWei(itx.action.value, WEI_PRECISION)
+                        : 0,
+                });
             }
-            this.parsedItxs.push({
-                index: itx.index,
-                args: args,
-                parent: itx.traceAddress[0] || itx.index,
-                name: name,
-                from: itx.from,
-                sig: '0x' + itx.input.slice(0, 8),
-                inputs: inputs,
-                outputs: outputs,
-                depth: itx.depth,
-                to: itx.to,
-                contract: contract,
-                value: (itx.type !== 'create' && itx.value) ? formatWei('0x' + itx.value, WEI_PRECISION): 0,
+            this.parsedItxs.sort((a, b) => {
+                let deeper = (a.traceAddress.length > b.traceAddress.length) ? a : b;
+                let result = 0;
+                for(var i = 0; i < deeper.traceAddress.length;i++){
+                    let valueA = a.traceAddress[i] || -1;
+                    let valueB = b.traceAddress[i] || -1;
+                    result = result + (valueA - valueB);
+                }
+                return result;
             });
+        } catch (e) {
+            console.error(`Could not retrieve internal transactions for transaction: ${e}`);
         }
-        this.parsedItxs.sort((a, b) => BigNumber.from(a.parent).sub(BigNumber.from(b.parent)).toNumber());
-
+        this.loading = false;
     },
     data () {
         return {
             human_readable: true,
+            depth: 2,
             parsedItxs: [],
+            loading:  true,
+            itxs: [],
         };
     },
 };
 </script>
 <template>
 <div>
-    <div v-if="itxs.length === 0" class="row">
+    <div v-if="loading" class="row center justify-center items-center">
+        <q-spinner size="md" />
+    </div>
+    <div v-else-if="itxs.length === 0" class="row">
         <div class="col-12 flex items-center justify-center">
             <q-icon class="fa fa-info-circle" size="md" />
             <h5 class="text-center  q-ma-md"> {{ $t('components.transaction.no_internal_trxs_found') }}</h5>
         </div>
     </div>
     <div v-else class="row">
-        <div class="col-12 u-flex--center-y">
-            <q-toggle
-                v-model="human_readable"
-                icon="visibility"
-                color="secondary"
-                size="lg"
-            />
-            {{ $t('components.transaction.human_readable') }}
+        <div class="col-12 u-flex--center-y justify-between">
+            <div>
+                <q-toggle
+                    v-model="human_readable"
+                    icon="visibility"
+                    color="primary"
+                    size="lg"
+                />
+                {{ $t('components.transaction.human_readable') }}
+                <small>
+                    <q-icon name="info" class="q-mb-xs q-ml-xs" size="14px"/>
+                    <q-tooltip>
+                        {{ $t('components.transaction.verify_related_contract') }}
+                    </q-tooltip>
+                </small>
+            </div>
+            <div v-if="!human_readable">
+                <q-toggle
+                    v-model="depth"
+                    :true-value="2"
+                    :false-value="1"
+                    checked-icon="unfold_more"
+                    unchecked-icon="unfold_less"
+                    color="primary"
+                    size="lg"
+                />
+                <span v-if="depth === 2">{{ $t('components.click_to_fold') }}</span>
+                <span v-else>{{ $t('components.click_to_expand') }}</span>
+            </div>
         </div>
         <div class="col-12">
             <FragmentList
                 v-if="human_readable"
                 :fragments="itxs"
                 :parsedFragments="parsedItxs"
+                :transactionFrom="transaction.from"
             />
-            <JsonViewer
+            <VueJsonPretty
                 v-else
-                :value="itxs"
-                theme="custom-theme"
-                class="q-mb-md"
+                :data="itxs"
+                :deep="depth"
+                :showLine="false"
+                class="q-mb-md q-pl-md"
             />
         </div>
     </div>
diff --git a/src/components/Transaction/LogsViewer.vue b/src/components/Transaction/LogsViewer.vue
index bbe7efd5e..4e04909d2 100644
--- a/src/components/Transaction/LogsViewer.vue
+++ b/src/components/Transaction/LogsViewer.vue
@@ -1,22 +1,21 @@
 <script>
-import JsonViewer from 'vue-json-viewer';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
 import FragmentList from 'components/Transaction/FragmentList';
-import { TRANSFER_SIGNATURES, ERC1155_TRANSFER_SIGNATURE } from 'src/lib/abi/signature/transfer_signatures';
 import { BigNumber } from 'ethers';
 
 export default {
     name: 'LogsViewer',
     components: {
-        JsonViewer,
+        VueJsonPretty,
         FragmentList,
     },
     methods: {
-        async getLogContract(log, type){
+        async getLogContract(log){
             try {
-                return  await this.$contractManager.getContract(log.address.toLowerCase(), type);
+                return await this.$contractManager.getContract(log.address);
             } catch (e) {
-                console.error(`Failed to retrieve contract with address ${log.address}`);
-                // notify the user
+                console.error(`Failed to retrieve contract with address ${log.address}: ${e}`);
                 this.$q.notify({
                     message: this.$t('components.transaction.failed_to_retrieve_contract', { address: log.address }),
                     type: 'negative',
@@ -26,92 +25,117 @@ export default {
         },
     },
     props: {
+        trx : {
+            type: Object,
+            required: false,
+        },
         contract : {
             type: Object,
             required: false,
         },
         logs: {
             type: Array,
-            required: true,
+            required: false,
+            default: () => [],
         },
     },
-
-    async created() {
+    async mounted() {
         let verified = 0;
-        for(let i = 0; i < this.logs.length; i++){
-            let contract;
-            const log = this.logs[i];
-            const function_signature = log.topics[0].substr(0, 10);
-            if(TRANSFER_SIGNATURES.includes(function_signature)) {
-                let type = (log.topics.length === 4) ? 'erc721': 'erc20';
-                type = (function_signature === ERC1155_TRANSFER_SIGNATURE) ? 'erc1155' : type;
-                contract = await this.getLogContract(log, type);
-            } else {
-                contract = await this.getLogContract(log);
+        for(let i = 0; i < this.logs?.length; i++){
+            let log = this.logs[i];
+            if(this.trx){
+                log.blockNumber = this.trx.blockNumber;
+                log.transactionIndex = this.trx.index;
+                log.transactionHash = this.trx.hash;
             }
+            this.rawLogs.push({ ...log });
+            let contract = await this.getLogContract(log);
             if (contract){
                 verified = (contract.isVerified()) ? verified + 1: verified;
-                let parsedLog = await contract.parseLogs([log]);
-                if(parsedLog[0]){
-                    parsedLog[0].contract = contract;
-                    parsedLog[0].sig = function_signature;
-                    this.parsedLogs.push(parsedLog[0]);
+                let parsedLog = await this.$fragmentParser.parseLog(log, contract);
+                if(parsedLog){
+                    this.parsedLogs.push(parsedLog);
                 } else {
                     let nLog = Object.assign({}, log);
-                    nLog.contract = contract;
-                    nLog.sig = function_signature;
                     this.parsedLogs.push(nLog);
                 }
-                this.parsedLogs.sort((a, b) => BigNumber.from(a.logIndex).sub(BigNumber.from(b.logIndex)).toNumber());
+            } else {
+                let nLog = Object.assign({}, log);
+                this.parsedLogs.push(nLog);
+                this.$q.notify({
+                    message: this.$t('components.transaction.failed_to_retrieve_contract', { address: log.address }),
+                    type: 'negative',
+                    position: 'top',
+                });
             }
-
         }
-
-        this.allVerified = (verified === this.logs.length);
+        this.parsedLogs.sort((a, b) => BigNumber.from(a.logIndex).sub(BigNumber.from(b.logIndex)).toNumber());
+        this.allVerified = (verified === this.logs?.length);
+    },
+    data () {
+        return ({
+            human_readable: true,
+            parsedLogs: [],
+            rawLogs: [],
+            depth: 2,
+            allVerified: false,
+        });
     },
-    data: () => ({
-        human_readable: true,
-        parsedLogs: [],
-        allVerified: false,
-    }),
 };
 </script>
 
 <template>
 <div>
-    <div v-if="logs.length === 0" class="row">
+    <div v-if="logs === null || logs.length === 0" class="row">
         <div class="col-12 u-flex--center">
             <q-icon class="fa fa-info-circle q-mr-md" size="md" />
             <h5>{{ $t('components.transaction.no_logs_found') }}</h5>
         </div>
     </div>
     <div v-else class="row">
-        <div class="col-12 u-flex--center-y">
-            <q-toggle
-                v-model="human_readable"
-                icon="visibility"
-                color="secondary"
-                size="lg"
-            />
-            {{ $t('components.transaction.human_readable') }}
-            <small v-if="!allVerified">
-                <q-icon name="info" class="q-mb-xs q-ml-xs" size="14px"/>
-                <q-tooltip>
-                    {{ $t('components.transaction.verify_related_contract') }}
-                </q-tooltip>
-            </small>
+        <div class="col-12 u-flex--center-y justify-between">
+            <div>
+                <q-toggle
+                    v-model="human_readable"
+                    icon="visibility"
+                    color="primary"
+                    size="lg"
+                />
+                {{ $t('components.transaction.human_readable') }}
+                <small>
+                    <q-icon name="info" class="q-mb-xs q-ml-xs" size="14px"/>
+                    <q-tooltip>
+                        {{ $t('components.transaction.verify_related_contract') }}
+                    </q-tooltip>
+                </small>
+            </div>
+            <div v-if="!human_readable">
+                <q-toggle
+                    v-model="depth"
+                    :true-value="2"
+                    :false-value="1"
+                    checked-icon="unfold_more"
+                    unchecked-icon="unfold_less"
+                    color="primary"
+                    size="lg"
+                />
+                <span v-if="depth === 2">{{ $t('components.click_to_fold') }}</span>
+                <span v-else>{{ $t('components.click_to_expand') }}</span>
+            </div>
         </div>
         <div class="col-12">
             <FragmentList
                 v-if="human_readable"
-                :fragments="logs"
+                :fragments="rawLogs"
                 :parsedFragments="parsedLogs"
+                :transactionFrom="trx.from"
             />
-            <JsonViewer
+            <VueJsonPretty
                 v-else
-                :value="logs"
-                theme="custom-theme"
-                class="q-mb-md"
+                :data="rawLogs"
+                :showLine="false"
+                :deep="depth"
+                class="q-pl-md"
             />
         </div>
     </div>
diff --git a/src/components/Transaction/ParameterList.vue b/src/components/Transaction/ParameterList.vue
index 389defca2..0efc87ed2 100644
--- a/src/components/Transaction/ParameterList.vue
+++ b/src/components/Transaction/ParameterList.vue
@@ -1,5 +1,6 @@
 <script>
 import AddressField from 'components/AddressField';
+import { ethers } from 'ethers';
 export default {
     name: 'ParameterList',
     components: {
@@ -9,6 +10,9 @@ export default {
         toggle(param, value) {
             this.expanded[param][value] = !this.expanded[param][value];
         },
+        isAddress(address){
+            return ethers.utils.isAddress(address);
+        },
     },
     data(){
         let expanded = [];
@@ -66,46 +70,61 @@ export default {
                     <div v-else>[]</div>
                     <br v-if="index !== param.value.length - 1">
                 </div>
-                <div v-else-if="param.arrayChildren === 'address'">
+                <div
+                    v-else-if="
+                        param.arrayChildren === 'address'
+                            || typeof  value === 'string' && isAddress(value)
+                    "
+                >
                     <AddressField
-                        :highlight="trxFrom === value.toLowerCase()"
                         :address="value"
                         copy
-                        :name="value.toLowerCase() === contract.address && contract.name ?  contract.name : null"
-                    />
+                    />,
                 </div>
-                <div v-else-if="param.arrayChildren === 'uint128' || param.arrayChildren === 'uint256'">
+                <div v-else-if="['uint128', 'uint256'].includes(param.arrayChildren) || typeof value === 'number'">
                     {{ value }},
                 </div>
                 <div
-                    v-else-if="typeof value === 'object'"
+                    v-else-if="typeof value === 'object' && value[0]"
                     v-on:click.stop="value.length > 1 && toggle(pIndex, index) ||
                         value.length === 1 && toggle(pIndex, 'expanded')
                     "
                 >
-                    <div>[</div>
+                    <span>[</span>
                     <div
                         v-for="(value2, index2) in value"
                         :key="`index2-${index2}`"
                         :class="(expanded[pIndex][index] || value.length === 1) ? 'q-pl-md' : 'q-pl-md hidden'"
                     >
-                        <div v-if="typeof value2 === 'object'">
+                        <div v-if="value2 && typeof value2 === 'object' && value2[0]">
                             <div>[</div>
                             <div
                                 v-for="(value3, index3) in value2"
                                 :key="`index3-${index3}`"
                                 class="q-pl-sm"
                             >
-                                {{ value3 }},
+                                <div v-if="typeof value3 === 'object'">
+                                    <pre>{{ value3 }},</pre>
+                                </div>
+                                <div v-else-if="typeof value3 === 'string' && isAddress(value3)">
+                                    <AddressField
+                                        :address="value3"
+                                        copy
+                                    />,
+                                </div>
+                                <div v-else>
+                                    {{ value3 }},
+                                </div>
                             </div>
                             <div>]</div>
                         </div>
                         <div v-else>{{ value2 }},</div>
                     </div>
-                    <div v-if="!expanded[pIndex][index] && value.length > 1" class="q-px-sm ellipsis-label q-mb-xs">
-                        ...
+                    <div v-if="!expanded[pIndex][index] && value.length > 1">
+                        <span  class="q-px-sm ellipsis-label q-mb-xs">...</span>
+                        <br>
                     </div>
-                    <div>]</div>
+                    <span>],</span>
                 </div>
                 <div v-else>{{ value }},</div>
             </div>
@@ -116,12 +135,16 @@ export default {
         </div>
         <div v-else>[]</div>
     </div>
-    <div v-else-if="param.type === 'address'" class="col-8 word-break">
+    <div
+        v-else-if="param.type === 'address' || typeof param.value === 'string' && isAddress(param.value)"
+        class="col-8 word-break"
+    >
         <AddressField
-            :highlight="trxFrom === param.value.toLowerCase()"
             :address="param.value"
             copy
-            :name="param.value.toLowerCase() === contract.address && contract.name ?  contract.name : null"
+            :name="
+                param.value?.toLowerCase() === contract.address?.toLowerCase() && contract.name ?  contract.name : null
+            "
         />
     </div>
     <div v-else class="col-8 word-break">{{ param.value }}</div>
@@ -130,6 +153,10 @@ export default {
 
 
 <style lang="sass" scoped>
+pre
+    margin: auto
+    font-family: inherit
+    font-size: inherit
 @media only screen and (max-width: 550px)
     .col-4, .col-8
         width: 100%
diff --git a/src/components/TransactionDialog.vue b/src/components/TransactionDialog.vue
new file mode 100644
index 000000000..6c9c456ba
--- /dev/null
+++ b/src/components/TransactionDialog.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { BigNumber } from 'ethers/lib/ethers';
+import { useI18n } from 'vue-i18n';
+
+import { truncateAddress } from 'src/antelope/wallets/utils/text-utils';
+import { WEI_PRECISION, ZERO_ADDRESSES, formatWei } from 'src/lib/utils';
+
+import OutlineButton from 'src/components/OutlineButton.vue';
+
+const $i18n = useI18n();
+const $t = $i18n.t;
+const locale = $i18n.locale.value;
+
+const props = defineProps({
+    trx: {
+        type: Object,
+        default: null,
+    },
+});
+
+const menuOpen = ref(false);
+
+const actionText = computed(() => {
+    if (
+        !props.trx.parsedTransaction
+        && props.trx.from === ZERO_ADDRESSES
+        && props.trx.value
+        && parseInt(props.trx.gasPrice as string) === 0
+    ) {
+        return $t('pages.transactions.deposit_native');
+    }
+    if (
+        !props.trx.parsedTransaction
+        && props.trx.to === ZERO_ADDRESSES
+        && props.trx.value
+        && parseInt(props.trx.gasPrice as string) === 0
+    ) {
+        return $t('pages.transactions.withdraw_native');
+    }
+
+    if (!props.trx.parsedTransaction && props.trx.to === null && props.trx.data !== null) {
+        return $t('pages.transactions.contract_deployment');
+    }
+
+    if (props.trx.parsedTransaction) {
+        return props.trx.parsedTransaction.name;
+    }
+
+    if (!props.trx.parsedTransaction && props.trx.input === '0x' && props.trx.value) {
+        // action is a transfer; handle separately in the template
+        return '';
+    }
+
+    return props.trx.input.slice(0, 10);
+});
+const gasLimit = computed(() => {
+    const gas = BigNumber.from(props.trx.gasLimit);
+
+    try {
+        return gas.toNumber().toLocaleString(locale);
+    } catch (e) {
+        console.error(e);
+        return gas.toString();
+    }
+});
+const gasUsed = computed(() => {
+    const gas = BigNumber.from(props.trx.gasUsed ?? props.trx.gasused);
+    try {
+        return gas.toNumber().toLocaleString(locale);
+    } catch (e) {
+        console.error(e);
+        return gas.toString();
+    }
+});
+const totalGasFee = computed(() => {
+    const wei = BigNumber.from(props.trx.gasUsed ?? props.trx.gasused).mul(props.trx.gasPrice);
+    return formatWei(wei, 18, 4);
+});
+
+function formatTlos(value: string) {
+    return formatWei(value, WEI_PRECISION, 4);
+}
+</script>
+
+<template>
+<div>
+    <OutlineButton :icon-only="true" :highlight="menuOpen" text-color="primary">
+        <q-icon name="far fa-eye" size="12px" />
+        <q-menu
+            anchor="top right"
+            self="top left"
+            @update:model-value="menuOpen = $event"
+        >
+            <q-card>
+                <q-card-section>
+                    <div>
+                        <strong>{{ $t('pages.transactions.status_label') }}:</strong>
+                        <p>
+                            <span v-if="trx.status == 1" class="u-flex--center-y">
+                                <q-icon name="check" color="positive" class="q-mr-xs"/>
+                                <span class="text-positive">{{ $t('pages.success') }}</span>
+                            </span>
+                            <span v-else class="u-flex--center-y">
+                                <q-icon name="warning" color="negative" class="q-mr-xs"/>
+                                <span class="text-negative">{{ $t('pages.failure') }}</span>
+                            </span>
+                        </p>
+                    </div>
+                    <div>
+                        <strong>{{ $t('pages.transactions.transaction_action_label') }}:</strong>
+                        <p>
+                            <template v-if="actionText">{{ actionText }}</template>
+                            <template v-else>
+                                {{
+                                    $t(
+                                        'pages.transactions.transfer_for_x_tlos_from',
+                                        { amount: formatTlos(trx.value) }
+                                    )
+                                }}
+                                <router-link :to="`/address/${trx.from}`">
+                                    {{ truncateAddress(trx.from) }}
+                                </router-link>
+                                {{  $t('pages.transactions.to')}}
+                                <router-link :to="`/address/${trx.to}`">
+                                    {{ truncateAddress(trx.to) }}
+                                </router-link>
+                            </template>
+                        </p>
+                    </div>
+                    <div>
+                        <strong>{{ $t('pages.transactions.transaction_fee_label') }}:</strong>
+                        <p>{{ totalGasFee }} TLOS </p>
+                    </div>
+                    <div>
+                        <strong>{{ $t('pages.transactions.gas_info_label') }}:</strong>
+                        <p>
+                            {{
+                                $t(
+                                    'pages.transactions.x_gas_used_of_y_limit',
+                                    {
+                                        amount: gasUsed,
+                                        limit: gasLimit,
+                                    }
+                                )
+                            }}
+                        </p>
+                    </div>
+                    <div>
+                        <strong>{{ $t('pages.transactions.nonce_label') }}:</strong>
+                        <p>{{ trx.nonce }}</p>
+                    </div>
+                    <div>
+                        <p>
+                            <router-link :key="$route.path" :to="`/tx/${trx.hash}`">
+                                {{ $t('pages.transactions.see_more_details') }}
+                            </router-link>
+                        </p>
+                    </div>
+                </q-card-section>
+            </q-card>
+        </q-menu>
+    </OutlineButton>
+</div>
+</template>
+
+<style lang="scss">
+</style>
diff --git a/src/components/TransactionFeeField.vue b/src/components/TransactionFeeField.vue
new file mode 100644
index 000000000..d135f3719
--- /dev/null
+++ b/src/components/TransactionFeeField.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { BigNumber } from 'ethers/lib/ethers';
+
+import { GAS_PRECISION, WEI_PRECISION, formatWei } from 'src/lib/utils';
+
+const props = defineProps({
+    gasUsed: {
+        type: String,
+        required: true,
+    },
+    gasPrice: {
+        type: String,
+        required: true,
+    },
+    showTotalGasFee: {
+        type: Boolean,
+        required: false,
+        default: true,
+    },
+});
+
+function totalGasFee() {
+    const wei = BigNumber.from(props.gasUsed).mul(props.gasPrice);
+    return formatWei(wei, WEI_PRECISION, 4);
+}
+
+function gasPriceWei(){
+    const wei = BigInt(props.gasPrice);
+    return formatWei(wei, GAS_PRECISION, 4);
+}
+
+</script>
+
+<template>
+<div class="transaction-fee-field-container">
+    {{ showTotalGasFee ?  totalGasFee() : gasPriceWei() }}
+    <q-tooltip>{{ showTotalGasFee ? $t('components.gas_price_tlos') : $t('components.gas_price_gwei') }}</q-tooltip>
+</div>
+</template>
+
+<style lang="scss">
+.transaction-fee-field-container{
+    display: inline-flex;
+    align-items: center;
+}
+</style>
diff --git a/src/components/TransactionField.vue b/src/components/TransactionField.vue
index 59af182a6..303581791 100644
--- a/src/components/TransactionField.vue
+++ b/src/components/TransactionField.vue
@@ -1,35 +1,67 @@
-<script>
-import CopyButton from 'components/CopyButton';
+<script setup lang="ts">
+import CopyButton from 'components/CopyButton.vue';
+import { computed } from 'vue';
 
-export default {
-    name: 'TransactionField',
-    components:{
-        CopyButton,
+const props = defineProps({
+    transactionHash: {
+        type: String,
+        required: true,
     },
-    props: {
-        transactionHash: {
-            type: String,
-            required: false,
-        },
-        copy: {
-            type: Boolean,
-            default: false,
-        },
+    status: {
+        type: Boolean,
+        required: false,
+        default: null,
     },
-};
+    color: {
+        type: String,
+        required: false,
+        default: 'primary',
+    },
+    truncate: {
+        type: Number,
+        required: false,
+        default: 20,
+    },
+    copy: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const text = computed(() => {
+    if (props.transactionHash) {
+        const cropped = props.transactionHash.slice(0, props.truncate);
+        return cropped.length < props.transactionHash.length ? `${cropped}...` : cropped;
+    } else {
+        return '...';
+    }
+});
+
 </script>
 
 <template>
-<div class="transaction-field-container">
-    <router-link :key="$route.path" :to="`/tx/${this.transactionHash}`">
-        {{ transactionHash && transactionHash.slice(0,20) }}...
+<div class="c-transaction-field">
+    <!-- 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}`">
+        {{ text }}
+        <q-tooltip>{{ transactionHash }}</q-tooltip>
     </router-link>
     <CopyButton v-if="copy" :text="transactionHash" accompanying-text="" />
 </div>
 </template>
 
-<style lang="sass">
-.transaction-field-container
-    display: inline-flex
-    align-items: center
+<style lang="scss">
+.c-transaction-field{
+    display: inline-flex;
+    align-items: center;
+    &__icon{
+        margin-right: .1rem;
+        padding-bottom: .05rem;
+    }
+}
 </style>
diff --git a/src/components/TransactionOverview.vue b/src/components/TransactionOverview.vue
new file mode 100644
index 000000000..fbcf151e1
--- /dev/null
+++ b/src/components/TransactionOverview.vue
@@ -0,0 +1,608 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BigNumber } from 'ethers';
+import { BlockData, EvmTransactionExtended } from 'src/types';
+import { WEI_PRECISION } from 'src/lib/utils';
+import { indexerApi } from 'src/boot/telosApi';
+import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
+
+import AddressField from 'components/AddressField.vue';
+import BlockField from 'components/BlockField.vue';
+import DateField from 'components/DateField.vue';
+import MethodField from 'components/MethodField.vue';
+import GasLimitAndUsage from 'components/GasLimitAndUsage.vue';
+import TransactionField from 'components/TransactionField.vue';
+import TransactionFeeField from 'components/TransactionFeeField.vue';
+import ERCTransferList from 'components/Transaction/ERCTransferList.vue';
+
+const { t: $t } = useI18n();
+
+const locale = useI18n().locale.value;
+
+const props = defineProps<{
+    trx: EvmTransactionExtended | null,
+}>();
+
+// attribute values
+const loading = computed(() => !props.trx);
+const hash = computed(() => props.trx?.hash);
+const statusOk = computed(() => props.trx?.status === '0x1');
+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 showMoreDetails = ref(true);
+const moreDetailsHeight = ref(0);
+
+const getValueDisplay = (value: string) =>
+    prettyPrintCurrency(
+        BigNumber.from(value),
+        4,
+        locale,
+        false,
+        'TLOS',
+        false,
+        WEI_PRECISION,
+        false,
+    );
+
+
+const loadBlockData = async () => {
+    try {
+        if (blockNumber.value) {
+            const response = await indexerApi.get(`/block/${blockNumber.value}`);
+            blockData.value = response.data?.results?.[0] as BlockData;
+        }
+    } catch (error) {
+        console.error('Failed to fetch block data:', error);
+        blockData.value = null;
+    }
+};
+
+function setHighlightAddress(val: string) {
+    highlightAddress.value = val;
+}
+
+
+watch(() => props.trx, async (newTrx) => {
+    if (newTrx) {
+        await loadBlockData();
+    }
+}, { immediate: true });
+
+watch(() => blockData.value, (newBlockData) => {
+    if (newBlockData) {
+        const moreDetailsContainer = document.querySelector('.c-trx-overview__more-details-container');
+        if (moreDetailsContainer) {
+            moreDetailsHeight.value = moreDetailsContainer.clientHeight;
+            showMoreDetails.value = false;
+        }
+    }
+});
+
+watch(() => showMoreDetails.value, (newShowMoreDetails) => {
+    const moreDetailsContainer = document.querySelector('.c-trx-overview__more-details-container') as HTMLDivElement;
+    if (moreDetailsContainer) {
+        moreDetailsContainer.style.setProperty('height', newShowMoreDetails ? `${moreDetailsHeight.value}px` : '0px');
+    }
+});
+
+
+</script>
+
+
+<template>
+
+<q-card class="c-trx-overview__card-section">
+    <!-- Hash -->
+    <div class="c-trx-overview__row">
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.trx_hash_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.trx_hash') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val">
+            <div class="c-trx-overview__row-value  c-trx-overview__row-value--hash">
+                <q-skeleton v-if="!hash" type="text" class="c-trx-overview__skeleton" />
+                <TransactionField
+                    v-else
+                    color="primary"
+                    :transaction-hash="hash"
+                    :truncate="200"
+                />
+            </div>
+        </div>
+    </div>
+
+    <!-- status -->
+    <div class="c-trx-overview__row">
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.status_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.status') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val">
+            <div class="c-trx-overview__row-value  c-trx-overview__row-value--status">
+                <q-skeleton v-if="loading" type="text" class="c-trx-overview__skeleton" />
+                <span v-else-if="statusOk" class="u-flex--center-y">
+                    <q-icon name="check" color="positive" class="q-mr-xs"/>
+                    <span class="c-trx-overview__status-value text-positive">{{ $t('pages.success') }}</span>
+                </span>
+                <span v-else class="u-flex--center-y">
+                    <q-icon name="warning" color="negative" class="q-mr-xs"/>
+                    <span class="c-trx-overview__status-value text-negative">{{ $t('pages.failure') }}</span>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <!-- block -->
+    <div class="c-trx-overview__row">
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.block_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.block') }}</div>
+        </div>
+        <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" />
+            </div>
+        </div>
+    </div>
+
+    <!-- Timestamp -->
+    <div class="c-trx-overview__row">
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.timestamp_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.timestamp') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val">
+            <q-skeleton v-if="loading" type="text" class="c-trx-overview__skeleton" />
+            <div v-if="!loading" class="c-trx-overview__row-value c-trx-overview__row-value--timestamp">
+                <q-icon class="c-trx-overview__row-value-clock-icon" name="far fa-clock" />
+                <span class="c-trx-overview__row-date-field"><DateField
+                    class="c-trx-overview__row-value-clock-ago"
+                    :epoch="Math.round(timestamp / 1000)"
+                    :force-show-age="true"
+                /></span>
+                <span class="c-trx-overview__row-date-field">(<DateField
+                    class="c-trx-overview__row-value-clock-time"
+                    :epoch="Math.round(timestamp / 1000)"
+                    :force-show-age="false"
+                />)</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- transaction action -->
+    <div class="c-trx-overview__row">
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.trx_action_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.trx_action') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val">
+            <q-skeleton v-if="!trx" type="text" class="c-trx-overview__skeleton" />
+            <MethodField
+                v-else
+                :trx="trx"
+                :fullText="true"
+            />
+        </div>
+    </div>
+
+    <!-- from -->
+    <div class="c-trx-overview__row">
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.from_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.from') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val">
+            <q-skeleton v-if="loading" type="text" class="c-trx-overview__skeleton" />
+            <AddressField
+                v-if="trx?.from"
+                :key="'trx-from-'+ trx.from"
+                copy
+                :address="trx.from"
+                :highlightAddress="highlightAddress"
+                @highlight="setHighlightAddress"
+            />
+        </div>
+    </div>
+
+    <!-- to -->
+    <div v-if="trx?.to" class="c-trx-overview__row" >
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.to_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.to') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val">
+            <AddressField
+                :key="'trx-to-'+ trx.to"
+                copy
+                :address="trx.to"
+                :is-contract-trx="!!trx.contract"
+                :highlightAddress="highlightAddress"
+                @highlight="setHighlightAddress"
+            />
+        </div>
+    </div>
+
+    <!-- ERC20 Token Tranfers -->
+    <div v-if="trx?.logsArray.length > 0" class="c-trx-overview__row">
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.erc20_transfers_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.erc20_transfers') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val c-trx-overview__col-val--erc-transfers">
+            <ERCTransferList
+                :logs="trx?.logsArray ?? []"
+                :type="'erc20'"
+                :highlightAddress="highlightAddress"
+                @highlight="setHighlightAddress"
+            />
+        </div>
+    </div>
+
+    <!-- value -->
+    <div class="c-trx-overview__row">
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.value_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.value') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val">
+            <q-skeleton v-if="!trx" type="text" class="c-trx-overview__skeleton" />
+            <template v-else>
+                {{ getValueDisplay(trx.value) }}
+            </template>
+        </div>
+    </div>
+
+    <!-- transaction fee -->
+    <div class="c-trx-overview__row">
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.gas_fee_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.gas_fee') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val">
+            <q-skeleton v-if="!trx" type="text" class="c-trx-overview__skeleton" />
+            <TransactionFeeField
+                v-else
+                :showTotalGasFee="true"
+                :gasUsed="trx.gasUsed"
+                :gasPrice="trx.gasPrice"
+            />
+        </div>
+    </div>
+
+    <!-- gas price -->
+    <div class="c-trx-overview__row">
+        <div class="c-trx-overview__col-att">
+            <div class="c-trx-overview__row-tooltip">
+                <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                    <q-tooltip anchor="bottom right" self="top start">
+                        {{ $t('components.transaction.gas_price_tooltip') }}
+                    </q-tooltip>
+                </q-icon>
+            </div>
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.gas_price') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val">
+            <q-skeleton v-if="!trx" type="text" class="c-trx-overview__skeleton" />
+            <TransactionFeeField
+                v-else
+                :showTotalGasFee="false"
+                :gasUsed="trx.gasUsed"
+                :gasPrice="trx.gasPrice"
+            />
+        </div>
+    </div>
+
+</q-card>
+
+<q-card v-if="trx" class="c-trx-overview__card-section">
+    <div
+        :class="{
+            'c-trx-overview__more-details-container': true,
+            'c-trx-overview__more-details-container--transparent': moreDetailsHeight === 0,
+        }"
+    >
+        <!-- gas limit -->
+        <div class="c-trx-overview__row">
+            <div class="c-trx-overview__col-att">
+                <div class="c-trx-overview__row-tooltip">
+                    <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                        <q-tooltip anchor="bottom right" self="top start">
+                            {{ $t('components.transaction.gas_limit_n_usage_tooltip') }}
+                        </q-tooltip>
+                    </q-icon>
+                </div>
+                <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.gas_limit_n_usage') }}</div>
+            </div>
+            <div class="c-trx-overview__col-val">
+                <q-skeleton v-if="!blockData" type="text" class="c-trx-overview__skeleton" />
+                <GasLimitAndUsage
+                    v-if="blockData"
+                    :trx="trx"
+                    :block="blockData"
+                />
+            </div>
+        </div>
+
+        <!-- nonce -->
+        <div class="c-trx-overview__row">
+            <div class="c-trx-overview__col-att">
+                <div class="c-trx-overview__row-tooltip">
+                    <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                        <q-tooltip anchor="bottom right" self="top start">
+                            {{ $t('components.transaction.nonce_tooltip') }}
+                        </q-tooltip>
+                    </q-icon>
+                </div>
+                <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.nonce') }}</div>
+            </div>
+            <div class="c-trx-overview__col-val">
+                <q-skeleton v-if="loading" type="text" class="c-trx-overview__skeleton" />
+                <div v-else>{{ trx.nonce }}</div>
+            </div>
+        </div>
+
+        <!-- position in block -->
+        <div v-if="transactionIndex >= 0" class="c-trx-overview__row">
+            <div class="c-trx-overview__col-att">
+                <div class="c-trx-overview__row-tooltip">
+                    <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                        <q-tooltip anchor="bottom right" self="top start">
+                            {{ $t('components.transaction.position_in_block_tooltip') }}
+                        </q-tooltip>
+                    </q-icon>
+                </div>
+                <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.position_in_block') }}</div>
+            </div>
+            <div class="c-trx-overview__col-val">
+                {{ transactionIndex }}
+            </div>
+        </div>
+
+        <!-- input -->
+        <div class="c-trx-overview__row">
+            <div class="c-trx-overview__col-att">
+                <div class="c-trx-overview__row-tooltip">
+                    <q-icon class="c-trx-overview__row-tooltip-icon info-icon" name="fas fa-info-circle">
+                        <q-tooltip anchor="bottom right" self="top start">
+                            {{ $t('components.transaction.input_tooltip') }}
+                        </q-tooltip>
+                    </q-icon>
+                </div>
+                <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.input') }}</div>
+            </div>
+            <div class="c-trx-overview__col-val">
+                <q-skeleton v-if="loading" type="text" class="c-trx-overview__skeleton" />
+                <div v-else class="c-trx-overview__row-value c-trx-overview__row-value--input">{{ trx.input }}</div>
+            </div>
+        </div>
+
+    </div>
+    <div class="c-trx-overview__row c-trx-overview__row--toggle-details" @click="showMoreDetails = !showMoreDetails">
+        <div class="c-trx-overview__col-att c-trx-overview__col-att--toggle-details">
+            <div class="c-trx-overview__row-attribute">{{ $t('components.transaction.more_details') }}</div>
+        </div>
+        <div class="c-trx-overview__col-val c-trx-overview__col-val--toggle-details">
+            <template v-if="showMoreDetails">
+                <i class="fas fa-minus"></i>
+                <span>{{ $t('components.transaction.show_less_details') }}</span>
+            </template>
+            <template v-else>
+                <i class="fas fa-plus"></i>
+                <span>{{ $t('components.transaction.show_more_details') }}</span>
+            </template>
+        </div>
+    </div>
+</q-card>
+</template>
+
+<style lang="scss">
+.c-trx-overview {
+    $grey: #909090;
+    &__card-section {
+        padding: 1.25rem!important;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 16px;
+    }
+    &__row, &__col-att, &__col-val {
+        display: flex;
+        flex-direction: row;
+        justify-content: left;
+        align-items: baseline;
+        gap: 5px;
+    }
+    &__col-val {
+        flex-grow: 1;
+    }
+    &__row {
+        padding: 0.5rem 0;
+        &--toggle-details {
+            cursor: pointer;
+        }
+    }
+    &__row-tooltip {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    &__row-attribute {
+        font-weight: 500;
+        max-width: 230px;
+        min-width: 200px;
+        width: 15vw;
+        text-wrap: nowrap;
+    }
+    &__row-value {
+        width: 100%;
+        &-link {
+            cursor: pointer;
+            color: var(--q-primary);
+        }
+        &--hardcoded {
+            color: $grey;
+        }
+        &--timestamp {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            flex-wrap: wrap;
+        }
+        &--hash {
+            word-break: break-all;
+        }
+        &--pointer {
+            cursor: pointer;
+            color: var(--q-primary);
+        }
+        &--input {
+            word-break: break-word;
+        }
+    }
+    &__row-date-field {
+        text-wrap: nowrap;
+    }
+    &__row-icon-btn {
+        cursor: pointer;
+        height: 22px;
+        width: 22px;
+        color: white;
+        background-color: $grey;
+        border: solid 1.25px $grey;
+        border-radius: 6px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &--left {
+            padding-right: 1px;
+        }
+        &--right {
+            padding-left: 1px;
+        }
+        .q-dark & {
+            color: rgb(8, 29, 53);
+        }
+    }
+    &__separator {
+        border: 1px solid $grey;
+        margin: 1rem 0;
+    }
+    &__row-tooltip-icon {
+        color: $grey;
+    }
+
+    @media screen and (max-width: 900px) {
+        &__row {
+            flex-direction: column;
+            align-items: stretch;
+            &--toggle-details {
+                flex-direction: row;
+                justify-content: space-between;
+            }
+        }
+        &__row-attribute {
+            min-width: 100%;
+            margin-top: 5px;
+        }
+        &__row-value {
+            margin-left: 0;
+        }
+        &__col-att--toggle-details {
+            flex-grow: unset;
+        }
+        &__col-val--toggle-details {
+            flex-grow: unset;
+        }
+    }
+
+    &__col-val--toggle-details {
+        cursor: pointer;
+        color: var(--q-primary);
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        padding-left: 18px;
+    }
+
+    &__more-details-container {
+        transition: height 0.3s ease-in-out;
+        overflow: hidden;
+        &--transparent {
+            // this avoids the container from being visible while we capture its height
+            opacity: 0;
+            position: absolute;
+        }
+    }
+
+    &__skeleton {
+        height: 2rem;
+        width: 100%;
+    }
+}
+</style>
diff --git a/src/components/TransactionTable.vue b/src/components/TransactionTable.vue
index 800aa72fe..b76dfb3cd 100644
--- a/src/components/TransactionTable.vue
+++ b/src/components/TransactionTable.vue
@@ -1,335 +1,557 @@
-<script>
-import AddressField from 'components/AddressField';
-import BlockField from 'components/BlockField';
-import DateField from 'components/DateField';
-import TransactionField from 'components/TransactionField';
-import MethodField from 'components/MethodField';
-import { formatWei } from 'src/lib/utils';
-import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
-
-export default {
-    name: 'TransactionTable',
-    components: {
-        TransactionField,
-        DateField,
-        BlockField,
-        AddressField,
-        MethodField,
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { useQuasar } from 'quasar';
+import { useRoute, useRouter } from 'vue-router';
+import { onBeforeMount, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BigNumber } from 'ethers/lib/ethers';
+
+import { contractManager, indexerApi } from 'src/boot/telosApi';
+import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
+import { WEI_PRECISION } from 'src/lib/utils';
+
+import AddressField from 'components/AddressField.vue';
+import BlockField from 'components/BlockField.vue';
+import DateField from 'components/DateField.vue';
+import MethodField from 'components/MethodField.vue';
+import TransactionDialog from 'components/TransactionDialog.vue';
+import TransactionField from 'components/TransactionField.vue';
+import TransactionFeeField from 'components/TransactionFeeField.vue';
+
+import { Pagination } from 'src/types';
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const $i18n = useI18n();
+const { t: $t } = $i18n;
+const locale = $i18n.locale.value;
+
+const FIVE_HUNDRED_K = 500000;
+
+interface Props {
+    title?: string;
+    initialPageSize?: number,
+    block?: number,
+    accountAddress?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: '',
+    initialPageSize: 1,
+    accountAddress: '',
+});
+
+const rows = ref<Array<any>>([]);
+const loadingRows = ref<Array<number>>([]);
+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>(
+    {
+        sortBy: 'block',
+        descending: true,
+        page: 1,
+        rowsPerPage: 50,
+        rowsNumber: 0,
     },
-    props: {
-        title: {
-            type: String,
-            required: true,
-        },
-        filter: {
-            type: Object,
-            default: () => ({}),
-        },
-        initialPageSize: {
-            type: Number,
-            default: 1,
-        },
+);
+
+const columns = [
+    {
+        name: 'preview',
+        label: '',
+        align: 'center',
     },
-    data() {
-        const columns = [
-            {
-                name: 'hash',
-                label: '',
-                align: 'left',
-            },
-            {
-                name: 'block',
-                label: '',
-                align: 'left',
-            },
-            {
-                name: 'date',
-                label: '',
-                align: 'left',
-            },
-            {
-                name: 'method',
-                label: '',
-                align: 'left',
-            },
-            {
-                name: 'from',
-                label: '',
-                align: 'left',
-            },
-            {
-                name: 'to',
-                label: '',
-                align: 'left',
-            },
-            {
-                name: 'value',
-                label: '',
-                align: 'left',
-            },
-        ];
-
-        return {
-            rows: [],
-            columns,
-            filterUpdated: false,
-            transactions: [],
-            pageSize: this.initialPageSize,
-            total: null,
-            loading: false,
-            pagination: {
-                sortBy: 'date',
-                descending: true,
-                page: 1,
-                rowsPerPage: 10,
-                rowsNumber: 0,
-            },
-            page_size_options: [10, 20, 50],
-            showDateAge: true,
-        };
+    {
+        name: 'hash',
+        label: $t('components.tx_hash'),
+        align: 'left',
     },
-    async created() {
-        // initialization of the translated texts
-        this.columns[0].label = this.$t('components.tx_hash');
-        this.columns[1].label = this.$t('components.block');
-        this.columns[2].label = this.$t('components.date');
-        this.columns[3].label = this.$t('components.method');
-        this.columns[4].label = this.$t('components.from');
-        this.columns[5].label = this.$t('components.to_interacted_with');
-        this.columns[6].label = this.$t('components.value_transfer');
+    {
+        name: 'method',
+        label: $t('components.method'),
+        align: 'left',
     },
-    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;
-                }
+    {
+        name: 'block',
+        label: $t('components.block'),
+        align: 'left',
+        sortable: true,
+    },
+    {
+        name: 'date',
+        label: $t('components.age'),
+        align: 'left',
+    },
+    {
+        name: 'from',
+        label: $t('components.from'),
+        align: 'left',
+    },
+    {
+        name: 'to',
+        label: $t('components.to_interacted_with'),
+        align: 'left',
+    },
+    {
+        name: 'value',
+        label: $t('components.value'),
+        align: 'left',
+    },
+    {
+        name: 'fee',
+        label: `${$t('components.txn_fee')} (TLOS)`,
+        align: 'right',
+    },
+];
 
-                this.setPagination(page, size);
-            },
-            immediate: true,
-        },
-        filter: {
-            async handler() {
-                if (!this.filterUpdated) {
-                    this.filterUpdated = true;
-                    return;
-                }
-                await this.onRequest({ pagination: this.pagination });
-            },
-        },
+watch(() => route.query,
+    (query) => {
+        const { p, rowsPerPage, sort } = query;
+
+        let page = p ? Number(p) : 1;
+        let size = rowsPerPage ? Number(rowsPerPage) : pagination.value.rowsPerPage;
+        let desc = sort ? sort === 'DESC' : true;
+
+        setPagination(page, size, desc);
     },
-    methods: {
-        setPagination(page, size) {
-            if (page) {
-                this.pagination.page = Number(page);
-            }
-            if (size) {
-                this.pagination.rowsPerPage = Number(size);
-            }
-            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}`,
-                },
-            });
+    { immediate: true },
+);
+
+function setPagination(page: number, size: number, desc: boolean) {
+    if (page) {
+        pagination.value.page = page;
+    }
+    if (size) {
+        pagination.value.rowsPerPage = size;
+    }
+    pagination.value.descending = desc;
+    parseTransactions();
+}
+
+async function onPaginationChange(settings: { pagination: Pagination}) {
+    const { page, rowsPerPage, descending } = settings.pagination;
+    // we need to change the URL to keep the pagination state by changing the route.query.page
+    // with a string like 'page,rowsPerPage'
+    router.push({
+        // taking care to preserve the current #hash anchor and the current query parameters
+        hash: window.location.hash,
+        query: {
+            ...route.query,
+            p: page,
+            rowsPerPage,
+            sort: descending ? 'DESC' : 'ASC',
         },
-        async onRequest(props) {
-            this.loading = true;
+    });
+}
 
-            const { page, rowsPerPage, sortBy, descending } = props.pagination;
-            let result = await this.$evmEndpoint.get(this.getPath(props));
+async function parseTransactions() {
+    if (loading.value) {
+        return;
+    }
+    loading.value = true;
+    const { page, rowsPerPage, sortBy, descending } = pagination.value;
 
-            if (this.total === null) {
-                this.pagination.rowsNumber = result.data.total.value;
-            }
 
-            this.pagination.page = page;
-            this.pagination.rowsPerPage = rowsPerPage;
-            this.pagination.sortBy = sortBy;
-            this.pagination.descending = descending;
-            this.transactions = result.data.transactions;
-            for (const transaction of this.transactions) {
-                try {
-                    transaction.transfer = false;
-                    transaction.value = formatWei(transaction.value.toLocaleString(0, { useGrouping: false }), 18);
-                    if (transaction.input_data === '0x') {
-                        continue;
-                    }
-                    if(!transaction.to) {
-                        continue;
-                    }
-
-                    const contract = await this.$contractManager.getContract(
-                        transaction.to,
-                    );
-
-                    if (!contract) {
-                        continue;
-                    }
-
-                    const parsedTransaction = await contract.parseTransaction(
-                        transaction.input_data,
-                    );
-                    if (parsedTransaction) {
-                        transaction.parsedTransaction = parsedTransaction;
-                        transaction.contract = contract;
-                    }
-                    // Get ERC20 transfer from main function call
-                    let signature = transaction.input_data.substring(0, 10);
-                    if (
-                        signature &&
-                        TRANSFER_SIGNATURES.includes(signature) &&
-                        transaction.parsedTransaction.args['amount']
-                    ) {
-                        let token = await this.$contractManager.getTokenData(transaction.to, 'erc20');
-                        if(transaction.contract && token && token.decimals){
-                            transaction.transfer = {
-                                'value': `${formatWei(transaction.parsedTransaction.args['amount'], token.decimals)}`,
-                                'symbol': token.symbol,
-                            };
-                        }
-                    }
-                } 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,
-                    });
+    try {
+        let response = await indexerApi.get(getPath());
+        totalRows.value = response.data?.total_count;
+        const results = response.data.results.slice(0, FIVE_HUNDRED_K);
+
+        if (pagination.value.rowsNumber === 0) {
+            pagination.value.rowsNumber = response.data?.total_count > FIVE_HUNDRED_K ? FIVE_HUNDRED_K : response.data?.total_count;
+        }
+
+        pagination.value.page = page;
+        pagination.value.rowsPerPage = rowsPerPage;
+        pagination.value.sortBy = sortBy;
+        pagination.value.descending = descending;
+
+        transactions.splice(
+            0,
+            transactions.length,
+            ...results,
+        );
+        rows.value = transactions;
+        for (const transaction of transactions) {
+            try {
+                if (transaction.input === '0x') {
+                    continue;
+                }
+                if(!transaction.to) {
+                    continue;
                 }
-            }
-            this.rows = this.transactions;
-            this.loading = false;
-        },
-        getPath(props) {
-            const { page, rowsPerPage, descending } = props.pagination;
-            let path = `/v2/evm/get_transactions?limit=${
-                rowsPerPage === 0 ? 500 : rowsPerPage
-            }`;
-            const filter = Object.assign({}, this.filter ? this.filter : {});
-            if (filter.address) {
-                path += `&address=${filter.address}`;
-            }
 
-            if (filter.block) {
-                path += `&block=${filter.block}`;
-            }
+                addEmptyToCache(response.data.contracts, transaction);
+
+                const contract = await contractManager.getContract(transaction.to);
 
-            if (filter.hash) {
-                path += `&hash=${filter.hash}`;
+                if (!contract) {
+                    continue;
+                }
+
+                const parsedTransaction = await contractManager.parseContractTransaction(
+                    transaction, transaction.input, contract, true,
+                );
+                if (parsedTransaction) {
+                    transaction.parsedTransaction = parsedTransaction;
+                }
+                transaction.contract = contract;
+            } catch (e: any) {
+                console.error(
+                    `Failed to parse data for transaction, error was: ${e.message}`,
+                );
+                $q.notify({
+                    message: $t('components.failed_to_parse_transaction', { message: e.message }),
+                    color: 'negative',
+                    position: 'top',
+                    timeout: 5000,
+                });
             }
+        }
+        loading.value = false;
+        rows.value = transactions;
+    } catch (e: any) {
+        $q.notify({
+            type: 'negative',
+            message: $t('components.transaction.load_error'),
+            caption: e.message,
+        });
+        loading.value = false;
+    }
+}
 
-            path += `&skip=${(page - 1) * rowsPerPage}`;
-            path += `&sort=${descending ? 'desc' : 'asc'}`;
+function addEmptyToCache(contracts: any, transaction: any){
+    let found_to = 0;
+    let found_from = 0;
+    for(const contract in contracts){
+        if(contract.toLowerCase() === transaction.to.toLowerCase()) {
+            found_to++;
+        }
+        if(contract.toLowerCase() === transaction.from.toLowerCase()) {
+            found_from++;
+        }
+    }
+    if(found_from === 0){
+        contractManager.addContractToCache(transaction.from, { 'address': transaction.from });
+    }
+    if(found_to === 0){
+        contractManager.addContractToCache(transaction.to, { 'address': transaction.to });
+    }
+}
 
-            return path;
-        },
-        toggleDateFormat() {
-            this.showDateAge = !this.showDateAge;
-        },
-    },
+function getPath() {
+    const { page, rowsPerPage, descending } = pagination.value;
+    const prepend = props.accountAddress ? `address/${props.accountAddress}` : '';
+    let path = `${prepend}/transactions?limit=${
+        rowsPerPage === 0 ? 500 : rowsPerPage
+    }`;
+    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}`;
+        }
+    }
+    return path;
+}
+
+function toggleDateFormat() {
+    showDateAge.value = !showDateAge.value;
+}
+
+function toggleGasValue() {
+    showTotalGasFee.value = !showTotalGasFee.value;
+}
+
+function setHighlightMethod(val: string) {
+    highlightMethod.value = val;
+}
+
+function setHighlightAddress(val: string) {
+    highlightAddress.value = val;
+}
+
+function getValueDisplay(value: string) {
+    return prettyPrintCurrency(
+        BigNumber.from(value),
+        4,
+        locale,
+        false,
+        'TLOS',
+        false,
+        WEI_PRECISION,
+        false,
+    );
+}
+
+const updateLoadingRows = () => {
+    loadingRows.value = [];
+    for (var i = 1; i <= pagination.value.rowsPerPage; i++) {
+        loadingRows.value.push(i);
+    }
 };
+
+watch(() => pagination.value.rowsPerPage, () => {
+    updateLoadingRows();
+});
+
+onBeforeMount(() => {
+    updateLoadingRows();
+});
+
+
 </script>
 
 <template>
-<q-table
-    v-model:pagination="pagination"
-    :rows="rows"
-    :row-key="row => row.hash"
-    :columns="columns"
-    :loading="loading"
-    :rows-per-page-options="page_size_options"
-    flat
-    @request="onPaginationChange"
->
-    <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 }}
-                    <template v-if="col.name === 'date'">
-                        <q-icon
-                            class="info-icon"
-                            name="fas fa-info-circle"
-                            @click="toggleDateFormat"
-                        >
-                            <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
-                                {{ $t('components.click_to_change_format') }}
-                            </q-tooltip>
-                        </q-icon>
+
+<div v-if="totalRows >= FIVE_HUNDRED_K">
+    <div  class="c-transaction-table__limit-text">
+        {{ $t('pages.transactions.five_hundred_k_disclaimer', { total: totalRows.toLocaleString(locale) }) }}
+    </div>
+</div>
+
+
+<q-card>
+    <q-table
+        v-if="!loading"
+        v-model:pagination="pagination"
+        :rows="rows"
+        :binary-state-sort="true"
+        :rows-per-page-label="$t('global.records_per_page')"
+        :row-key="row => row.hash"
+        :columns="(columns as any)"
+        :rows-per-page-options="page_size_options"
+        @request="onPaginationChange"
+    >
+        <template v-slot:header="props">
+            <q-tr :props="props">
+                <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    class="c-transaction-table__cell"
+                >
+                    <div v-if="col.name === 'preview'" class="u-flex--center">
+                        <q-icon class="info-icon" name="far fa-question-circle"/>
+                        <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
+                            {{ $t('pages.transactions.see_tx_preview_tooltip') }}
+                        </q-tooltip>
+                    </div>
+                    <div v-if="col.name === 'date'" class="u-flex--center-y" @click="toggleDateFormat">
+                        <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
+                        <q-icon class="info-icon q-ml-xs" name="far fa-question-circle"/>
+                        <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
+                            {{ $t('components.click_to_change_format') }}
+                        </q-tooltip>
+                    </div>
+                    <div v-else-if="col.name === 'method'" class="u-flex--center-y">
+                        {{ col.label }}
+                        <q-icon class="info-icon" name="far fa-question-circle q-ml-xs" />
+                        <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
+                            {{ $t('components.executed_based_on_decoded_data') }}
+                        </q-tooltip>
+                    </div>
+                    <div v-else-if="col.name === 'fee'" class="u-flex--center-y" @click="toggleGasValue">
+                        <a>{{ showTotalGasFee ? col.label : $t('components.gas_price') }}</a>
+                        <q-icon class="info-icon" name="far fa-question-circle q-ml-xs" />
+                        <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
+                            {{ showTotalGasFee ? $t('components.gas_price_tlos') : $t('components.gas_price_gwei') }}
+                        </q-tooltip>
+                    </div>
+                    <template v-else>
+                        {{ col.label }}
                     </template>
-                    <template v-if="col.name === 'method'">
-                        <q-icon class="info-icon" name="fas fa-info-circle" />
+                </q-th>
+            </q-tr>
+        </template>
+        <template v-slot:body="props">
+            <q-tr :key="props.row.hash + props.row.parsedTransaction?.transfers?.length" :props="props">
+                <q-td key="preview" :props="props" class="c-transaction-table__cell">
+                    <div class="flex items-center">
+                        <TransactionDialog :trx="props.row" />
+                    </div>
+                </q-td>
+                <q-td key="hash" :props="props" class="c-transaction-table__cell">
+                    <div class="c-transaction-table__hash-column flex items-center">
+                        <TransactionField
+                            color="primary"
+                            :transaction-hash="props.row.hash"
+                            :status="props.row.status === '0x1'"
+                            :truncate="18"
+                        />
+                    </div>
+                </q-td>
+                <q-td key="method" :props="props" class="c-transaction-table__cell">
+                    <MethodField
+                        :trx="props.row"
+                        :shortenName="true"
+                        :highlightMethod="highlightMethod"
+                        @highlight="setHighlightMethod"
+                    />
+                </q-td>
+                <q-td key="block" :props="props" class="c-transaction-table__cell">
+                    <BlockField :block="props.row.blockNumber"/>
+                </q-td>
+                <q-td key="date" :props="props" @click="toggleDateFormat">
+                    <DateField :epoch="props.row.timestamp / 1000" :force-show-age="showDateAge"/>
+                </q-td>
+                <q-td key="from" :props="props" class="c-transaction-table__cell">
+                    <AddressField
+                        v-if="props.row.from"
+                        :key="'trx-from-'+ props.row.from"
+                        :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">
+                    <AddressField
+                        v-if="props.row.to"
+                        :key="'trx-to-'+ props.row.to"
+                        :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">
+                    {{ getValueDisplay(props.row.value) }}
+                </q-td>
+                <q-td key='fee' :props="props" class="c-transaction-table__cell">
+                    <TransactionFeeField
+                        :showTotalGasFee="showTotalGasFee"
+                        :gasUsed="props.row.gasused ?? props.row.gasUsed"
+                        :gasPrice="props.row.gasPrice"
+                    />
+                </q-td>
+            </q-tr>
+        </template>
+    </q-table>
+    <q-table
+        v-else
+        v-model:pagination="pagination"
+        :rows="loadingRows"
+        :rows-per-page-label="$t('global.records_per_page')"
+        :columns="(columns as any)"
+        :rows-per-page-options="page_size_options"
+    >
+        <template v-slot:header="props">
+            <q-tr :props="props">
+                <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    class="c-transaction-table__cell"
+                >
+                    <div v-if="col.name === 'preview'" class="u-flex--center">
+                        <q-icon class="info-icon" name="far fa-question-circle"/>
+                        <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
+                            {{ $t('pages.transactions.see_tx_preview_tooltip') }}
+                        </q-tooltip>
+                    </div>
+                    <div v-if="col.name === 'date'" class="u-flex--center-y" @click="toggleDateFormat">
+                        <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
+                        <q-icon class="info-icon q-ml-xs" name="far fa-question-circle"/>
+                        <q-tooltip anchor="bottom middle" self="bottom middle" :offset="[0, 36]">
+                            {{ $t('components.click_to_change_format') }}
+                        </q-tooltip>
+                    </div>
+                    <div v-else-if="col.name === 'method'" class="u-flex--center-y">
+                        {{ col.label }}
+                        <q-icon class="info-icon" name="far fa-question-circle q-ml-xs" />
                         <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
                             {{ $t('components.executed_based_on_decoded_data') }}
                         </q-tooltip>
+                    </div>
+                    <div v-else-if="col.name === 'fee'" class="u-flex--center-y" @click="toggleGasValue">
+                        <a>{{ showTotalGasFee ? col.label : $t('components.gas_price') }}</a>
+                        <q-icon class="info-icon" name="far fa-question-circle q-ml-xs" />
+                        <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
+                            {{ showTotalGasFee ? $t('components.gas_price_tlos') : $t('components.gas_price_gwei') }}
+                        </q-tooltip>
+                    </div>
+                    <template v-else>
+                        {{ col.label }}
                     </template>
-                </div>
-            </q-th>
-        </q-tr>
-    </template>
-    <template v-slot:body="props">
-        <q-tr :props="props">
-            <q-td key="hash" :props="props">
-                <TransactionField :transaction-hash="props.row.hash"/>
-            </q-td>
-            <q-td key="block" :props="props">
-                <BlockField :block="props.row.block"/>
-            </q-td>
-            <q-td key="date" :props="props">
-                <DateField :epoch="props.row.epoch" :force-show-age="showDateAge"/>
-            </q-td>
-            <q-td key="method" :props="props">
-                <MethodField v-if="props.row.parsedTransaction" :trx="props.row" :shortenName="true"/>
-            </q-td>
-            <q-td key="from" :props="props">
-                <AddressField v-if="props.row.from" :address="props.row.from"/>
-            </q-td>
-            <q-td key="to" :props="props">
-                <AddressField
-                    v-if="props.row.to"
-                    :key="props.row.to + ((props.row.contract) ? '1' : '0')"
-                    :address="props.row.to"
-                    :isContractTrx="!!(props.row.contract)"
-                />
-            </q-td>
-            <q-td key="value" :props="props">
-                <span v-if="props.row.value > 0 ||  !props.row.transfer ">
-                    {{ props.row.value }} TLOS
-                </span>
-                <div v-else>
-                    <span v-if="props.row.transfer">
-                        {{ props.row.transfer.value }} {{ props.row.transfer.symbol }}
-                    </span>
-                </div>
-            </q-td>
-        </q-tr>
-    </template>
-</q-table>
+                </q-th>
+            </q-tr>
+        </template>
+        <template v-slot:body="">
+            <q-tr>
+                <q-td key="preview" class="c-transaction-table__cell">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="hash" class="c-transaction-table__cell">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="method" class="c-transaction-table__cell">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="block"  class="c-transaction-table__cell">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="date">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="from"  class="c-transaction-table__cell">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key="to"  class="c-transaction-table__cell">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key='value' class="c-transaction-table__cell">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+                <q-td key='fee' class="c-transaction-table__cell">
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+            </q-tr>
+        </template>
+    </q-table>
+</q-card>
+
 </template>
+<style lang="scss">
+// quasar override
+.sortable {
+    height: 60px;
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+
+.c-transaction-table {
+    &__limit-text {
+        height: 26px;
+        color: var(--text-color);
+        font-size: 0.8rem;
+        text-align: left;
+        margin-bottom: 12px;
+    }
+
+    &__hash-column{
+        min-width: 130px;
+    }
+
+    &__cell {
+        padding: 7px 13px !important;
+    }
+}
+</style>
+
+
diff --git a/src/components/TransferTable.vue b/src/components/TransferTable.vue
index 8d4ea7bf2..20fd1d4aa 100644
--- a/src/components/TransferTable.vue
+++ b/src/components/TransferTable.vue
@@ -2,14 +2,8 @@
 import AddressField from 'components/AddressField';
 import DateField from 'components/DateField';
 import TransactionField from 'components/TransactionField';
-import { ethers, BigNumber } from 'ethers';
-import { formatWei, getTopicHash } from 'src/lib/utils';
-import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
-
-const TRANSFER_EVENT_ERC20_SIGNATURE = '0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef';
-const TRANSFER_EVENT_ERC1155_SIGNATURE = '0xc3d58168c5ae7397731d063d5bbf3d657854427343f4c083240f7aacaa2d0f62';
-const TOKEN_ID_TRUNCATE_LENGTH = 66;
-const DEFAULT_TOKEN_LOGO = '/branding/telos-scan.png';
+import { formatWei, toChecksumAddress } from 'src/lib/utils';
+import { getIcon } from 'src/lib/token-utils';
 
 export default {
     name: 'TransferTable',
@@ -37,35 +31,40 @@ export default {
         },
     },
     data() {
-        // TODO: Add icon column and render it
         const columns = [
             {
                 name: 'hash',
-                label: '',
+                label: this.$t('components.tx_hash'),
                 align: 'left',
             },
             {
                 name: 'date',
+                label: this.$t('components.age'),
+                align: 'left',
+            },
+            {
+                name: 'direction',
                 label: '',
                 align: 'left',
             },
             {
                 name: 'from',
-                label: '',
+                label: this.$t('components.from'),
                 align: 'left',
             },
             {
                 name: 'to',
-                label: '',
+                label: this.$t('components.to'),
                 align: 'left',
             },
             {
                 name: 'value',
-                label: '',
+                label: this.$t('components.value'),
                 align: 'left',
-            }, {
+            },
+            {
                 name: 'token',
-                label: '',
+                label: this.$t('components.token'),
                 align: 'left',
             },
         ];
@@ -73,11 +72,12 @@ export default {
 
         return {
             rows: [],
+            loadingRows: [],
             columns,
             transfers: [],
             pageSize: this.initialPageSize,
             total: null,
-            loading: false,
+            loading: true,
             expectedTopicLength: 0,
             pagination: {
                 sortBy: 'date',
@@ -88,27 +88,22 @@ export default {
             },
             showDateAge: true,
             tokenList: {},
+            highlightAddress: '',
         };
     },
-    async created() {
-        // initialization of the translated texts
-        this.columns[0].label = this.$t('components.tx_hash');
-        this.columns[1].label = this.$t('components.date');
-        this.columns[2].label = this.$t('components.from');
-        this.columns[3].label = this.$t('components.to');
-        this.columns[4].label = this.$t('components.value');
-        this.columns[5].label = this.$t('components.token');
+    created(){
+        this.updateLoadingRows();
     },
     mounted() {
         switch (this.tokenType) {
         case 'erc20':
-            this.expectedTopicLength = 3;
+            this.columns[5].label = this.$t('components.value');
             break;
         case 'erc721':
-            this.expectedTopicLength = 4;
+            this.columns[5].label = this.$t('components.nfts.id');
             break;
         case 'erc1155':
-            this.expectedTopicLength = 4;
+            this.columns[5].label = this.$t('components.nfts.amount');
             break;
         default:
             throw new Error(this.$t('components.unsupported_token_type', { tokenType: this.tokenType }));
@@ -119,95 +114,69 @@ export default {
         });
     },
     methods: {
+        truncatedId(id) {
+            if (id.length > 7) {
+                return `${id.substring(0, 4)}...${id.substring(id.length - 3)}`;
+            } else {
+                return id;
+            }
+        },
+        setHighlightAddress(address) {
+            this.highlightAddress = address;
+        },
+        async updateLoadingRows() {
+            this.loadingRows = [];
+            for (var i = 1; i <= this.pagination.rowsPerPage; i++) {
+                this.loadingRows.push(i);
+            }
+        },
         async onRequest(props) {
             this.loading = true;
 
             const { page, rowsPerPage, sortBy, descending } = props.pagination;
 
-            let result = await this.$evmEndpoint.get(this.getPath(props));
-            if (this.total === null) {
-                this.pagination.rowsNumber = result.data.total.value;
+            let response = await this.$indexerApi.get(this.getPath(props));
+            if (this.total === null && response.data?.total_count) {
+                this.pagination.rowsNumber = response.data.total_count;
             }
 
             this.pagination.page = page;
             this.pagination.rowsPerPage = rowsPerPage;
             this.pagination.sortBy = sortBy;
             this.pagination.descending = descending;
+            this.updateLoadingRows();
 
             let newTransfers = [];
-            for (const transaction of result.data.transactions) {
-                try {
-                    for (const log of transaction.logs) {
-                        if (this.expectedTopicLength !== log.topics.length) {
-                            continue;
-                        }
-
-                        if (!TRANSFER_SIGNATURES.includes(log.topics[0].substr(0, 10).toLowerCase())) {
-                            continue;
-                        }
-
-                        const address = `0x${log.address.substring(log.address.length - 40)}`;
-                        let from, to;
-                        if(this.tokenType === 'erc1155'){
-                            from = getTopicHash(log.topics[2]);
-                            to = getTopicHash(log.topics[3]);
-                        } else {
-                            from = getTopicHash(log.topics[1]);
-                            to = getTopicHash(log.topics[2]);
-                        }
-                        if (
-                            to.toLowerCase() !== this.address.toLowerCase() &&
-                            from.toLowerCase() !== this.address.toLowerCase()
-                        ) {
-                            continue;
-                        }
-
-                        const contract = await this.$contractManager.getContract(
-                            ethers.utils.getAddress(address),
-                            this.tokenType,
-                        );
-
-                        const token = contract.token;
-                        let valueDisplay;
-                        if (this.tokenType === 'erc20') {
-                            if (token && typeof token.decimals === 'number') {
-                                valueDisplay = formatWei(log.data, token.decimals);
-                            } else {
-                                valueDisplay = this.$t('components.unknown_precision');
-                            }
-                        } else {
-                            let tokenId = (this.tokenType === 'erc1155') ?
-                                BigNumber.from(log.data.substr(0, TOKEN_ID_TRUNCATE_LENGTH)).toString() :
-                                BigNumber.from(log.topics[3]).toString();
-                            if(tokenId.length > 15){
-                                tokenId = tokenId.substr(0, 15) + '...';
-                            }
-                            valueDisplay = this.$t('components.token_id', { tokenId });
-                        }
-
-                        const transfer = {
-                            hash: transaction.hash,
-                            epoch: transaction.epoch,
-                            valueDisplay,
-                            address,
-                            from,
-                            to,
-                            ...contract,
-                        };
-
-                        newTransfers.push(transfer);
+            for (const transfer of response.data.results) {
+                const contractData = response.data.contracts[transfer.contract];
+                let valueDisplay;
+                if(this.tokenType === 'erc20'){
+                    if (contractData && contractData.decimals) {
+                        valueDisplay = formatWei(transfer.amount, contractData.decimals);
+                    } else {
+                        valueDisplay = this.$t('components.unknown_precision');
                     }
-
-                } catch (e) {
-                    console.error(
-                        `Failed to parse data for transaction, error was: ${e.message}`,
-                    );
-                    // notify the user
-                    this.$q.notify({
-                        message: this.$t('components.failed_to_parse_transaction', { message: e.message }),
-                        type: 'negative',
-                    });
+                } else if (this.tokenType === 'erc721') {
+                    valueDisplay = '#' + transfer.id.toString();
+                } else if (this.tokenType === 'erc1155') {
+                    valueDisplay = transfer.amount.toString();
+                } else if(transfer.id) {
+                    valueDisplay = '#' + transfer.id.toString();
                 }
+
+                const nTransfer = {
+                    hash: transfer.transaction,
+                    timestamp: transfer.timestamp,
+                    count: transfer.amount,
+                    id: transfer.id,
+                    token: transfer.token,
+                    value: valueDisplay,
+                    contract: contractData,
+                    from: toChecksumAddress(transfer.from),
+                    to: toChecksumAddress(transfer.to),
+                };
+
+                newTransfers.push(nTransfer);
             }
 
             this.transfers.splice(
@@ -215,51 +184,48 @@ export default {
                 this.transfers.length,
                 ...newTransfers,
             );
-
             this.rows = this.transfers;
             this.loading = false;
         },
-        getIcon(row) {
-            if (row.token && row.token.logoURI) {
-                if (row.token.logoURI.startsWith('ipfs://')) {
-                    return row.token.logoURI.replace(/ipfs:\/\//, 'https://ipfs.io/ipfs/');
-                }
-                return row.token.logoURI;
-            } else {
-                return DEFAULT_TOKEN_LOGO;
-            }
-        },
         getPath(props) {
             const { page, rowsPerPage, descending } = props.pagination;
-            let path = `/v2/evm/get_transactions?limit=${
+            let path = `/account/${this.address}/transfers?limit=${
                 rowsPerPage === 0 ? 10 : rowsPerPage
             }`;
-            let signature = TRANSFER_EVENT_ERC20_SIGNATURE;
-            if(this.tokenType === 'erc1155'){
-                signature = TRANSFER_EVENT_ERC1155_SIGNATURE;
-            }
-            path += `&log_topics=${signature},${this.address}`;
-            path += `&skip=${(page - 1) * rowsPerPage}`;
+            path += `&type=${this.tokenType}`;
+            path += `&offset=${(page - 1) * rowsPerPage}&includePagination=true`;
             path += `&sort=${descending ? 'desc' : 'asc'}`;
 
             return path;
         },
+        convertToEpoch(dateString){
+            // date may be returned as date string or epoch depending on api call
+            if (typeof dateString === 'number'){
+                return dateString / 1000;
+            }
+            // convert YYYY-MM-DD hh:mm:ss format returned from api to unix epoch
+            const d = dateString.split(/\D+/);
+            const epoch = new Date(d[0], --d[1], d[1], d[3], d[4], d[5]) / 1000;
+            return epoch;
+        },
         toggleDateFormat() {
             this.showDateAge = !this.showDateAge;
         },
+        getIcon,
+        toChecksumAddress,
     },
 };
 </script>
 
 <template>
 <q-table
+    v-if="!loading"
     v-model:pagination="pagination"
     :rows="rows"
     :row-key="row => row.hash"
     :columns="columns"
-    :loading="loading"
+    :rows-per-page-label="$t('global.records_per_page')"
     :rows-per-page-options="[10, 20, 50]"
-    flat
     @request="onRequest"
 >
     <template v-slot:header="props">
@@ -269,20 +235,25 @@ export default {
                 :key="col.name"
                 :props="props"
             >
-                <div class="u-flex--center-y">
-                    {{ col.label }}
+                <div
+                    v-if="col.name==='date'"
+                    class="u-flex--center-y"
+                    @click="toggleDateFormat"
+                >
+                    <a>{{ showDateAge ? col.label: $t('components.date') }}</a>
 
                     <q-icon
-                        v-if="col.name==='date'"
                         class="info-icon"
-                        name="fas fa-info-circle"
-                        @click="toggleDateFormat"
+                        name="far fa-question-circle"
                     >
                         <q-tooltip anchor="bottom middle" self="bottom middle">
                             {{ $t('components.click_to_change_format') }}
                         </q-tooltip>
                     </q-icon>
                 </div>
+                <div v-else class="u-flex--center-y">
+                    {{ col.label }}
+                </div>
 
             </q-th>
         </q-tr>
@@ -294,38 +265,181 @@ export default {
                 <TransactionField :transaction-hash="props.row.hash"/>
             </q-td>
             <q-td key="date" :props="props">
-                <DateField :epoch="props.row.epoch" :force-show-age="showDateAge" />
+                <DateField :epoch="convertToEpoch(props.row.timestamp)" :force-show-age="showDateAge"/>
+            </q-td>
+            <q-td key="direction" :props="props">
+                <span v-if="toChecksumAddress(address) === toChecksumAddress(props.row.from)" class="direction out">
+                    {{ $t('components.transaction.out').toUpperCase() }}
+                </span>
+                <span
+                    v-else-if="toChecksumAddress(address) === toChecksumAddress(props.row.to)"
+                    class="direction in"
+                >
+                    {{ $t('components.transaction.in').toUpperCase() }}
+                </span>
             </q-td>
             <q-td key="from" :props="props">
-                <AddressField :address="props.row.from"/>
+                <AddressField
+                    v-if="props.row.from"
+                    :key="props.row.from"
+                    :address="props.row.from"
+                    :truncate="16"
+                    :highlightAddress="highlightAddress"
+                    @highlight="setHighlightAddress"
+                />
             </q-td>
             <q-td key="to" :props="props">
-                <AddressField :address="props.row.to"/>
+                <AddressField
+                    v-if="props.row.to"
+                    :key="props.row.to"
+                    :address="props.row.to"
+                    :truncate="16"
+                    :highlightAddress="highlightAddress"
+                    @highlight="setHighlightAddress"
+                />
             </q-td>
             <q-td key="value" :props="props">
-                {{ props.row.valueDisplay }}
+                <span v-if="tokenType==='erc721' && props.row.token?.imageCache">
+                    <q-img
+                        class="nft-icon"
+                        :src="props.row.token.imageCache + '/280.webp'"
+                    />
+                    <q-tooltip>{{ props.row.value }}</q-tooltip>
+                </span>
+                <span v-else-if="tokenType==='erc721' && props.row.value.length > 7">
+                    <span>{{ props.row.value.substr(0, 7) + "..." }}</span>
+                    <q-tooltip>{{ props.row.value }}</q-tooltip>
+                </span>
+                <span v-else>
+                    {{ props.row.value }}
+                </span>
             </q-td>
-            <q-td key="token" :props="props">
-                <q-img v-if="tokenType==='erc20'" class="coin-icon" :src="getIcon(props.row)"/>
+            <q-td key="token" :props="props" class="flex items-center">
                 <AddressField
-                    class="token-name"
-                    :address="props.row.address"
-                    :name="props.row.name"
-                    :truncate="15"
+                    :key="props.row.contract.address"
+                    :address="props.row.contract.address"
+                    :truncate="16"
+                    :highlightAddress="highlightAddress"
+                    @highlight="setHighlightAddress"
                 />
+                <span v-if="tokenType === 'erc1155'" class="q-pl-xs" >
+                    #{{ truncatedId(props.row.id) }}
+                    <q-tooltip>{{ props.row.id }}</q-tooltip>
+                </span>
+            </q-td>
+        </q-tr>
+    </template>
+</q-table>
+<q-table
+    v-else
+    v-model:pagination="pagination"
+    :rows="loadingRows"
+    :row-key="row => row.hash"
+    :columns="columns"
+    :rows-per-page-label="$t('global.records_per_page')"
+    :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
+                    v-if="col.name==='date'"
+                    class="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">
+                            {{ $t('components.click_to_change_format') }}
+                        </q-tooltip>
+                    </q-icon>
+                </div>
+                <div v-else class="u-flex--center-y">
+                    {{ col.label }}
+                </div>
+
+            </q-th>
+        </q-tr>
+    </template>
+
+    <template v-slot:body="">
+        <q-tr>
+            <q-td key="hash" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="date" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="direction" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="from" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="to" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="value" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
+            </q-td>
+            <q-td key="token" >
+                <q-skeleton type="text" class="c-trx-overview__skeleton" />
             </q-td>
         </q-tr>
     </template>
 </q-table>
 </template>
 
-<style lang='sass' scoped>
-.coin-icon
-  width: 20px
-  margin-right: .25rem
-  vertical-align: middle
+<style lang='scss' scoped>
+.direction {
+  user-select: none;
+  padding: 3px 6px;
+  border-radius: 5px;
+  font-size: 0.9em;
+
+  &.in {
+    color: rgb(0, 161, 134);
+    background: rgba(0, 161, 134, 0.1);
+    border: 1px solid rgb(0, 161, 134);
+  }
+
+  &.out {
+    color: #cc9a06 !important;
+    background: rgba(255, 193, 7, 0.1);
+    border: 1px solid #cc9a06 !important;
+  }
+}
+
+.nft-icon {
+  width: 32px;
+  height: 32px;
+  vertical-align: middle;
+  border-radius: 100%;
+}
+
+.coin-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: .25rem;
+  vertical-align: middle;
+  border-radius: 100%;
+}
+
+.token-name {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.info-icon{
+    margin-left: .25rem;
+}
 
-.token-name
-  vertical-align: middle
-  display: inline-block
 </style>
diff --git a/src/components/header/AppHeader.vue b/src/components/header/AppHeader.vue
index 6b6c5a861..52f2880ea 100644
--- a/src/components/header/AppHeader.vue
+++ b/src/components/header/AppHeader.vue
@@ -1,600 +1,38 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-import { mapGetters, mapMutations } from 'vuex';
-import { stlos as stlosLogo } from 'src/lib/logos.js';
-import { directive as clickaway } from 'vue3-click-away';
-import HeaderSearch from 'components/header/HeaderSearch.vue';
-import LanguageSwitcherModal from 'components/header/LanguageSwitcherModal.vue';
-import LoginModal from 'components/LoginModal.vue';
-import LoginStatus from 'components/header/LoginStatus.vue';
-import { RouteLocationRaw } from 'vue-router';
-import { getAntelope, useAccountStore } from 'src/antelope';
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+import { useRoute } from 'vue-router';
 
-export default defineComponent({
-    name: 'AppHeader',
-    components: {
-        LanguageSwitcherModal,
-        LoginModal,
-        HeaderSearch,
-        LoginStatus,
-    },
-    directives: {
-        clickaway,
-    },
-    data: () => ({
-        stlosLogo,
-        mobileMenuIsOpen: false,
-        showLoginModal: false,
-        showLanguageSwitcher: false,
-        advancedMenuExpanded: false,
-        menuHiddenDesktop: false,
-        searchHiddenMobile: true,
-        isTestnet: Number(process.env.NETWORK_EVM_CHAIN_ID) !== 40,
+import AppHeaderBottomBar from 'components/header/AppHeaderBottomBar.vue';
+import AppHeaderTopBar from 'components/header/AppHeaderTopBar.vue';
 
-    }),
-    computed: {
-        ...mapGetters('login', [
-            'isLoggedIn',
-            'isNative',
-        ]),
-    },
-    methods: {
-        ...mapMutations('login', [
-            'setLogin',
-        ]),
-        scrollHandler(info: { direction: string; }) {
-            this.menuHiddenDesktop = info.direction === 'down';
-        },
-        goTo(to: RouteLocationRaw) {
-            this.mobileMenuIsOpen = false;
-            this.advancedMenuExpanded = false;
-            const httpsRegex = /^https/;
-            if (typeof to === 'string' && httpsRegex.test(to)) {
-                window.location.href = to;
-                return;
-            }
-            this.$router.push(to);
-        },
-        handleClickaway() {
-            this.mobileMenuIsOpen = false;
-            this.advancedMenuExpanded = false;
-        },
-        toggleDarkMode() {
-            this.$q.dark.toggle();
-            localStorage.setItem('darkModeEnabled', this.$q.dark.isActive.toString());
+const $q = useQuasar();
+const $route = useRoute();
 
-        },
-        handleLoginLogout() {
-            if (this.isLoggedIn) {
-                this.logout();
-            } else {
-                this.showLoginModal = true;
-            }
-        },
-        logout() {
-            useAccountStore().logout();
-        },
-    },
-    async mounted() {
-
-        // On login we must set the address and record the provider
-        getAntelope().events.onLoggedOut.subscribe(() => {
-            const loginData = localStorage.getItem('loginData');
-            if (this.isNative) {
-                if (!loginData) {
-                    return;
-                }
-                const loginObj = JSON.parse(loginData);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const wallet = this.$ual.getAuthenticators().availableAuthenticators.find(a => a.getName() === loginObj.provider);
-                wallet?.logout();
-            }
-            this.setLogin({});
-            localStorage.removeItem('loginData');
-            this.$providerManager.setProvider(null);
-        });
-    },
-});
+const hideNavTopBar = computed(() => $route.name === 'home' && $q.screen.lt.md);
 </script>
 
 <template>
-<header v-clickaway="handleClickaway" class="c-header shadow-2">
-    <router-link to="/" class="c-header__logo-container u-flex--left">
-        <div class="c-header__logo-image-container">
-            <img
-                alt="Telos EVM logo"
-                src="/branding/telos-scan.png"
-                width="32"
-            >
-            <div v-if="isTestnet" class="c-header__testnet-indicator">
-                Testnet
-            </div>
-        </div>
-
-        <span
-            :class="{
-                'c-header__logo-text': true,
-                'c-header__logo-text--hidden-mobile': !searchHiddenMobile,
-            }"
-        >
-            Teloscan
-        </span>
-    </router-link>
-
-    <div class="c-header__right-container">
-        <div class="c-header__search-container">
-            <HeaderSearch @hidden-mobile="searchHiddenMobile = $event" />
-        </div>
-
-        <div class="c-header__menu-icon-container" @click="mobileMenuIsOpen = !mobileMenuIsOpen">
-            <q-icon
-                :name="mobileMenuIsOpen ? 'menu_open' : 'menu'"
-                size="24px"
-            />
-        </div>
-
-        <div v-if="isLoggedIn" class="c-header__login-status-desktop">
-            <LoginStatus @navigated="mobileMenuIsOpen = false" />
-        </div>
-    </div>
-
-    <div
-        :class="{
-            'c-header__menu-container': true,
-            'c-header__menu-container--expanded-mobile': mobileMenuIsOpen,
-            'c-header__menu-container--hidden-desktop': menuHiddenDesktop,
-        }"
-    >
-        <ul class="c-header__menu-ul" role="menu">
-            <li v-if="isLoggedIn" class="c-header__menu-li c-header__menu-li--login-status">
-                <LoginStatus :is-logged-in="isLoggedIn" @navigated="mobileMenuIsOpen = false" />
-            </li>
-
-            <li
-                class="c-header__menu-li"
-                tabindex="0"
-                role="menuitem"
-                :aria-label="isLoggedIn ? 'logout' : 'login'"
-                @keydown.enter="handleLoginLogout"
-                @click="handleLoginLogout"
-            >
-                <q-icon
-                    :name="isLoggedIn ? 'logout' : 'login'"
-                    class="c-header__menu-item-icon"
-                    size="sm"
-                />
-                {{ isLoggedIn ? $t('components.disconnect') : $t('components.connect_wallet') }}
-            </li>
-
-            <q-separator class="c-header__menu-separator"/>
-
-            <li
-                class="c-header__menu-li cursor-pointer"
-                tabindex="0"
-                role="link"
-                :arial-label="$t('components.header.goto_staking')"
-                @keydown.enter="goTo({ name: 'staking' })"
-                @click="goTo({ name: 'staking' })"
-            >
-                <img
-                    alt="STLOS logo"
-                    :src="stlosLogo"
-                    class="c-header__menu-item-icon c-header__menu-item-icon--stlos"
-                    width="24"
-                >
-                {{ $t('components.header.liq_staking') }}
-            </li>
-
-            <q-separator class="c-header__menu-separator"/>
-
-            <li
-                class="c-header__menu-li"
-                tabindex="0"
-                aria-label="expand advanced menu"
-                role="menuitem"
-                aria-haspopup="menu"
-                @keydown.enter="advancedMenuExpanded = !advancedMenuExpanded"
-                @click="advancedMenuExpanded = !advancedMenuExpanded"
-            >
-                <q-icon
-                    name="code"
-                    class="c-header__menu-item-icon"
-                    size="sm"
-                />
-                <div class="c-header__advanced-container">
-                    <div class="c-header__advanced-container-header">
-                        {{ $t('components.header.advanced') }}
-
-                        <q-icon
-                            :name="advancedMenuExpanded ? 'expand_less' : 'expand_more'"
-                            class="c-header__menu-item-icon c-header__menu-item-icon--chevron"
-                            size="sm"
-                        />
-                    </div>
-                    <ul v-if="advancedMenuExpanded" class="c-header__advanced-menu-desktop">
-                        <li
-                            class="c-header__menu-li"
-                            tabindex="0"
-                            role="menuitem"
-                            :aria-label="'open language switcher'"
-                            @keydown.enter="showLanguageSwitcher = true"
-                            @click="showLanguageSwitcher = true"
-                        >
-                            <q-icon
-                                name="language"
-                                class="c-header__menu-item-icon"
-                                size="sm"
-                            />
-                            {{ $t('global.language') }}
-                        </li>
-                        <li
-                            class="c-header__menu-li"
-                            tabindex="0"
-                            :aria-label="`${$t('components.header.goto_health_monitor')}`"
-                            role="link"
-                            @keydown.enter="goTo('/health')"
-                            @click="goTo('/health')"
-                        >
-                            <q-icon
-                                name="monitor_heart"
-                                class="c-header__menu-item-icon"
-                                size="sm"
-                            />
-                            {{ $t('components.header.health_monitor') }}
-
-                        </li>
-                        <li
-                            class="c-header__menu-li"
-                            tabindex="0"
-                            role="link"
-                            :aria-label="isTestnet ? $t('components.header.goto_mainnet') :
-                                $t('components.header.goto_testnet')
-                            "
-                            @keydown.enter="goTo(isTestnet ? 'https://teloscan.io' : 'https://testnet.teloscan.io')"
-                            @click="goTo(isTestnet ? 'https://teloscan.io' : 'https://testnet.teloscan.io')"
-                        >
-                            <q-icon
-                                name="sync_alt"
-                                class="c-header__menu-item-icon"
-                                size="sm"
-                            />
-                            Teloscan {{ isTestnet ? 'Mainnet' : 'Testnet' }}
-                        </li>
-                    </ul>
-                </div>
-            </li>
-
-            <template v-if="advancedMenuExpanded">
-                <li
-                    class="c-header__menu-li c-header__menu-li--advanced-menu-mobile"
-                    tabindex="0"
-                    role="menuitem"
-                    :aria-label="'open language switcher'"
-                    @keydown.enter="showLanguageSwitcher = true"
-                    @click="showLanguageSwitcher = true"
-                >
-                    <q-icon
-                        name="language"
-                        class="c-header__menu-item-icon"
-                        size="sm"
-                    />
-                    {{ $t('global.language') }}
-                </li>
-                <li
-                    class="c-header__menu-li c-header__menu-li--advanced-menu-mobile"
-                    tabindex="0"
-                    :aria-label="$t('components.header.goto_health_monitor')"
-                    role="link"
-                    @keydown.enter="goTo('/health')"
-                    @click="goTo('/health')"
-                >
-                    <q-icon
-                        name="monitor_heart"
-                        class="c-header__menu-item-icon"
-                        size="sm"
-                    />
-                    {{ $t('components.header.health_status') }}
-                </li>
-                <li
-                    class="c-header__menu-li c-header__menu-li--advanced-menu-mobile"
-                    tabindex="0"
-                    :aria-label="`go to ${isTestnet ? 'main net' : 'test net'}`"
-                    role="link"
-                    @keydown.enter="goTo(isTestnet ? 'https://teloscan.io' : 'https://testnet.teloscan.io')"
-                    @click="goTo(isTestnet ? 'https://teloscan.io' : 'https://testnet.teloscan.io')"
-                >
-                    <q-icon
-                        name="sync_alt"
-                        class="c-header__menu-item-icon"
-                        size="sm"
-                    />
-                    Teloscan {{ isTestnet ? 'Mainnet' : 'Testnet' }}
-                </li>
-            </template>
-
-            <q-separator class="c-header__menu-separator"/>
-
-            <li
-                class="c-header__menu-li"
-                tabindex="0"
-                aria-label="enable dark theme"
-                role="switch"
-                :aria-checked="$q.dark.isActive"
-                @keydown.enter="toggleDarkMode"
-                @click="toggleDarkMode"
-            >
-                <q-icon
-                    :name="$q.dark.isActive ? 'light_mode' : 'dark_mode'"
-                    class="c-header__menu-item-icon"
-                    size="sm"
-                />
-                {{ $q.dark.isActive ? $t('components.header.light_mode') : $t('components.header.dark_mode') }}
-            </li>
-        </ul>
-    </div>
+<header class="c-header">
+    <AppHeaderTopBar v-if="!hideNavTopBar" />
+    <AppHeaderBottomBar :top-bar-hidden="hideNavTopBar" />
 </header>
-<LoginModal :show="showLoginModal" @hide="showLoginModal = false" />
-<LanguageSwitcherModal :show="showLanguageSwitcher" @hide="showLanguageSwitcher = false" />
-<q-scroll-observer @scroll="scrollHandler" />
 </template>
+
 <style lang="scss">
 .c-header {
-    $this: &;
-
     --background-color: white;
-    --text-color: #{$dark};
-    --highlight-color: #{$grey-3};
 
-    background-color: var(--background-color);
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
-    height: 48px;
-    padding: 0 0 0 16px;
     z-index: 999;
     color: var(--text-color);
 
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-
-    @media screen and (min-width: $breakpoint-lg-min) {
-        height: 64px;
-        padding: 0 24px;
-    }
-
     @at-root .body--dark & {
         --background-color: #{$dark};
-        --text-color: white;
         --highlight-color: #{$grey-9};
     }
-
-    &__logo-container {
-        width: 48px;
-        height: 48px;
-
-        @media screen and (min-width: $breakpoint-lg-min) {
-            height: 64px;
-            gap: 12px;
-            color: var(--text-color);
-            font-size: 18px;
-        }
-    }
-
-    &__logo-image-container {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    &__testnet-indicator {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        font-size: 10px;
-        height: min-content;
-        padding: 0 2px;
-        border-radius: 2px;
-        background: rgba($dark, 0.4);
-        color: white;
-    }
-
-    &__logo-text {
-        color: var(--text-color);
-        font-size: 18px;
-        margin-left: 12px;
-
-        &--hidden-mobile {
-            display: none;
-        }
-
-        @media screen and (min-width: $breakpoint-lg-min) {
-            display: block;
-            margin-left: 0;
-        }
-    }
-
-    &__right-container {
-        display: flex;
-        flex-wrap: nowrap;
-        height: 48px;
-
-        @media screen and (min-width: $breakpoint-lg-min) {
-            height: 64px;
-            gap: 16px;
-        }
-    }
-
-    &__search-container {
-        height: 48px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        @media screen and (min-width: $breakpoint-lg-min) {
-            height: 64px;
-        }
-    }
-
-    &__login-status-desktop {
-        display: none;
-
-        @media screen and (min-width: $breakpoint-lg-min) {
-            display: flex;
-            align-items: center;
-        }
-    }
-
-    &__menu-icon-container {
-        width: 48px;
-        height: 48px;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        @media screen and (min-width: $breakpoint-lg-min) {
-            display: none;
-        }
-    }
-
-    &__menu-container {
-        background-color: var(--background-color);
-        position: absolute;
-        top: 48px;
-        right: 0;
-        left: 0;
-        padding: 0 16px;
-        width: 100%;
-        box-shadow:
-            0 4px 5px rgba(0, 0, 0, 0.2),
-            0 2px 2px rgba(0, 0, 0, 0.14),
-            0 3px 1px -2px rgba(0, 0, 0, 0.12);
-
-        display: none;
-
-        @media screen and (min-width: $breakpoint-lg-min) {
-            display: block;
-            top: 64px;
-            transform: translateY(0);
-            transition:
-                0.3s ease transform,
-                0.3s ease box-shadow,
-                0.1s ease opacity;
-            z-index: -1;
-            opacity: 1;
-
-            &--hidden-desktop {
-                opacity: 0;
-                transform: translateY(-128px);
-                box-shadow: none;
-            }
-        }
-
-        &--expanded-mobile {
-            display: block;
-        }
-    }
-
-    &__menu-ul {
-        padding: 0;
-        margin: 0;
-
-        @media screen and (min-width: $breakpoint-lg-min) {
-            display: flex;
-            flex-direction: row-reverse;
-            gap: 16px;
-        }
-    }
-
-    &__menu-li {
-        list-style: none;
-        padding: 12px 0;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-        border-radius: 4px;
-
-        &:hover,
-        &:focus,
-        &:active {
-            @media screen and (min-width: $breakpoint-lg-min) {
-                background-color: var(--highlight-color);
-            }
-
-            & > #{$this}__menu-item-icon:not(#{$this}__menu-item-icon--chevron) {
-                filter: grayscale(0);
-                color: $secondary;
-            }
-        }
-
-        @media screen and (min-width: $breakpoint-lg-min) {
-            padding: 12px 16px;
-        }
-
-        &--login-status {
-            cursor: default;
-
-            @media screen and (min-width: $breakpoint-lg-min) {
-                display: none;
-            }
-        }
-
-        &--advanced-menu-mobile {
-            margin-left: 24px;
-
-            @media screen and (min-width: $breakpoint-lg-min) {
-                display: none;
-            }
-        }
-    }
-
-    &__menu-separator {
-        @media screen and (min-width: $breakpoint-lg-min) {
-            display: none;
-        }
-    }
-
-    &__menu-item-icon {
-        margin-right: 8px;
-        transition: 0.2s ease all;
-
-        &--stlos {
-            filter: grayscale(1);
-        }
-    }
-
-    &__advanced-container {
-        width: 100%;
-        position: relative;
-    }
-
-    &__advanced-container-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-    }
-
-    &__advanced-menu-desktop {
-        display: none;
-
-        @media screen and (min-width: $breakpoint-lg-min) {
-            padding: 0;
-            display: block;
-            position: absolute;
-            top: 36px;
-            left: -48px;
-            background-color: var(--background-color);
-            width: max-content;
-            border-radius: 0 0 4px 4px;
-            box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
-        }
-    }
 }
 </style>
diff --git a/src/components/header/AppHeaderBottomBar.vue b/src/components/header/AppHeaderBottomBar.vue
new file mode 100644
index 000000000..9ed68f3e4
--- /dev/null
+++ b/src/components/header/AppHeaderBottomBar.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+import { IS_TESTNET } from 'src/lib/chain-utils';
+
+import OutlineButton from 'components/OutlineButton.vue';
+import AppHeaderWallet from 'components/header/AppHeaderWallet.vue';
+import AppHeaderLinks from 'components/header/AppHeaderLinks.vue';
+
+const $q = useQuasar();
+const { t: $t } = useI18n();
+
+defineProps<{
+    topBarHidden: boolean;
+}>();
+
+const menuBottomBarHidden = ref(false);
+const menuVisibleMobile = ref(false);
+
+watchEffect(() => {
+    if (!menuVisibleMobile.value) {
+        (document.activeElement as HTMLElement | null)?.blur();
+    }
+});
+
+function scrollHandler(info: { direction: string; }) {
+    menuBottomBarHidden.value = info.direction === 'down';
+}
+</script>
+
+<template>
+<div
+    :class="{
+        'c-header-bottom-bar': true,
+        'c-header-bottom-bar--no-top-bar': topBarHidden,
+        'c-header-bottom-bar--hidden': menuBottomBarHidden,
+    }"
+>
+    <div class="c-header-bottom-bar__inner-container">
+        <router-link to="/" class="c-header-bottom-bar__logo-container">
+            <div class="c-header-bottom-bar__logo-image-container">
+                <img
+                    :alt="$t('components.header.telos_evm_logo_alt')"
+                    src="/branding/telos-scan.png"
+                    height="32"
+                >
+            </div>
+
+            <div class="c-header-bottom-bar__logo-text-container">
+                <span class="c-header-bottom-bar__logo-text">
+                    Teloscan
+                </span>
+                <span v-if="IS_TESTNET" class="c-header-bottom-bar__testnet-indicator">
+                    Testnet
+                </span>
+            </div>
+        </router-link>
+
+        <nav class="c-header-bottom-bar__right-container">
+            <AppHeaderWallet v-if="$q.screen.lt.md" class="q-mr-sm" />
+
+            <OutlineButton
+                text-color="default"
+                :icon-only="true"
+                class="c-header-bottom-bar__menu-button"
+                @click="menuVisibleMobile = !menuVisibleMobile"
+            >
+                <q-icon :name="menuVisibleMobile ? 'menu_open' : 'menu'" size="24px" />
+            </OutlineButton>
+
+            <AppHeaderLinks
+                :menu-visible-mobile="menuVisibleMobile"
+                @close-menu="menuVisibleMobile = false"
+            />
+        </nav>
+    </div>
+</div>
+
+<q-scroll-observer @scroll="scrollHandler" />
+</template>
+
+<style lang="scss">
+.c-header-bottom-bar {
+    padding: 0 12px;
+    position: absolute;
+    top: var(--top-bar-height);
+    left: 0;
+    right: 0;
+    height: var(--bottom-bar-height);
+
+    background: var(--background-color);
+    border-bottom: 1px solid var(--border-color);
+    transition: 0.3s ease transform;
+    z-index: -1;
+
+    @media screen and (min-width: $breakpoint-lg-min) {
+        padding: 0;
+    }
+
+    &--no-top-bar {
+        top: 0;
+    }
+
+    &--hidden:not(:focus-within) {
+        transform: translateY(-100%);
+    }
+
+    &__logo-container {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--text-color);
+    }
+
+    &__logo-image-container {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__logo-text-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+        }
+    }
+
+    &__logo-text {
+        font-size: 1rem;
+        font-weight: 700;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            font-size: 1.3rem;
+        }
+    }
+
+    &__testnet-indicator {
+        font-size: 0.6rem;
+        font-weight: 600;
+        color: var(--grey-text-color);
+        position: relative;
+        top: -4px;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            position: static;
+            top: unset;
+            align-self: self-start;
+        }
+    }
+
+    &__inner-container {
+        max-width: 1200px;
+        height: 100%;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__right-container {
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    &__menu-button {
+        @media screen and (min-width: $breakpoint-md-min) {
+            display: none;
+        }
+    }
+}
+</style>
diff --git a/src/components/header/AppHeaderLinks.vue b/src/components/header/AppHeaderLinks.vue
new file mode 100644
index 000000000..a75268d4a
--- /dev/null
+++ b/src/components/header/AppHeaderLinks.vue
@@ -0,0 +1,619 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+import {
+    IS_MAINNET,
+    IS_TESTNET,
+    TELOSCAN_MAINNET_URL,
+    TELOSCAN_TESTNET_URL,
+} from 'src/lib/chain-utils';
+
+import LanguageSwitcherModal from 'components/header/LanguageSwitcherModal.vue';
+import OutlineButton from 'components/OutlineButton.vue';
+
+const $route = useRoute();
+const $router = useRouter();
+const $q = useQuasar();
+const { t: $t } = useI18n();
+
+defineProps<{
+    menuVisibleMobile: boolean;
+}>();
+const emit = defineEmits(['close-menu']);
+
+
+const blockchainSubmenuItems = [
+    { name: 'transactions', label: $t('components.header.transactions') },
+    { name: 'blocks', label: $t('components.header.blocks') },
+];
+
+const teloscanSwaggerUrl = IS_MAINNET
+    ? 'https://api.teloscan.io/v1/docs'
+    : 'https://api.testnet.teloscan.io/v1/docs';
+
+const telosWalletUrl = IS_MAINNET
+    ? 'https://wallet.telos.net/'
+    : 'https://wallet-dev.telos.net/';
+
+const telosBridgeUrl = IS_MAINNET
+    ? 'https://bridge.telos.net/bridge'
+    : 'https://telos-bridge-testnet.netlify.app/bridge';
+
+const developersSubmenuItems = [
+    {
+        url: teloscanSwaggerUrl,
+        label: $t('components.header.api_documentation'),
+    },
+    {
+        url: 'https://sourcify.dev/',
+        label: $t('components.header.verify_contract_sourcify'),
+    },
+];
+
+const telos_walletMenuItem = {
+    url: telosWalletUrl,
+    label: `${$t('components.header.telos_wallet')}/Staking`,
+};
+
+
+const telos_bridgeMenuItem = {
+    url: telosBridgeUrl,
+    label: $t('components.header.telos_bridge'),
+};
+
+const moreSubmenuItems = {
+    internal: [
+        // { name: 'export', label: $t('components.header.csv_export') },
+        { name: 'health', label: $t('components.header.health_monitor') },
+    ],
+    external: [
+        {
+            url: 'https://www.telos.net/ecosystem',
+            label: $t('components.header.telos_ecosystem'),
+        },
+    ],
+};
+
+const networksMenuItems = {
+    mainnet: [{
+        url: TELOSCAN_MAINNET_URL,
+        label: 'Telos Mainnet',
+    }],
+    testnet: [{
+        url: TELOSCAN_TESTNET_URL,
+        label: 'Telos Testnet',
+    }],
+};
+
+const blockchainMenuExpandedMobile = ref(false);
+const developersMenuExpandedMobile = ref(false);
+const moreMenuExpandedMobile = ref(false);
+const networkMenuExpandedMobile = ref(false);
+const showLanguageSwitcher = ref(false);
+
+const highlightBlockchainMenuItem = computed(() => blockchainSubmenuItems.some(({ name }) => name === $route.name));
+const highlightMoreMenuItem = computed(() => moreSubmenuItems.internal.some(({ name }) => name === $route.name));
+
+watch(() => $q.screen, () => {
+    closeAllMenus();
+}, { deep: true });
+
+function blurActiveElement() {
+    (document.activeElement as HTMLElement | null)?.blur();
+}
+
+function closeAllMenus() {
+    emit('close-menu');
+    blockchainMenuExpandedMobile.value = false;
+    developersMenuExpandedMobile.value = false;
+    moreMenuExpandedMobile.value = false;
+    networkMenuExpandedMobile.value = false;
+}
+
+function toggleDarkMode() {
+    $q.dark.toggle();
+    localStorage.setItem('darkModeEnabled', $q.dark.isActive.toString());
+}
+
+function getIsCurrentNetworkMenuItem(url: string) {
+    if (url === TELOSCAN_MAINNET_URL) {
+        return IS_MAINNET;
+    }
+
+    if (url === TELOSCAN_TESTNET_URL) {
+        return IS_TESTNET;
+    }
+
+    return false;
+}
+
+function goTo(to: string | { name: string }) {
+    blurActiveElement();
+    closeAllMenus();
+
+    const httpsRegex = /^https/;
+    if (typeof to === 'string' && httpsRegex.test(to)) {
+        window.open(to, '_blank');
+        return;
+    }
+
+    $router.push(to);
+}
+</script>
+
+<template>
+<ul
+    :class="{
+        'c-header-links': true,
+        'c-header-links--visible-mobile shadow-4': menuVisibleMobile && $q.screen.lt.md,
+    }"
+>
+    <!-- Home -->
+    <router-link
+        :class="{
+            'c-header-links__menu-li': true,
+            'c-header-links__menu-li--current': $route.name === 'home',
+        }"
+        tabindex="0"
+        role="link"
+        :to="{ name: 'home' }"
+        @click="closeAllMenus"
+        @keydown.enter="goTo({ name: 'home' })"
+    >
+        {{ $t('components.header.home') }}
+    </router-link>
+
+    <!-- Blockchain -->
+    <li
+        :class="{
+            'c-header-links__menu-li c-header-links__menu-li--expandable': true,
+            'c-header-links__menu-li--current': highlightBlockchainMenuItem,
+            'c-header-links__menu-li--expanded-mobile': blockchainMenuExpandedMobile,
+        }"
+        tabindex="0"
+        :aria-expanded="$q.screen.lt.md ? blockchainMenuExpandedMobile : undefined"
+        :aria-controls="$q.screen.lt.md ? 'app-header-blockchain-submenu-ul' : undefined"
+        :aria-labelledby="$q.screen.lt.md ? 'app-header-blockchain-submenu-label' : undefined"
+        @mouseleave="blurActiveElement"
+        @click="blockchainMenuExpandedMobile = !blockchainMenuExpandedMobile"
+        @keydown.enter="blockchainMenuExpandedMobile = !blockchainMenuExpandedMobile"
+    >
+        <div id="app-header-blockchain-submenu-label" class="c-header-links__menu-li-text">
+            {{ $t('components.header.blockchain') }}
+            <q-icon name="fas fa-chevron-down" size="12px" />
+        </div>
+
+        <ul
+            id="app-header-blockchain-submenu-ul"
+            :class="{
+                'c-header-links__submenu-ul': true,
+                'shadow-4': $q.screen.gt.sm,
+            }"
+        >
+            <router-link
+                v-for="item in blockchainSubmenuItems"
+                :key="`blockchain-submenu-item-${item.name}`"
+                :class="{
+                    'c-header-links__submenu-li': true,
+                    'c-header-links__submenu-li--current': $route.name === item.name,
+                }"
+                tabindex="0"
+                role="link"
+                :to="{ name: item.name }"
+                @click="closeAllMenus"
+                @keydown.enter="goTo({ name: item.name })"
+            >
+                {{ item.label }}
+            </router-link>
+        </ul>
+    </li>
+
+    <!-- Developers -->
+    <li
+        :class="{
+            'c-header-links__menu-li c-header-links__menu-li--expandable': true,
+            'c-header-links__menu-li--expanded-mobile': developersMenuExpandedMobile,
+        }"
+        tabindex="0"
+        :aria-expanded="$q.screen.lt.md ? developersMenuExpandedMobile : undefined"
+        :aria-controls="$q.screen.lt.md ? 'app-header-developers-submenu-ul' : undefined"
+        :aria-labelledby="$q.screen.lt.md ? 'app-header-developers-submenu-label' : undefined"
+        @mouseleave="blurActiveElement"
+        @click="developersMenuExpandedMobile = !developersMenuExpandedMobile"
+        @keydown.enter="developersMenuExpandedMobile = !developersMenuExpandedMobile"
+    >
+        <div id="app-header-developers-submenu-label" class="c-header-links__menu-li-text">
+            {{ $t('components.header.developers') }}
+            <q-icon name="fas fa-chevron-down" size="12px" />
+        </div>
+
+        <ul
+            id="app-header-developers-submenu-ul"
+            :class="{
+                'c-header-links__submenu-ul': true,
+                'shadow-4': $q.screen.gt.sm,
+            }"
+        >
+            <li
+                v-for="item in developersSubmenuItems"
+                :key="`developer-submenu-item-${item.label}`"
+                class="c-header-links__submenu-li"
+                tabindex="0"
+                role="link"
+                @keydown.enter="goTo(item.url)"
+            >
+                <a
+                    class="u-flex--center-y"
+                    :href="item.url"
+                    target="_blank"
+                >
+                    {{ item.label }}
+                    <q-icon name="fas fa-external-link-alt" size="12px" class="q-ml-sm" />
+                </a>
+            </li>
+        </ul>
+    </li>
+
+    <!-- Telos Wallet -->
+    <li
+        class="c-header-links__menu-li"
+        tabindex="0"
+        role="link"
+        @keydown.enter="goTo(telos_walletMenuItem.url)"
+    >
+        <a :href="telos_walletMenuItem.url" target="_blank">
+            {{ telos_walletMenuItem.label }}
+        </a>
+    </li>
+
+    <!-- Telos Bridge -->
+    <li
+        class="c-header-links__menu-li"
+        tabindex="0"
+        role="link"
+        @keydown.enter="goTo(telos_bridgeMenuItem.url)"
+    >
+        <a :href="telos_bridgeMenuItem.url" target="_blank">
+            {{ telos_bridgeMenuItem.label }}
+        </a>
+    </li>
+
+    <!-- More -->
+    <li
+        :class="{
+            'c-header-links__menu-li c-header-links__menu-li--expandable': true,
+            'c-header-links__menu-li--current': highlightMoreMenuItem,
+            'c-header-links__menu-li--expanded-mobile': moreMenuExpandedMobile,
+        }"
+        tabindex="0"
+        :aria-expanded="$q.screen.lt.md ? moreMenuExpandedMobile : undefined"
+        :aria-controls="$q.screen.lt.md ? 'app-header-more-submenu-ul' : undefined"
+        :aria-labelledby="$q.screen.lt.md ? 'app-header-more-submenu-label' : undefined"
+        @mouseleave="blurActiveElement"
+        @click="moreMenuExpandedMobile = !moreMenuExpandedMobile"
+        @keydown.enter="moreMenuExpandedMobile = !moreMenuExpandedMobile"
+    >
+        <div id="app-header-more-submenu-label" class="c-header-links__menu-li-text">
+            {{ $t('components.header.more') }}
+            <q-icon name="fas fa-chevron-down" size="12px" />
+        </div>
+
+        <ul
+            id="app-header-more-submenu-ul"
+            :class="{
+                'c-header-links__submenu-ul c-header-links__submenu-ul--rightmost': true,
+                'shadow-4': $q.screen.gt.sm,
+            }"
+        >
+            <li
+                class="c-header-links__submenu-li"
+                tabindex="0"
+                role="button"
+                :aria-label="$t('components.header.open_language_switcher')"
+                @keydown.enter="showLanguageSwitcher = true"
+                @click="showLanguageSwitcher = true"
+            >
+                <div class="u-flex--center-y">
+                    {{ $t('global.language') }}
+                    <q-icon name="fas fa-language" size="16px" class="q-ml-sm" />
+                </div>
+            </li>
+
+            <router-link
+                v-for="item in moreSubmenuItems.internal"
+                :key="`more-submenu-item-internal-${item.name}`"
+                :class="{
+                    'c-header-links__submenu-li': true,
+                    'c-header-links__submenu-li--current': $route.name === item.name,
+                }"
+                tabindex="0"
+                :to="{ name: item.name }"
+                @keydown.enter="goTo({ name: item.name })"
+            >
+                {{ item.label }}
+            </router-link>
+
+            <li
+                v-for="item in moreSubmenuItems.external"
+                :key="`more-submenu-item-external-${item.label}`"
+                class="c-header-links__submenu-li"
+                tabindex="0"
+                role="link"
+                @click="goTo(item.url)"
+                @keydown.enter="goTo(item.url)"
+            >
+                <a
+                    class="u-flex--center-y"
+                    :href="item.url"
+                    target="_blank"
+                >
+                    {{ item.label }}
+                    <q-icon name="fas fa-external-link-alt" size="12px" class="q-ml-sm" />
+                </a>
+            </li>
+        </ul>
+    </li>
+
+    <!-- Networks -->
+    <li
+        v-if="$q.screen.lt.md"
+        :class="{
+            'c-header-links__menu-li c-header-links__menu-li--expandable': true,
+            'c-header-links__menu-li--expanded-mobile': networkMenuExpandedMobile,
+        }"
+        tabindex="0"
+        :aria-expanded="$q.screen.lt.md ? networkMenuExpandedMobile : undefined"
+        :aria-controls="$q.screen.lt.md ? 'app-header-network-submenu-ul' : undefined"
+        :aria-labelledby="$q.screen.lt.md ? 'app-header-network-submenu-label' : undefined"
+        @mouseleave="blurActiveElement"
+        @click="networkMenuExpandedMobile = !networkMenuExpandedMobile"
+        @keydown.enter="networkMenuExpandedMobile = !networkMenuExpandedMobile"
+    >
+        <div id="app-header-network-submenu-label" class="c-header-links__menu-li-text">
+            {{ $t('components.header.network') }}
+            <q-icon name="fas fa-chevron-down" size="12px" />
+        </div>
+
+        <ul
+            id="app-header-network-submenu-ul"
+            :class="{
+                'c-header-links__submenu-ul': true,
+                'shadow-4': $q.screen.gt.sm,
+            }"
+        >
+            <li
+                v-for="item in networksMenuItems.mainnet"
+                :key="`networks-submenu-item-mainnet-${item.label}`"
+                :class="{
+                    'c-header-links__submenu-li': true,
+                    'c-header-links__submenu-li--current': getIsCurrentNetworkMenuItem(item.url),
+                }"
+                tabindex="0"
+                role="link"
+                @click="goTo(item.url)"
+                @keydown.enter="goTo(item.url)"
+            >
+                {{ item.label }}
+            </li>
+
+            <q-separator />
+
+            <li
+                v-for="item in networksMenuItems.testnet"
+                :key="`networks-submenu-item-testnet-${item.label}`"
+                :class="{
+                    'c-header-links__submenu-li': true,
+                    'c-header-links__submenu-li--current': getIsCurrentNetworkMenuItem(item.url),
+                }"
+                tabindex="0"
+                role="link"
+                @click="goTo(item.url)"
+                @keydown.enter="goTo(item.url)"
+            >
+                {{ item.label }}
+            </li>
+        </ul>
+    </li>
+
+    <!-- Theme Toggle -->
+    <li v-if="$q.screen.lt.md" class="c-header-links__menu-li">
+        <OutlineButton
+            text-color="default"
+            class="c-header-links__theme-toggle"
+            @click="toggleDarkMode"
+        >
+            <q-icon
+                v-if="$q.dark.isActive"
+                name="light_mode"
+                size="16px"
+                color="primary"
+                class="q-mr-sm"
+            />
+            <q-icon
+                v-else
+                name="far fa-moon"
+                size="14px"
+                color="primary"
+                class="q-mr-sm"
+            />
+            {{ $t(`components.header.switch_to_${$q.dark.isActive ? 'light' : 'dark'}_theme`) }}
+        </OutlineButton>
+    </li>
+</ul>
+
+<LanguageSwitcherModal :show="showLanguageSwitcher" @hide="showLanguageSwitcher = false" />
+</template>
+
+<style lang="scss">
+.c-header-links {
+    $this: &;
+
+    // other CSS vars defined in AppHeader.vue
+    --highlight-color: #{$grey-3};
+
+    @at-root .body--dark & {
+        --highlight-color: #{$grey-9};
+    }
+
+    display: none;
+    height: 100%;
+    list-style: none;
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+
+    @media screen and (min-width: $breakpoint-md-min) {
+        display: flex;
+    }
+
+    &--visible-mobile {
+        position: absolute;
+        display: flex;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        top: 52px;
+        height: max-content;
+        background-color: var(--background-color);
+
+        #{$this}__menu-li--expandable {
+            justify-content: space-between;
+        }
+
+        #{$this}__menu-li--expanded-mobile {
+            #{$this}__submenu-ul {
+                display: block;
+                width: 100%;
+                border: 1px solid var(--border-color);
+                border-radius: 8px;
+                padding: 12px;
+            }
+        }
+    }
+
+    &__menu-li {
+        color: var(--text-color);
+        padding: 8px 16px;
+        display: flex;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+        font-weight: 500;
+
+        &:not(&--expandable):hover {
+            color: var(--q-primary);
+        }
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            padding: 8px;
+        }
+
+        &--expandable {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 8px;
+
+            @media screen and (min-width: $breakpoint-md-min) {
+                position: relative;
+                cursor: default;
+                gap: 4px;
+                align-items: center;
+                flex-direction: row;
+
+                &:hover,
+                &:focus,
+                &:focus-within {
+                    #{$this}__submenu-ul {
+                        opacity: 1;
+                        visibility: visible;
+                        transform: translateY(0);
+                    }
+                }
+            }
+        }
+
+        &--current {
+            color: var(--q-primary);
+        }
+
+        & a:not(#{$this}__submenu-li--current) {
+            color: inherit;
+        }
+    }
+
+    &__menu-li-text {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            gap: 8px;
+        }
+    }
+
+    &__submenu-ul {
+        transition: 0.2s ease all;
+
+        display: none;
+        z-index: 999;
+        list-style: none;
+        color: var(--text-color);
+        font-weight: normal;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            display: block;
+            opacity: 0;
+            padding: 12px;
+            visibility: hidden;
+            transform: translateY(8px);
+            position: absolute;
+            top: calc(100% - 1px);
+            left: 0;
+            justify-content: space-between;
+            border-radius: 0 0 4px 4px;
+            background-color: var(--background-color);
+            border-top: 2px solid var(--q-primary);
+
+            &--rightmost {
+                right: 0;
+                left: unset;
+            }
+        }
+    }
+
+    &__submenu-li {
+        padding: 8px;
+        cursor: pointer;
+        user-select: none;
+        transition: 0.2s ease all;
+        border-radius: 8px;
+        min-width: max-content;
+
+        display: list-item;
+        text-align: -webkit-match-parent;
+        color: var(--text-color);
+
+        &:hover,
+        &:active {
+            color: var(--text-color);
+            background-color: var(--highlight-color);
+        }
+
+        &--current {
+            color: var(--q-primary);
+        }
+
+        & a {
+            color: inherit;
+        }
+    }
+
+    &__theme-toggle {
+        width: 100%;
+    }
+}
+</style>
diff --git a/src/components/header/AppHeaderTopBar.vue b/src/components/header/AppHeaderTopBar.vue
new file mode 100644
index 000000000..97a71706a
--- /dev/null
+++ b/src/components/header/AppHeaderTopBar.vue
@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import {
+    computed,
+    onBeforeMount,
+    onBeforeUnmount,
+    onMounted,
+} from 'vue';
+import { useQuasar } from 'quasar';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { formatUnits } from 'ethers/lib/utils';
+import { useRoute } from 'vue-router';
+
+import { useChainStore } from 'src/antelope';
+import {
+    IS_MAINNET,
+    IS_TESTNET,
+    TELOSCAN_MAINNET_URL,
+    TELOSCAN_TESTNET_URL,
+    // BETA_TELOSCAN_MAINNET_URL,
+    // BETA_TELOSCAN_TESTNET_URL,
+} from 'src/lib/chain-utils';
+
+import AppHeaderWallet from 'components/header/AppHeaderWallet.vue';
+import OutlineButton from 'components/OutlineButton.vue';
+import AppSearch from 'components/AppSearch.vue';
+
+const $route = useRoute();
+const $q = useQuasar();
+const $store = useStore();
+const $i18n = useI18n();
+const $t = $i18n.t;
+const chainStore = useChainStore();
+
+
+let pricesInterval: ReturnType<typeof setInterval> | null = null;
+
+const locale = computed(() => $i18n.locale.value);
+const hideSearchBar = computed(() => $route.name ==='home');
+const systemTokenSymbol = computed(() => chainStore.currentChain.settings.getSystemToken().symbol);
+const gasPriceInGwei = computed(() => {
+    if (IS_TESTNET) {
+        return '';
+    }
+
+    const gasPrice = $store.getters['chain/gasPrice'];
+
+    if (!gasPrice) {
+        return '';
+    }
+
+    const gasGwei = Number(formatUnits(gasPrice, 'gwei'));
+    const gasGweiNoDecimals = Number(gasGwei.toFixed(0));
+    return gasGweiNoDecimals.toLocaleString(locale.value);
+});
+const tlosPrice = computed(() => {
+    if (IS_TESTNET) {
+        return '';
+    }
+
+    const price = $store.getters['chain/tlosPrice'];
+    const priceTwoDecimals = Number(Number(price).toFixed(2));
+    return priceTwoDecimals.toLocaleString(locale.value, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+});
+
+onBeforeMount(() => {
+    if (IS_MAINNET) {
+        fetchTlosPrice();
+        fetchGasPrice();
+    }
+});
+
+onMounted(async () => {
+    pricesInterval = setInterval(() => {
+        fetchTlosPrice();
+        fetchGasPrice();
+    }, 6000);
+});
+
+onBeforeUnmount(() => {
+    if (pricesInterval) {
+        clearInterval(pricesInterval);
+    }
+});
+
+const fetchTlosPrice = () => $store.dispatch('chain/fetchTlosPrice');
+const fetchGasPrice = () => $store.dispatch('chain/fetchGasPrice');
+
+function toggleDarkMode() {
+    $q.dark.toggle();
+    localStorage.setItem('darkModeEnabled', $q.dark.isActive.toString());
+}
+
+function goToTeloscanMainnet() {
+    if (IS_MAINNET) {
+        return;
+    }
+    window.open(TELOSCAN_MAINNET_URL, '_blank');
+}
+
+function goToTeloscanTestnet() {
+    if (IS_TESTNET) {
+        return;
+    }
+    window.open(TELOSCAN_TESTNET_URL, '_blank');
+}
+</script>
+
+<template>
+<div class="c-header-top-bar">
+    <div class="c-header-top-bar__inner-container">
+        <div class="c-header-top-bar__left-container">
+            <div v-if="IS_MAINNET" class="text-caption q-mr-md">
+                <span class="c-header-top-bar__grey-text">
+                    {{ $t('components.header.system_token_price', { token: systemTokenSymbol }) }}
+                </span> ${{ tlosPrice }}
+            </div>
+
+            <div v-if="IS_MAINNET" class="text-caption u-flex--center-y">
+                <q-icon name="fas fa-gas-pump" class="c-header-top-bar__grey-text q-mr-xs" />
+                <span class="c-header-top-bar__grey-text">
+                    {{ $t('components.header.gas') }}:
+                </span>&nbsp;{{ gasPriceInGwei }} gwei
+            </div>
+        </div>
+
+        <div class="c-header-top-bar__right-container">
+            <AppSearch v-if="!hideSearchBar" />
+
+            <OutlineButton
+                text-color="primary"
+                :icon-only="true"
+                class="c-header-top-bar__theme-toggle"
+                @click="toggleDarkMode"
+            >
+                <q-icon v-if="$q.dark.isActive" name="light_mode" size="16px" />
+                <q-icon v-else name="far fa-moon" size="14px" />
+
+                <q-tooltip>
+                    {{ $t(`components.header.switch_to_${$q.dark.isActive ? 'light' : 'dark'}_theme`) }}
+                </q-tooltip>
+            </OutlineButton>
+
+            <AppHeaderWallet v-if="$q.screen.gt.sm" />
+
+            <OutlineButton
+                v-if="$q.screen.gt.sm"
+                text-color="primary"
+                :icon-only="true"
+            >
+                <img src="branding/telos.png" height="24" width="24">
+
+                <q-menu>
+                    <q-list>
+                        <q-item
+                            clickable
+                            role="link"
+                            @click="goToTeloscanMainnet"
+                            @keydown.enter="goToTeloscanMainnet"
+                        >
+                            <q-item-section :class="IS_MAINNET ? 'text-primary' : ''">
+                                Telos Mainnet
+                            </q-item-section>
+                        </q-item>
+                        <q-separator />
+                        <q-item
+                            clickable
+                            role="link"
+                            @click="goToTeloscanTestnet"
+                            @keydown.enter="goToTeloscanTestnet"
+                        >
+                            <q-item-section :class="IS_TESTNET ? 'text-primary' : ''">
+                                Telos Testnet
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </q-menu>
+
+                <q-tooltip>
+                    {{ $t('components.header.view_other_networks') }}
+                </q-tooltip>
+            </OutlineButton>
+        </div>
+    </div>
+</div>
+</template>
+
+<style lang="scss">
+.c-header-top-bar {
+    // CSS vars defined in AppHeader.vue
+
+    border-bottom: 1px solid var(--border-color);
+    height: var(--top-bar-height);
+    background-color: var(--background-color);
+
+    &__grey-text {
+        color: var(--grey-text-color);
+    }
+
+    &__inner-container {
+        height: 48px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            justify-content: space-between;
+        }
+
+        @media screen and (min-width: $breakpoint-lg-min) {
+            padding: 0;
+        }
+    }
+
+    &__left-container {
+        display: none;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            width: max-content;
+            display: flex;
+            flex-direction: row;
+            padding-left: 12px;
+        }
+
+        @media screen and (min-width: $breakpoint-lg-min) {
+            padding-left: 0;
+        }
+    }
+
+    &__right-container {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 12px;
+        padding: 0 12px;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            width: auto;
+            padding: 0;
+        }
+
+        @media screen and (min-width: $breakpoint-lg-min) {
+            padding: 0;
+            width: auto;
+        }
+    }
+
+    &__theme-toggle {
+        display: none;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            display: inline-flex;
+        }
+    }
+}
+</style>
diff --git a/src/components/header/AppHeaderWallet.vue b/src/components/header/AppHeaderWallet.vue
new file mode 100644
index 000000000..6d80846e8
--- /dev/null
+++ b/src/components/header/AppHeaderWallet.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { copyToClipboard, useQuasar } from 'quasar';
+import { BigNumber } from 'ethers/lib/ethers';
+import { formatUnits } from 'ethers/lib/utils';
+
+import { truncateAddress } from 'src/antelope/wallets/utils/text-utils';
+import { useAccountStore } from 'src/antelope';
+import { indexerApi } from 'src/boot/telosApi';
+import { WEI_PRECISION } from 'src/antelope/wallets/utils';
+import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
+import { IS_TESTNET } from 'src/lib/chain-utils';
+
+import LoginModal from 'components/LoginModal.vue';
+import OutlineButton from 'components/OutlineButton.vue';
+
+const $router = useRouter();
+const $store = useStore();
+const $i18n = useI18n();
+const locale = $i18n.locale.value;
+const $q = useQuasar();
+
+const showLoginModal = ref(false);
+const userSystemTokenBalanceWei = ref('0');
+
+const isLoggedIn = computed(() => $store.getters['login/isLoggedIn']);
+const isNative = computed(() => $store.getters['login/isNative']);
+const address = computed(() => $store.getters['login/address']);
+const nativeAccount = computed(() => $store.getters['login/nativeAccount']);
+const prettySystemTokenBalance = computed(() =>
+    prettyPrintCurrency(
+        BigNumber.from(userSystemTokenBalanceWei.value),
+        4,
+        $i18n.locale.value,
+        false,
+        'TLOS',
+        false,
+        WEI_PRECISION,
+        false,
+    ),
+);
+const prettyIdentity = computed(() => {
+    if (!isLoggedIn.value) {
+        return '';
+    }
+
+    if (isNative.value) {
+        return nativeAccount.value;
+    }
+
+    return truncateAddress(address.value);
+});
+const prettySystemTokenBalanceFiat = computed(() => {
+    if (IS_TESTNET) {
+        return '';
+    }
+    const price = Number($store.getters['chain/tlosPrice']);
+    const userBalance = Number(formatUnits(userSystemTokenBalanceWei.value, WEI_PRECISION));
+    return (price * userBalance).toLocaleString(locale, {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+});
+
+watchEffect(() => {
+    if (isLoggedIn.value) {
+        fetchUserBalance();
+    }
+});
+
+function handleWalletButtonClick() {
+    if (!isLoggedIn.value) {
+        showLoginModal.value = true;
+    }
+}
+
+function logout() {
+    useAccountStore().logout();
+}
+
+function goToAccountPage() {
+    $router.push({
+        name: 'address',
+        params: {
+            address: address.value,
+        },
+    });
+}
+
+function copyAddress() {
+    copyToClipboard(address.value);
+
+    $q.notify({
+        position: 'bottom',
+        message: $i18n.t('components.header.address_copied'),
+        color: 'green',
+    });
+}
+
+async function fetchUserBalance() {
+    const response = await indexerApi.get(
+        `/account/${address.value}/balances`,
+    );
+    const tlos = response.data?.results?.find(({ contract }: { contract: string }) => contract === '___NATIVE_CURRENCY___');
+    userSystemTokenBalanceWei.value = tlos?.balance ?? '0';
+}
+</script>
+
+<template>
+<OutlineButton
+    text-color="default"
+    class="c-app-header-wallet__main-button"
+    v-bind="$attrs"
+    @click="handleWalletButtonClick"
+>
+    <template v-if="!isLoggedIn">
+        {{ $t('components.header.connect_wallet') }}
+
+        <q-icon
+            name="far fa-circle"
+            size="10px"
+            class="c-app-header-wallet__circle-icon"
+        />
+    </template>
+
+    <template v-else>
+        {{ prettyIdentity }}
+        <q-icon
+            name="fas fa-circle"
+            size="10px"
+            class="c-app-header-wallet__circle-icon c-app-header-wallet__circle-icon--logged-in"
+        />
+        <q-menu>
+            <q-list>
+                <q-item>
+                    <div class="c-app-header-wallet__account-actions-container">
+                        <div>
+                            <OutlineButton
+                                text-color="primary"
+                                :icon-only="true"
+                                :aria-label="$i18n.t('components.header.copy_address')"
+                                @click="copyAddress"
+                            >
+                                <q-icon name="far fa-copy" size="14px" />
+
+                                <q-tooltip>
+                                    {{ $i18n.t('components.header.copy_address') }}
+                                </q-tooltip>
+                            </OutlineButton>
+
+                            <OutlineButton
+                                text-color="primary"
+                                :icon-only="true"
+                                class="q-ml-sm"
+                                @click="goToAccountPage"
+                            >
+                                <q-icon name="far fa-address-card" size="14px" />
+
+                                <q-tooltip>
+                                    {{ $i18n.t('components.header.goto_address_details') }}
+                                </q-tooltip>
+                            </OutlineButton>
+                        </div>
+
+                        <OutlineButton
+                            text-color="negative"
+                            :icon-only="true"
+                            class="q-ml-sm"
+                            @click="logout"
+                        >
+                            <q-icon name="fas fa-power-off" size="14px" />
+
+                            <q-tooltip>
+                                {{ $t('components.header.disconnect_wallet_tooltip') }}
+                            </q-tooltip>
+                        </OutlineButton>
+                    </div>
+                </q-item>
+
+                <q-separator />
+
+                <q-item>
+                    <div>
+                        <span class="text-h6 text-weight-bolder">
+                            {{ prettySystemTokenBalance }}
+                        </span>
+                        &nbsp;
+                        <span v-if="prettySystemTokenBalanceFiat" class="text-caption">
+                            {{ prettySystemTokenBalanceFiat }}
+                        </span>
+                    </div>
+                </q-item>
+            </q-list>
+        </q-menu>
+    </template>
+</OutlineButton>
+
+<LoginModal :show="showLoginModal" @hide="showLoginModal = false" />
+</template>
+
+<style lang="scss">
+.c-app-header-wallet {
+    // CSS variables defined in AppHeader.vue
+
+    &__main-button {
+        // quasar overrides
+        .q-btn__content {
+            font-size: 0.8rem;
+            font-weight: 600;
+        }
+    }
+
+    &__circle-icon {
+        margin-left: 8px;
+        color: var(--grey-text-color);
+
+        &--logged-in {
+            color: $green;
+        }
+    }
+
+    &__account-actions-container {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+    }
+}
+</style>
diff --git a/src/components/header/HeaderSearch.vue b/src/components/header/HeaderSearch.vue
deleted file mode 100644
index 13fe6c264..000000000
--- a/src/components/header/HeaderSearch.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<script>
-import { directive as clickaway } from 'vue3-click-away';
-
-export default {
-    name: 'HeaderSearch',
-    directives: {
-        clickaway,
-    },
-    emits: ['hidden-mobile'],
-    data() {
-        return {
-            inputHiddenMobile: true,
-            searchTerm: null,
-            searchHintIndex: 0,
-            TIME_DELAY: 6000,
-        };
-    },
-    watch: {
-        inputHiddenMobile(newValue, oldValue) {
-            if (newValue !== oldValue) {
-                this.$emit('hidden-mobile', newValue);
-            }
-        },
-    },
-    methods: {
-        async iconClicked() {
-            this.inputHiddenMobile = false;
-
-            await this.$nextTick();
-            this.$refs.input.focus();
-        },
-        async search() {
-            if (!this.searchTerm) {
-                return;
-            }
-
-            this.searchTerm = this.searchTerm.trim().replace(/\s/, '');
-            if (this.searchTerm.startsWith('0x')) {
-                if (this.searchTerm.length === 42) {
-                    this.$router.push(`/address/${this.searchTerm}`);
-                    return;
-                } else {
-                    this.$router.push(`/tx/${this.searchTerm}`);
-                    return;
-                }
-            } else if (this.searchTerm.match(/(^[a-z1-5.]{1,11}[a-z1-5]$)|(^[a-z1-5.]{12}[a-j1-5]$)/)) {
-                try {
-                    const account = await this.$evm.telos.getEthAccountByTelosAccount(this.searchTerm);
-                    this.$router.push(`/address/${account.address}`);
-                    return;
-                } catch (e) {
-                    // in case this was a block that looked like an account name let's try it as a block
-                    if (this.searchTerm && !isNaN(this.searchTerm)) {
-                        this.$router.push(`/block/${this.searchTerm}`);
-                        return;
-                    }
-
-                    this.$q.notify({
-                        position: 'top',
-                        message: this.$('components.header.address_not_found', { account: this.searchTerm }),
-                        timeout: this.TIME_DELAY,
-                    });
-                    return;
-                }
-            } else if (!isNaN(this.searchTerm)) {
-                this.$router.push(`/block/${this.searchTerm}`);
-                return;
-            }
-
-            this.$q.notify({
-                position: 'top',
-                message: this.$('components.header.search_failed'),
-                timeout: this.TIME_DELAY,
-            });
-        },
-    },
-};
-</script>
-
-<template>
-<div v-clickaway="() => inputHiddenMobile = true" class="c-search">
-    <q-icon
-        v-show="$q.screen.lt.lg && inputHiddenMobile"
-        name="search"
-        size="24px"
-        class="cursor-pointer"
-        tabindex="0"
-        role="switch"
-        :aria-checked="!inputHiddenMobile"
-        aria-label="reveal search input"
-        @keydown.enter="iconClicked"
-        @click="iconClicked"
-    />
-    <q-input
-        v-show="!$q.screen.lt.lg || !inputHiddenMobile"
-        ref="input"
-        v-model="searchTerm"
-        class="c-search__input"
-        dense
-        :standout="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'"
-        :bg-color="$q.dark.isActive ? 'grey-9' : 'grey-3'"
-        color="black"
-        hide-bottom-space
-        :placeholder="$t('components.header.search_placeholder')"
-        @keydown.enter="search"
-    >
-        <template v-slot:append>
-            <q-icon
-                v-if="!searchTerm"
-                name="search"
-                size="24px"
-                @click="() => $refs.input.focus()"
-            />
-            <q-icon
-                v-else
-                name="clear"
-                size="24px"
-                @click="searchTerm = null"
-            />
-        </template>
-    </q-input>
-</div>
-</template>
-
-<style lang="scss">
-.c-search {
-    --color: #{$dark};
-
-    @media screen and (min-width: $breakpoint-lg-min) {
-        width: 500px;
-    }
-
-    @at-root .body--dark & {
-        --color: white;
-    }
-
-    // quasar overrides
-    .q-field--standout,
-    .q-field--standout.q-field--highlighted {
-        .q-field__native,
-        .q-field__append {
-            color: var(--color);
-        }
-    }
-}
-</style>
diff --git a/src/components/header/LanguageSwitcherModal.vue b/src/components/header/LanguageSwitcherModal.vue
index 8e77f3821..a048eff3d 100644
--- a/src/components/header/LanguageSwitcherModal.vue
+++ b/src/components/header/LanguageSwitcherModal.vue
@@ -59,7 +59,7 @@ export default {
                 :options="languageOptions"
                 option-value="code"
                 option-label="name"
-                color="secondary"
+                color="primary"
                 class="q-mb-lg"
             />
 
diff --git a/src/components/header/LoginStatus.vue b/src/components/header/LoginStatus.vue
deleted file mode 100644
index e90a8a475..000000000
--- a/src/components/header/LoginStatus.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script>
-import { copyToClipboard } from 'quasar';
-import { mapGetters } from 'vuex';
-
-export default {
-    name: 'LoginStatus',
-    emits: ['navigated'],
-    computed: {
-        ...mapGetters('login', [
-            'isLoggedIn',
-            'isNative',
-            'address',
-            'nativeAccount',
-        ]),
-        prettyIdentity() {
-            if (!this.isLoggedIn) {
-                return '';
-            }
-
-            if (this.isNative) {
-                return this.nativeAccount;
-            }
-
-            return `${this.address.slice(0, 6)}...${this.address.slice(38, 42)}`;
-        },
-    },
-    methods: {
-        goToAddress() {
-            this.$emit('navigated');
-            this.$router.push(`/address/${this.address}`);
-        },
-        copy() {
-            copyToClipboard(this.address);
-
-            this.$q.notify({
-                position: 'bottom',
-                message: this.$t('components.header.address_copied'),
-                color: 'green',
-            });
-        },
-    },
-};
-</script>
-
-<template>
-<div v-if="isLoggedIn" class="c-login-status u-flex--center-y">
-    <q-icon
-        name="account_circle"
-        class="c-login-status__account-icon"
-        size="sm"
-    />
-    {{ prettyIdentity }}
-    <div class="u-flex--center">
-        <q-icon
-            name="preview"
-            size="sm"
-            class="q-px-sm cursor-pointer"
-            @click="goToAddress"
-        />
-        <q-tooltip>
-            {{ $t('components.header.goto_address_details') }}
-        </q-tooltip>
-    </div>
-
-    <div class="u-flex--center">
-        <q-icon
-            name="content_copy"
-            size="sm"
-            class="q-px-sm cursor-pointer"
-            @click="copy"
-        />
-        <q-tooltip>
-            {{ $t('components.header.copy_address') }}
-        </q-tooltip>
-    </div>
-</div>
-</template>
-
-<style lang="scss">
-.c-login-status {
-    font-size: 18px;
-
-    &__account-icon {
-        margin-right: 8px;
-    }
-}
-</style>
diff --git a/src/components/inputs/AddressArrayInput.vue b/src/components/inputs/AddressArrayInput.vue
index 90c3f486d..6e63b093d 100644
--- a/src/components/inputs/AddressArrayInput.vue
+++ b/src/components/inputs/AddressArrayInput.vue
@@ -1,5 +1,5 @@
 <script>
-import { parseAddressArrayString } from 'components/ContractTab/function-interface-utils';
+import { parseAddressArrayString } from 'src/lib/function-interface-utils';
 
 import BaseTextInput from 'components/inputs/BaseTextInput';
 
diff --git a/src/components/inputs/AddressInput.vue b/src/components/inputs/AddressInput.vue
index 81b811824..940d08375 100644
--- a/src/components/inputs/AddressInput.vue
+++ b/src/components/inputs/AddressInput.vue
@@ -1,5 +1,5 @@
 <script>
-import { parseAddressString } from 'components/ContractTab/function-interface-utils';
+import { parseAddressString } from 'src/lib/function-interface-utils';
 
 import BaseTextInput from 'components/inputs/BaseTextInput';
 
diff --git a/src/components/inputs/BaseTextInput.vue b/src/components/inputs/BaseTextInput.vue
index 5852ea40c..2cac6d4f9 100644
--- a/src/components/inputs/BaseTextInput.vue
+++ b/src/components/inputs/BaseTextInput.vue
@@ -104,7 +104,7 @@ export default {
         :model-value="modelValue"
         :reactive-rules="true"
         v-bind="binding"
-        color="secondary"
+        color="primary"
         @update:modelValue="handleChange"
     >
         <template #append>
diff --git a/src/components/inputs/BooleanArrayInput.vue b/src/components/inputs/BooleanArrayInput.vue
index 4ea8b1350..314ee1bfb 100644
--- a/src/components/inputs/BooleanArrayInput.vue
+++ b/src/components/inputs/BooleanArrayInput.vue
@@ -1,5 +1,5 @@
 <script>
-import { parseBooleanArrayString } from 'components/ContractTab/function-interface-utils';
+import { parseBooleanArrayString } from 'src/lib/function-interface-utils';
 
 import BaseTextInput from 'components/inputs/BaseTextInput';
 
diff --git a/src/components/inputs/BooleanInput.vue b/src/components/inputs/BooleanInput.vue
index 1a2b073c3..fefa4943e 100644
--- a/src/components/inputs/BooleanInput.vue
+++ b/src/components/inputs/BooleanInput.vue
@@ -109,7 +109,7 @@ export default {
     :clearable="true"
     :name="name"
     :rules="rules"
-    color="secondary"
+    color="primary"
     class="q-mx-sm q-mb-md"
     @update:modelValue="handleChange"
 />
diff --git a/src/components/inputs/SignedIntArrayInput.vue b/src/components/inputs/SignedIntArrayInput.vue
index acae6aba5..d2c27b930 100644
--- a/src/components/inputs/SignedIntArrayInput.vue
+++ b/src/components/inputs/SignedIntArrayInput.vue
@@ -1,5 +1,5 @@
 <script>
-import { integerSizeValidator, parseSignedIntArrayString } from 'components/ContractTab/function-interface-utils';
+import { integerSizeValidator, parseSignedIntArrayString } from 'src/lib/function-interface-utils';
 
 import BaseTextInput from 'components/inputs/BaseTextInput';
 import { BigNumber } from 'ethers';
diff --git a/src/components/inputs/SignedIntInput.vue b/src/components/inputs/SignedIntInput.vue
index b25f1710b..30dd28dd4 100644
--- a/src/components/inputs/SignedIntInput.vue
+++ b/src/components/inputs/SignedIntInput.vue
@@ -1,7 +1,7 @@
 <script>
 import { BigNumber } from 'ethers';
 
-import { integerSizeValidator, parseSignedIntString } from 'components/ContractTab/function-interface-utils';
+import { integerSizeValidator, parseSignedIntString } from 'src/lib/function-interface-utils';
 
 import BaseTextInput from 'components/inputs/BaseTextInput';
 
diff --git a/src/components/inputs/StringArrayInput.vue b/src/components/inputs/StringArrayInput.vue
index ed5dd4a16..ff24ac572 100644
--- a/src/components/inputs/StringArrayInput.vue
+++ b/src/components/inputs/StringArrayInput.vue
@@ -1,5 +1,5 @@
 <script>
-import { parseStringArrayString } from 'components/ContractTab/function-interface-utils';
+import { parseStringArrayString } from 'src/lib/function-interface-utils';
 
 import BaseTextInput from 'components/inputs/BaseTextInput';
 
diff --git a/src/components/inputs/UnsignedIntArrayInput.vue b/src/components/inputs/UnsignedIntArrayInput.vue
index 8d29a5e1e..be158d7d4 100644
--- a/src/components/inputs/UnsignedIntArrayInput.vue
+++ b/src/components/inputs/UnsignedIntArrayInput.vue
@@ -1,5 +1,5 @@
 <script>
-import { integerSizeValidator, parseUintArrayString } from 'components/ContractTab/function-interface-utils';
+import { integerSizeValidator, parseUintArrayString } from 'src/lib/function-interface-utils';
 
 import BaseTextInput from 'components/inputs/BaseTextInput';
 
diff --git a/src/components/inputs/UnsignedIntInput.vue b/src/components/inputs/UnsignedIntInput.vue
index 0316db2ce..63b775978 100644
--- a/src/components/inputs/UnsignedIntInput.vue
+++ b/src/components/inputs/UnsignedIntInput.vue
@@ -1,5 +1,5 @@
 <script>
-import { integerSizeValidator, parseUintString } from 'components/ContractTab/function-interface-utils';
+import { integerSizeValidator, parseUintString } from 'src/lib/function-interface-utils';
 import { BigNumber } from 'ethers';
 
 import BaseTextInput from 'components/inputs/BaseTextInput';
diff --git a/src/css/_utilities.scss b/src/css/_utilities.scss
index 66be41ed1..57ae28638 100644
--- a/src/css/_utilities.scss
+++ b/src/css/_utilities.scss
@@ -43,6 +43,3 @@
     }
 }
 
-
-// components
-@import 'components/notification'
diff --git a/src/css/app.sass b/src/css/app.sass
deleted file mode 100644
index e6084b950..000000000
--- a/src/css/app.sass
+++ /dev/null
@@ -1,244 +0,0 @@
-@import 'utilities'
-
-@import './dataCard.sass'
-
-a
- color: $secondary
- text-decoration: none
- transition: 400ms color ease
- &:hover
-   color: $secondary
-
-.toolbar
-  background: radial-gradient( circle at 50% 50%, rgba(97, 8, 183, 1) 1%, rgba(0, 188, 212, 1) 53%, rgba(213, 109, 213, 1) 100%)
-  color: $purpleDarkMode
-
-.q-header
-  margin:10px
-
-.q-table thead tr, .q-table tbody td
-  height:60px
-
-.q-card
-  padding: 0
-
-.q-btn
-  border-radius: 4px
-
-.q-tabs
-  border-bottom-width: 1px
-
-.q-tabs--dense .q-tab
-  min-height: 53px
-
-.q-tooltip
-  font-size: 12px
-  max-width: min(500px, 80vw)
-
-.q-mb-lg
-  margin-top: 20px
-
-.text-h4
-  line-height: 2rem
-  user-select: none
-
-.q-light
-  background: white
-  .q-tab
-    color: black
-
-.q-table--dark .q-table__bottom, .q-table--dark thead, .q-table--dark tr, .q-table--dark th, .q-table--dark td
-  border-color: rgb(0 0 0 / 50%)
-
-.grayscale
-  filter: grayscale(1)
-  transition: 400ms ease filter
-
-body
-  font-family: "silkaregular"
-
-body.body--light
-  background: #fafafa
-  background-image: url(../assets/background.svg) !important
-
-  .bgNormal
-    background: white
-    background-size: cover
-    margin-top: 400px
-    height: 100%
-    width: 100%
-    position: fixed
-    top: 0
-    left: 0
-    z-index: 0
-
-  .jsonViewer
-    color: $purpleDarkMode
-    max-width: 100vw
-
-  .toolbar
-    background: rgb(127, 99, 255)
-    color: $purpleDarkMode
-
-body.body--dark
-  color: $white
-
-  .bgNormal
-    background: #1a1a1a
-    background-size: cover
-    margin-top: 400px
-    height: 100%
-    width: 100%
-    position: fixed
-    top: 0
-    left: 0
-    z-index: 0
-
-  .toolbar
-    background: #282828
-
-  .q-card
-    background: $dark
-    border-radius: 6px
-
-  background: #1a1a1a
-
-.info-icon
-    margin-left: 4px
-
-.ellipsis-label
-  color: #999
-  background-color: #eee
-  display: inline-block
-  line-height: 6px
-  margin-left: 15px
-  height: 12px
-  font-size: 0.9em
-  padding: 0px 4px 2px 4px
-  border-radius: 3px
-  vertical-align: 2px
-  cursor: pointer
-  -webkit-user-select: none
-  user-select: none
-
-.list-arrow
-  font-size: 1.8em
-  margin-top: -3px
-  margin-left: -8px
-  color: #666666
-
-.pageContainer
-  flex: 0 1 1200px
-  max-width: 1200px
-  margin: auto
-
-.slim-scrollbar
-  &::-webkit-scrollbar
-    width: 0.5rem
-
-  &::-webkit-scrollbar-track
-    background-color: transparent
-
-  &::-webkit-scrollbar-thumb
-    background-color: rgba($white, 0.5)
-    border-radius: .5rem
-    border: 0.1rem solid transparent
-    background-clip: content-box
-
-  &::-webkit-scrollbar-thumb:hover
-    background-color: rgba($white, 0.9)
-
-.scroll
-  &::-webkit-scrollbar
-    width: 0.5rem
-
-  &::-webkit-scrollbar-track
-    background-color: transparent
-
-  &::-webkit-scrollbar-thumb
-    background-color: rgba($white, 0.5)
-    border-radius: .5rem
-    border: 0.1rem solid transparent
-    background-clip: content-box
-
-  &::-webkit-scrollbar-thumb:hover
-    background-color: rgba($white, 0.9)
-
-.q-dialog__inner > div
-  border-radius: 6px
-
-.tableWrapper .content-container
-  border-radius: 6px
-
-.q-tabs.topRounded
-  border-radius: 6px 6px 0 0
-  border-bottom: 1px solid black
-
-.topLeftRounded
-  border-radius: 6px 0 0 0
-
-.topRightRounded
-  border-radius: 0 6px 0 0
-
-.tabsBar
-  color: rgb(133, 145, 253)
-
-.homeInfo
-  color: white
-  max-width: 100vw
-
-.positive
-  color: $positive
-
-.negative
-  color: $negative
-
-.clickable
-  cursor: pointer
-
-.word-break
-  word-break: break-word
-
-.tableWrapper
-  max-width: 100vw
-
-@media screen and (max-width: 650px)
-  body
-    font-size: 12px
-
-  .homeInfo
-      color: white
-      max-width: 100vw
-      font-size: 12px !important
-
-  .text-h4.text-primary.q-mb-lg
-    line-height: 0rem !important
-
-  .q-header
-    margin: 0px 0px !important
-
-  .q-btn__wrapper
-    padding: 4px !important
-
-@media only screen and (max-width: 550px)
-  .homeInfo
-    .text-h6
-      font-size: 1.3em
-  .q-tab__label
-    font-size: 11px
-  .title
-    font-size: 1.7rem
-  .selectorContainer .text-h6
-    font-size: 0.8rem
-
-@media only screen and (max-width: 400px)
-  .homeInfo
-    .text-h6
-      font-size: 1em
-    .text-subtitle2
-      font-size: 1.1em
-    .q-pa-md
-      padding: 5px
-  .title
-    font-size: 1.5rem
-
diff --git a/src/css/app.scss b/src/css/app.scss
new file mode 100644
index 000000000..94bb5f1f7
--- /dev/null
+++ b/src/css/app.scss
@@ -0,0 +1,110 @@
+// this file contains one-time global imports
+@import './global/global-index';
+@import './utilities';
+@import './components/json-viewer';
+@import './components/notification';
+@import './components/q-layout';
+
+body {
+    --top-bar-height: 48px;
+    --bottom-bar-height: 52px;
+    font-size: .9em;
+    font-family: "silkaregular", sans-serif;
+}
+
+body.body--light {
+    --border-color: #{$grey-3};
+    --text-color: #{$dark};
+    --muted-text-color: #{$grey-3};
+    --invert-text-color: white;
+    --grey-text-color: #{$grey-7};
+    --tab-bg-color: #{$grey-3};
+    --active-tab-bg-color: #{$tab-active-light};
+    --active-tab-text-color: white;
+
+    --q-primary: #2a8de3 !important;
+    --q-secondary: #8B3F98 !important;
+
+    --scrollbar-track-bg-color: #{$grey-5};
+    --scrollbar-thumb-bg-color: #{$grey-7};
+
+    a:hover {
+        color: $a-hover-light;
+    }
+}
+
+body.body--dark {
+    --border-color: #{$grey-9};
+    --text-color: white;
+    --muted-text-color: #{$grey-8};
+    --invert-text-color: #{$dark};
+    --grey-text-color: #{$grey-5};
+    --tab-bg-color: #{$grey-10};
+    --active-tab-bg-color: #{#{$tab-active-dark}};
+    --active-tab-text-color: white;
+
+    --q-primary: #2a8de3 !important;
+    --q-secondary: #8B3F98 !important;
+
+    --scrollbar-track-bg-color: #{$grey-10};
+    --scrollbar-thumb-bg-color: #{$grey-7};
+
+    --q-dark: #181818;
+
+    a:hover {
+        color: $a-hover-dark;
+    }
+}
+
+a {
+    color: var(--q-primary);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+// quasar overrides
+.q-tabs {
+    max-width: 100%;
+}
+
+.q-tab--inactive {
+    opacity: unset;
+}
+
+.q-tab-panels {
+    background: none;
+}
+
+.q-card {
+    border-radius: 12px;
+}
+
+// This allow the q-card to project shadow outside the tab panel container
+.q-panel.scroll {
+    overflow: var(--v-overflow, scroll);
+}
+
+.q-table__middle{
+    @include scroll-bar;
+}
+
+.q-card--dark {
+    box-shadow: 0 0.5rem 1.2rem rgba(82, 85, 85, 0.1);
+}
+
+.q-expansion-item{
+    .q-item{
+        background: #fff;
+
+        &--dark{
+            background: #212121;
+        }
+    }
+}
+
+.q-tabs__arrow {
+    top: 12px !important;
+    &--right {
+        top: 12px !important;
+    }
+}
\ No newline at end of file
diff --git a/src/css/components/_json-viewer.scss b/src/css/components/_json-viewer.scss
new file mode 100644
index 000000000..c79fdaab7
--- /dev/null
+++ b/src/css/components/_json-viewer.scss
@@ -0,0 +1,83 @@
+/* to apply set theme='custom-theme' on JsonViewer component */
+
+body.body--dark .jsonViewer {
+    color: white !important;
+    background-color: transparent;
+}
+
+body.body--light .jsonViewer {
+    color: var(--q-dark) !important;
+    background-color: transparent;
+}
+
+.source-container{
+    @include scroll-bar;
+}
+
+body.body--dark .source-container {
+    background-color: black;
+}
+
+body.body--light .source-container {
+    background-color: #eee;
+}
+
+.custom-theme {
+    white-space: nowrap;
+    font-size: 14px;
+    font-family: Consolas, Menlo, Courier, monospace;
+
+    .jv-ellipsis {
+        color: #999;
+        background-color: #eee;
+        display: inline-block;
+        line-height: 0.9;
+        font-size: 0.9em;
+        padding: 0px 4px 2px 4px;
+        border-radius: 3px;
+        vertical-align: 2px;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .jv-button {
+        color: #49b3ff;
+    }
+
+    .jv-item {
+        &.jv-boolean {
+            color: #fc1e70;
+        }
+
+        &.jv-function {
+            color: #1306ca;
+        }
+
+        &.jv-number,
+        &.jv-number-float,
+        &.jv-number-integer {
+            color: #fc1e70;
+        }
+
+        &.jv-undefined {
+            color: #e08331;
+        }
+
+        &.jv-string {
+            color: #42b983;
+            word-break: break-word;
+            white-space: normal;
+        }
+    }
+
+    .jv-code .jv-toggle {
+        &:before {
+            padding: 0px 2px;
+            border-radius: 2px;
+        }
+
+        &:hover &:before {
+            background: #eee;
+        }
+    }
+}
diff --git a/src/css/components/_notification.sass b/src/css/components/_notification.sass
deleted file mode 100644
index d0e44ff03..000000000
--- a/src/css/components/_notification.sass
+++ /dev/null
@@ -1,120 +0,0 @@
-
-// Mocking external dependencies ---    
-$notify-success: #255B00
-$notify-error: #880000
-$notify-neutral: #4D4D4D
-$notify-info: #008888
-
-=regular
-  font-family: 'silka-regular', 'Roboto', sans-serif
-
-=text--paragraph
-  +regular
-  font-size: 1rem !important
-  line-height: 150%
-
-// --------------
-
-.c-notify
-    --q-positive: #{$notify-success}
-    width: 100%
-    max-width: 400px
-    margin: 1rem
-    padding: 0
-    border-radius: 4px
-    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2)
-    background-color: var(--bg-color, #fff)
-    transition: all 0.3s ease
-    overflow: hidden
-    // we remove parent padding
-    .q-notification__message
-        padding: 0
-    // we need to style the action buttons
-    .q-notification__actions
-        justify-content: space-around
-        padding: 24px
-        .q-btn
-            font-weight: bold
-            &.text-positive
-                i
-                    margin-left: 0px
-                    margin-top: -5px
-                    transform: scale(0.5)
-    // container will say if this notification is success or error and set the color
-    &__container
-        --c-notify__checkbox--display: none
-        --c-notify__message--align: center
-        &--success
-            --notify-color: #{$notify-success}
-            --c-notify__title--display: flex
-            --c-notify__message--padding: 0 2rem
-            --c-notify__header--animation: consuming-bar 5s linear forwards
-        &--error
-            --notify-color: #{$notify-error}
-            --c-notify__title--display: flex
-            --c-notify__message--padding: 0 2rem
-        &--info
-            --notify-color: #{$notify-info}
-            --c-notify__title--display: flex
-            --c-notify__message--padding: 0 2rem
-            --c-notify__checkbox--display: block
-            --c-notify__message--align: left
-        &--neutral
-            --notify-color: #{$notify-neutral}
-            --c-notify__title--display: none
-            --c-notify__message--padding: 1.2rem 2rem
-            --c-notify__header--animation: consuming-bar 5s linear forwards
-        display: flex
-        flex-direction: column
-    &__checkbox-container
-        display: var(--c-notify__checkbox--display)
-        margin: 2rem 0 0 2rem
-        input
-            margin-right: 0.5rem
-        label
-            color: var(--text-color, #000)
-            @include text--paragraph
-    &__header
-        height: 8px
-        background-color: var(--notify-color)
-        // we need to animate the with from 100% 100% to 0% in 5s and stay there
-        animation: var(--c-notify__header--animation)
-    &__title
-        display: var(--c-notify__title--display)
-        align-items: center
-        padding: 1rem
-        justify-content: center
-        font-size: 24px
-        img
-            width: 2.1rem
-            height: 2.1rem
-            margin-right: 0.3rem
-        span
-            color:    var(--notify-color)
-            font-weight: 600
-        &--neutral
-            display: none
-    &__message
-        color: var(--text-color, #000)
-        padding: var(--c-notify__message--padding)
-        text-align: var(--c-notify__message--align, center)
-        span
-            @include text--paragraph
-        &--subtitle
-            font-weight: bold
-            margin-bottom: 1rem
-    &__action-btn
-        color: var(--text-color, #000)
-        &--hide
-            color: transparent
-            background-color: transparent
-            pointer-events: none
-    &__dialog
-        width: 900px
-        max-width: calc(100vw - 48px) !important
-
-@keyframes consuming-bar
-    0%
-        width: 100%
-    100%
-        width: 0%
diff --git a/src/css/components/_notification.scss b/src/css/components/_notification.scss
new file mode 100644
index 000000000..4fe3521e5
--- /dev/null
+++ b/src/css/components/_notification.scss
@@ -0,0 +1,149 @@
+// Mocking external dependencies ---
+$notify-success: #255B00;
+$notify-error: #880000;
+$notify-neutral: #4D4D4D;
+$notify-info: #008888;
+
+@mixin regular {
+  font-family: 'silka-regular', 'Roboto', sans-serif;
+}
+
+@mixin text--paragraph {
+  @include regular;
+  font-size: 1rem !important;
+  line-height: 150%;
+}
+
+// --------------
+
+.c-notify {
+  --q-positive: #{$notify-success};
+  width: 100%;
+  max-width: 400px;
+  margin: 1rem;
+  padding: 0;
+  border-radius: 4px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+  background-color: var(--bg-color, #fff);
+  transition: all 0.3s ease;
+  overflow: hidden;
+  // we remove parent padding
+  .q-notification__message {
+    padding: 0;
+  }
+  // we need to style the action buttons
+  .q-notification__actions {
+    justify-content: space-around;
+    padding: 24px;
+    .q-btn {
+      font-weight: bold;
+      &.text-positive {
+        i {
+          margin-left: 0px;
+          margin-top: -5px;
+          transform: scale(0.5);
+        }
+      }
+    }
+  }
+  // container will say if this notification is success or error and set the color
+  &__container {
+    --c-notify__checkbox--display: none;
+    --c-notify__message--align: center;
+    &--success {
+      --notify-color: #{$notify-success};
+      --c-notify__title--display: flex;
+      --c-notify__message--padding: 0 2rem;
+      --c-notify__header--animation: consuming-bar 5s linear forwards;
+    }
+    &--error {
+      --notify-color: #{$notify-error};
+      --c-notify__title--display: flex;
+      --c-notify__message--padding: 0 2rem;
+    }
+    &--info {
+      --notify-color: #{$notify-info};
+      --c-notify__title--display: flex;
+      --c-notify__message--padding: 0 2rem;
+      --c-notify__checkbox--display: block;
+      --c-notify__message--align: left;
+    }
+    &--neutral {
+      --notify-color: #{$notify-neutral};
+      --c-notify__title--display: none;
+      --c-notify__message--padding: 1.2rem 2rem;
+      --c-notify__header--animation: consuming-bar 5s linear forwards;
+    }
+    display: flex;
+    flex-direction: column;
+  }
+  &__checkbox-container {
+    display: var(--c-notify__checkbox--display);
+    margin: 2rem 0 0 2rem;
+    input {
+      margin-right: 0.5rem;
+    }
+    label {
+      color: black;
+      @include text--paragraph;
+    }
+  }
+  &__header {
+    height: 8px;
+    background-color: var(--notify-color);
+    // we need to animate the width from 100% 100% to 0% in 5s and stay there
+    animation: var(--c-notify__header--animation);
+  }
+  &__title {
+    display: var(--c-notify__title--display);
+    align-items: center;
+    padding: 1rem;
+    justify-content: center;
+    font-size: 24px;
+    img {
+      width: 2.1rem;
+      height: 2.1rem;
+      margin-right: 0.3rem;
+    }
+    span {
+      color: var(--notify-color);
+      font-weight: 600;
+    }
+    &--neutral {
+      display: none;
+    }
+  }
+  &__message {
+    color: black;
+    padding: var(--c-notify__message--padding);
+    text-align: var(--c-notify__message--align, center);
+    span {
+      @include text--paragraph;
+    }
+    &--subtitle {
+      font-weight: bold;
+      margin-bottom: 1rem;
+    }
+  }
+  &__action-btn {
+    color: black;
+    &--hide {
+      color: transparent;
+      background-color: transparent;
+      pointer-events: none;
+    }
+  }
+  &__dialog {
+    width: 900px;
+    max-width: calc(100vw - 48px) !important;
+  }
+}
+
+@keyframes consuming-bar {
+  0% {
+    width: 100%;
+  }
+  100% {
+    width: 0%;
+  }
+}
diff --git a/src/css/components/_q-layout.scss b/src/css/components/_q-layout.scss
new file mode 100644
index 000000000..fdcc6171b
--- /dev/null
+++ b/src/css/components/_q-layout.scss
@@ -0,0 +1,8 @@
+.q-layout__section--marginal {
+    background-color: unset;
+    color: unset;
+}
+
+.q-tooltip {
+    font-size: 0.8rem;
+}
\ No newline at end of file
diff --git a/src/css/dataCard.sass b/src/css/dataCard.sass
deleted file mode 100644
index 3658c94d1..000000000
--- a/src/css/dataCard.sass
+++ /dev/null
@@ -1,34 +0,0 @@
-
-@use './jsonViewerTheme.sass'
-
-.dataCardsContainer
-  display: flex
-  flex-wrap: wrap
-  gap: 10px
-  .dataCardItem
-    background: #0000001e
-    min-width: 8rem
-    display: flex
-    flex-direction: column
-    align-items: center
-    justify-content: center
-    border-radius: 6px
-    padding: 20px
-    margin: 4px
-
-  .dataCardTile
-    color: $white
-    font-size: 0.8rem
-
-  .dataCardData
-    color: $primary
-    font-size: 1.3rem
-    line-height: 1.5rem
-
-  .balance
-    width: fit-content
-
-@media screen and (max-width: 650px)
-  .dataCardItem
-    padding: 10px !important
-    margin-top:-12px
diff --git a/src/css/global/_colors.scss b/src/css/global/_colors.scss
new file mode 100644
index 000000000..3ce77435c
--- /dev/null
+++ b/src/css/global/_colors.scss
@@ -0,0 +1,10 @@
+@use 'sass:color';
+
+@import '../quasar.variables';
+
+$a-hover-light: color-mix(in srgb, var(--q-primary), black 50%);
+$a-hover-dark: color-mix(in srgb, var(--q-primary), white 30%);
+$grey: #909090;
+
+$tab-active-light: color-mix(in srgb, var(--q-primary), white 20%);
+$tab-active-dark: var(--q-primary);
diff --git a/src/css/global/_mixins.scss b/src/css/global/_mixins.scss
new file mode 100644
index 000000000..beb94b1c9
--- /dev/null
+++ b/src/css/global/_mixins.scss
@@ -0,0 +1,117 @@
+@mixin page-container {
+    padding-top: 35px;
+    margin-right: auto;
+    margin-left: auto;
+    width: 100%;
+    max-width: 1200px;
+}
+
+@mixin page-header {
+    display: flex;
+    justify-content: left;
+    gap: 10px;
+    align-items: baseline;
+    margin-bottom: 1.5rem;
+    vertical-align: text-bottom;
+    &-title {
+        font-size: 1.4rem;
+        font-weight: bold;
+    }
+}
+
+@mixin page-header-nav-btn {
+    cursor: pointer;
+    height: 22px;
+    width: 22px;
+    color: white;
+    background-color: $grey;
+    border: solid 1.25px $grey;
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &--left {
+        padding-right: 1px;
+    }
+    &--right {
+        padding-left: 1px;
+    }
+    .q-dark & {
+        color: rgb(8, 29, 53);
+    }
+}
+
+@mixin tabs-container {
+    display: inline-flex;
+    gap: 1rem;
+    &-content {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 10px;
+    }
+    &-tab {
+        $tab: &;
+        padding: 0px 20px;
+        min-height: 32px !important;
+        cursor: pointer;
+        border-radius: 5px;
+        text-transform: none;
+        color: var(--text-color);
+        background-color: var(--tab-bg-color);
+
+        #{$tab}-icon {
+            transition: color 0.3s, background-color 0.3s;
+        }
+
+        &:hover{
+            color: var(--text-color);
+            #{$tab}-icon {
+                color: var(--text-color);
+            }
+        }
+
+        &--active {
+            color: var(--active-tab-text-color);
+            background-color: var(--active-tab-bg-color);
+            #{$tab}-icon {
+                color: var(--active-tab-text-color);
+            }
+        }
+    }
+
+    // firefox fix
+    .firefox & .q-tab__content {
+        flex-direction: row;
+    }
+}
+
+@mixin page-body {
+    display: flex;
+    flex-direction: column;
+}
+
+@mixin token-value {
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 4px 8px;
+    font-size: 0.65rem;
+    font-weight: bold;
+    width: max-content;
+}
+
+@mixin scroll-bar {
+    &::-webkit-scrollbar {
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: var(--scrollbar-track-bg-color);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--scrollbar-thumb-bg-color);
+        border-radius: 0.375rem;
+    }
+}
+
diff --git a/src/css/global/global-index.scss b/src/css/global/global-index.scss
new file mode 100644
index 000000000..491f9e36a
--- /dev/null
+++ b/src/css/global/global-index.scss
@@ -0,0 +1,5 @@
+@import 'colors';
+@import 'mixins';
+
+
+$latest-data-breakpoint: 600px;
diff --git a/src/css/jsonViewerTheme.sass b/src/css/jsonViewerTheme.sass
deleted file mode 100644
index 05f0da901..000000000
--- a/src/css/jsonViewerTheme.sass
+++ /dev/null
@@ -1,62 +0,0 @@
-/* to apply set theme='custom-theme' on JsonViewer component */
-@import './quasar.variables.sass'
-
-body.body--dark .jsonViewer
-  color: white !important
-  background-color: transparent
-
-body.body--light .jsonViewer
-  color: $dark !important
-  background-color: transparent
-
-body.body--dark .source-container
-  background-color: black
-
-body.body--light .source-container
-  background-color: #eee
-
-.custom-theme
-  white-space: nowrap
-  font-size: 14px
-  font-family: Consolas, Menlo, Courier, monospace
-
-  .jv-ellipsis
-    color: #999
-    background-color: #eee
-    display: inline-block
-    line-height: 0.9
-    font-size: 0.9em
-    padding: 0px 4px 2px 4px
-    border-radius: 3px
-    vertical-align: 2px
-    cursor: pointer
-    user-select: none
-
-  .jv-button
-    color: #49b3ff
-
-  .jv-item
-    &.jv-boolean
-      color: #fc1e70
-    &.jv-function
-      color: #1306ca
-    &.jv-number
-      color: #fc1e70
-    &.jv-number-float
-      color: #fc1e70
-    &.jv-number-integer
-      color: #fc1e70
-    &.jv-undefined
-      color: #e08331
-    &.jv-string
-      color: #42b983
-      word-break: break-word
-      white-space: normal
-
-  .jv-code .jv-toggle
-    &:before
-      padding: 0px 2px
-      border-radius: 2px
-
-    &:hover &:before
-      background: #eee
diff --git a/src/css/quasar.variables.sass b/src/css/quasar.variables.sass
deleted file mode 100644
index 53a6af843..000000000
--- a/src/css/quasar.variables.sass
+++ /dev/null
@@ -1,29 +0,0 @@
-
-$purpleBright   : #814cdc
-$purpleDarkMode : #3d1d74
-$purpleDark     : #23195e
-$purpleSoft     : #7772ac
-$purpleGrey     : #c4c0ee
-$blueDark       : #182244
-$blueDarkMode   : #0c1535
-$blueLight      : #2fd7fe
-$white          : #e3def7
-
-$dark-0         : #1c075e
-$dark-1         : #23195e
-
-$grey-0         : #d4ceeb
-
-$primary        : #FFFFFF
-$secondary      : #646FD3
-$accent         : #1db0de
-
-$dark           : #282828
-
-$positive       : #55c3b3
-$negative       : #bd2677
-$info           : #452ea3
-$warning        : #F2C037
-
-$button-border-radius   : 6px !default
-$generic-border-radius  : 6px !default
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
new file mode 100644
index 000000000..77aa0af00
--- /dev/null
+++ b/src/css/quasar.variables.scss
@@ -0,0 +1,3 @@
+$primary: #348DCC;
+$secondary: #8B3F98;
+$accent: #73C58F;
diff --git a/src/evm_logo.png b/src/evm_logo.png
new file mode 100644
index 000000000..f23135d36
Binary files /dev/null and b/src/evm_logo.png differ
diff --git a/src/i18n/de-de/index.js b/src/i18n/de-de/index.js
index 9d677afb2..4235eeeb8 100644
--- a/src/i18n/de-de/index.js
+++ b/src/i18n/de-de/index.js
@@ -1,120 +1,68 @@
-/* eslint-disable max-len */
-
 export default {
     locale: {
         current_language_name: 'Deutsch',
     },
     pages: {
-        staking: {
-            note_unstaking_period: 'Beachten Sie, dass der Betrag erst nach { period } eingefordert werden kann.',
-            claim_tlos: 'TLOS einfordern',
-            add_stlos_to_metamask: 'Starten Sie den MetaMask-Dialog, um sTLOS hinzuzufügen',
-            metamask_fox_logo: 'MetaMask-Logo',
-            stake_tlos_confirm: 'Beim Bestätigen tauschen Sie Ihre TLOS gegen sTLOS. ' +
-            'sTLOS kann jederzeit gegen TLOS eingetauscht werden, indem Sie die Registerkarte "Abheben" verwenden.',
-            cancel: 'Abbrechen',
-            stake_tlos_confirm_2a: 'Nachdem TLOS eingetauscht wurden, sind diese für einen Zeitraum von', /* unstakePeriodPretty...*/
-            stake_tlos_confirm_2b: /*...unstakePeriodPretty */ 'gesperrt. Nach Ablauf der Sperrfrist können Sie in der Registerkarte "Einfordern" erneut Ihrem Konto gutgeschrieben werden.',
-            stake_tlos_confirm_3: 'Möchten Sie fortfahren?',
-            stake_tlos: 'TLOS tauschen',
-            stake_tlos_subheader: 'Ihr Einsatz von TLOS in sTLOS gewährt Ihnen Zugriff auf einen regelmäßige Belohnungen und Zugang zu verschiedene DeFi-Anwendungen, ' +
-            'dies kann Ihre Erlöse weiter erhöhen. Der Umrechnungskurs von TLOS zu sTLOS erhöht sich regelmäßig durch das Wachstum des Belohnungs-Pools ' +
-            'Daher ist die erhaltene Menge an sTLOS grundsätzlich geringer als die Menge der eingesetzten TLOS. Aufgrund der thesaurierenden ' +
-            'Auszahlung ist keine zusätzliche Aktion erforderlich.',
-            receive_stlos: 'sTLOS erhalten',
-            available: '{balanceTlos} Verfügbar',
-            insufficient_tlos_balance: 'Unzureichendes TLOS-Guthaben',
-            login_using_an_evm_wallet: 'Melden Sie sich mit einem EVM-Wallet an',
-            wallet_not_connected: 'Wallet nicht verbunden',
-            click_to_input_full_wallet_balance: 'Klicken Sie hier, um das gesamte Wallet-Guthaben einzusetzen.\n\n' +
-            'Der angezeigte Betrag wird um 1 TLOS reduziert, um die Handlungsfähigkeit Ihres Konto sicherzustellen.\n' +
-            'Exakter Betrag (abzüglich der geschätzten Gasgebühren):\n' +
-            '{prettyBalance} TLOS',
-            loading: 'In Bearbeitung...',
-            get_more_tlos: 'Erhalten Sie mehr TLOS',
-            connect_wallet: 'Wallet verbinden',
-            minutes: 'Minuten',
-            hours: 'Stunden',
-            days: 'Tage',
-            unstake: 'Abheben',
-            stake: 'Einzahlen',
-            withdraw: 'Einfordern',
-            telos_evm_staking: 'Telos EVM Staking',
-            stake_tlos_earn_interest: 'Tauschen Sie TLOS für sTLOS, um Belohnungen aus dem Rewards-Pool zu erhalten.',
-            staked: 'Eingezahlt',
-            unstaked: 'Abgehoben',
-            tooltip_1: 'APY: Annual Percentage Yield\n\nDie jährliche Rendite nach Berücksichtigung von Zinseszinsen.\n\n' +
-            'Die Belohnungen werden etwa alle 30 Minuten in den Rewards-Pool ausgezahlt. Der Prozentsatz ist variabel, er verändert sich ' +
-            'kontinuierlich auf Basis der im Rewards-Pool enthaltenen TLOS, dies betrifft die kombinierten Telos von EVM und Native. ' +
-            'Die Belohnungen werden aus einem Community Reserve in den sTLOS-Vertrag eingezahlt.',
-            tooltip_2: 'TVL: Total Value Locked\n\nAktueller Wert (in TLOS) aller im sTLOS' +
-            '(Staked TLOS) Smart Contract gehaltenen Tokens, also die derzeitige Summe aller eingezahlten TLOS in der Telos EVM. ',
-            tooltip_3: 'Eingezahlt\n\n' +
-            'Der Gesamteinsatz für das angemeldete Konto, also ' +
-            'Ihr sTLOS-Guthaben mit seinem aktuellen Wert, in TLOS ',
-            tooltip_4: 'Abgehoben\n\n' +
-            'Der Gesamtwert der TLOS, die Sie abgehoben haben, dies beinhaltet gesperrte und einforderbare Beträge.\n\n' +
-            'Beim Abheben \u2014i.e. redeem\u2014 von sTLOS, wird die entsprechende Anzahl TLOS ' +
-            'für {unlockPeriod} in einen ESCROW-Vertrag übertragen ("gesperrt"), in diesem Zeitraum ' +
-            'ist keine Transaktion mit diesen TLOS möglich.\n\n' +
-            'Nach Ablauf der Sperrfrist können Sie Ihre abgehobenen TLOS auf der entsprechenden Registerkarte einfordern, ' +
-            'der Betrag wird dann Ihrem TLOS-Konto gutgeschrieben ',
-            confirm_unstake_1a: 'Fortsetzen, um sTLOS in TLOS zu tauschen. ' +
-            'Abgehobene TLOS bleiben für den folgenden Zeitraum gesperrt:', /* unstakePeriodPretty...*/
-            confirm_unstake_1b: /*...unstakePeriodPretty */ 'Danach kann der Betrag über die Registerkarte "Einfordern" Ihrem Konto gutgeschrieben werden.',
-            confirm_unstake_2a: 'Achtung, dies führt zur Abhebung ', /* remainingDeposits...*/
-            confirm_unstake_2b: /*...remainingDeposits */ 'Verbleibende Abhebungen, ' +
-            'bis Sie die maximale Anzahl der parallelen Abhebungen erreicht haben. Bitte fordern Sie entsperrte Positionen ein, bevor Sie weitere Positionen öffnen.' +
-            'Bitte warten Sie bis die Sperrfrist einer Position abgelaufgen ist, um weitere sTLOS abzuheben. ' +
-            'In dringenden Fällen können Sie sTLOS in einer DEX (Decentralized Exchange) für TLOS tauschen, bitte beachten Sie, dass der Wert deutlich abweichen kann. -',
-            unstake_stlos_for_tlos: 'sTLOS für TLOS tauschen',
-            unstake_stlos: 'sTLOS abheben',
-            receive_tlos: 'TLOS erhalten',
-            amount: 'Betrag',
-            time_remaining: 'Verbleibende Zeit',
-            full_staked_balance_tooltip: 'Clicken Sie hier, um die gesamte verfügbare Summe einzufügen\n\n' +
-            'Saldo (abzüglich geschätzter Transaktionskosten):\n' +
-            '{prettyBalance} sTLOS',
-            login_using_evm_wallet: 'Mit einem EVM-Wallet anmelden',
-            max_unstake_transactions_reached: 'Sie haben die maximale Anzahl paralleler Abhebungen erreicht, ' +
-            'Bitte fordern Sie verfügbare TLOS ein oder warten Sie, bis ausstehende Positionen entsperrt werden.',
-            click_to_change_time_format: 'Clicken Sie hier, um die Zeit-Formatierung zu ändern.',
-            unstaking: 'Abhebung',
-            available_to_withdraw: 'Zum Einfordern verfügbar',
-            withdraw_tlos: 'TLOS Einfordern',
-            withdraw_successful: 'Transaktion erfolgreich! Jetzt prüfen:',
-            no_withdrawable_positions: 'Keine einforderbaren Positionen',
-            you_have_unlocked_tlos: 'Sie verfügen über einforderbare TLOS Positionen!',
-            stake_tlos_success: 'Transaktion erfolgreich! Jetzt prüfen:',
-            unstake_stlos_success: 'Transaktion erfolgreich! Jetzt prüfen:',
-            deposit_failed: 'Fehler bei der TLOS Einzahlung: { message }',
-            redeem_failed: 'STLOS zu TLOS Konvertierung nicht möglich: { message }',
-            fetch_balance_error: 'Konten-Saldo konnte nicht abgerufen werden: { message }',
-            fetch_stlos_balance_error: 'sTLOS-Saldo konnte nicht abgerufen werden: { message }',
-            fetch_stlos_value_error: 'Wert des sTLOS-Saldo konnte nicht abgerufen werden: { message }',
-            fetch_unstaked_balance_error: 'Abruf des abgehobenen TLOS-Saldos fehlgeschlagen: { message }',
-            fetch_unlocked_balance_error: 'Abruf des einforderbaren sTLOS-Saldos fehlgeschlagen: { message }',
-            fetch_escrow_deposits_error: 'Abruf der ESCROW-Salden fehlgeschlagen: { message }',
-            fetch_conversion_rate_error: 'Abruf des TLOS->sTLOS Umrechnungskurses fehlgeschlagen: { message }',
-            fetch_stlos_contract_error: 'Abruf des sTLOS Smart Contract fehlgeschlagen: { message }',
-            fetch_escrow_contract_error: 'Abruf des ESCROW Smart Contract fehlgeschlagen: { message }',
-            fetch_unstake_period_error: 'Abruf der Sperrfrist fehlgeschlagen: { message }',
-            fetch_account_error: 'Konto konnte nicht abgerufen werden: { message }',
-            fetch_stlos_tvl_error: 'Abruf des sTLOS TVL fehlgeschlagen: { message }',
-            fetch_stlos_apy_error: 'Abruf der sTLOS APY fehlgeschlagen: { message }',
-            fetch_max_deposits_error: 'Abruf der maximalen Abhebungen aus ESCROW Smar Contract fehlgeschlagen: { message }',
-            convert_tlos_to_stlos_error: 'TLOS konnte nicht in STLOS umgewandelt werden: { message }',
-            convert_stlos_to_tlos_error: 'sTLOS konnte nicht in TLOS umgewandelt werden:S { message }',
-            unstake_stlos_error: 'sTLOS konnte nicht abgehoben werden: { message }',
-            withdraw_failed: 'TLOS Position konnte nicht ausgezahlt werden: { message }',
+        blockpage: {
+            block: 'Block',
+            overview: 'Übersicht',
+            transactions: 'Transaktionen',
+        },
+        transactions: {
+            contract_deployment: 'Vertragsbereitstellung',
+            deposit_action_name: 'Einzahlung',
+            deposit_native: 'Einzahlung (nativ)',
+            five_hundred_k_disclaimer: 'Anzeige der letzten 500.000 Datensätze von { total }',
+            for_block: 'für Block',
+            for: 'für',
+            gas_info_label: 'Gas-Info',
+            native_deposit_tooltip: 'Einzahlung von Native Telos',
+            native_withdraw_tooltip: 'Auszahlung zu Native Telos',
+            nonce_label: 'Nonce',
+            see_more_details: 'Weitere Details anzeigen',
+            see_tx_preview_tooltip: 'Vorschau der Transaktionsdetails anzeigen',
+            status_label: 'Status',
+            to: 'an',
+            transaction_action_label: 'Transaktionsaktion',
+            transaction_fee_label: 'Transaktionsgebühr',
+            transactions: 'Transaktionen',
+            transfer_for_x_tlos_from: 'Überweisung von { amount } TLOS von',
+            transfer_tlos_action_name: 'TLOS überweisen',
+            withdraw_action_name: 'Auszahlung',
+            withdraw_native: 'Auszahlung (nativ)',
+            x_gas_used_of_y_limit: '{ amount } Gas verwendet von { limit } Limit',
+        },
+        transaction: {
+            page_title: 'Details der Transaktion',
+            overview: 'Übersicht',
+            logs: 'Protokolle',
+            internal: 'Interne Transaktionen',
+            not_found: 'Transaktion nicht gefunden',
         },
+        home: {
+            telos_evm_explorer: 'Der Telos EVM Explorer',
+            market_cap: 'Marktkapitalisierung',
+            last_finalized_block: 'Letzter finalisierter Block',
+            total_transactions: 'Gesamtanzahl der Transaktionen',
+        },
+        error: {
+            title: 'Seite nicht gefunden.',
+            subtitle: 'Bitte überprüfen Sie die URL erneut. Wenn sie korrekt aussieht, versuchen Sie es später noch einmal.',
+        },
+        issuer: 'Issuer',
+        account_not_found: 'Wir konnten dieses Konto nicht finden',
+        approvals: 'Approvals',
+        supported_interfaces: 'Bekannte unterstützte Schnittstellen',
         explore_transactions: 'Transaktionen prüfen',
         recent_transactions: 'Neueste Transaktionen',
-        telos_evm_explorer: 'Telos EVM Explorer',
         rpc_endpoints: 'RPC Endpunkte',
         monitor: 'Monitor',
-        oops: 'Oh. Hier existiert nichts...',
         go_home: 'Home',
+        minted: 'Minted',
+        holders: 'Holders',
+        evm_holders: 'Alle Telos EVM Halter',
+        total_nfts_minted: 'Insgesamt geprägte NFTs in dieser Sammlung',
+        telos_supply: 'Telos EVM supply',
         select_sol_file: 'Bitte .sol Smart Contract Datei für Hochladen auswählen',
         select_json_file: 'Bitte standard JSON Objekt-Datei für Hochladen auswählen',
         paste_contract_contents: 'Sie müssen eine Datei zum Hochladen auswählen oder den Reiter wechseln, um Smart Contract Inhalte direkt einzufügen.',
@@ -137,12 +85,17 @@ export default {
         verify_contract: 'Smart Contract verifizieren',
         reset: 'Zurücksetzen',
         gas_used: 'Verbrauchtes Gas',
-        transactions: 'Transaktionen',
         account: 'Konto',
         contract: 'Smart Contract',
+        transfers_title: '{ type } Transfers',
+        loading_transfers: 'Loading transfers',
+        loading_approvals: 'Loading approvals',
         erc20_transfers: 'ERC20 Transfers',
+        erc20_transfers_tooltip: 'Liste der ERC20 Token-Übertragungen in dieser Transaktion',
         erc721_transfers: 'ERC721 Transfers',
+        erc721_transfers_tooltip: 'Liste der ERC721 Token-Übertragungen in dieser Transaktion',
         erc1155_transfers: 'ERC1155 Transfers',
+        erc1155_transfers_tooltip: 'Liste der ERC1155 Token-Übertragungen in dieser Transaktion',
         tokens: 'Tokens',
         created_at_trx: 'Erstellt in Transaktion',
         by_address: 'Durch Konto/Adresse',
@@ -182,8 +135,72 @@ export default {
         input: 'Eingabe',
         output: 'Ausgabe',
         value: 'Wert',
+        overview: 'Übersicht',
+        more_info: 'mehr Infos',
+        transaction_sent: 'txn gesendet',
+        first: 'erste',
+        last: 'zuletzt',
+        contract_creator: 'Vertragsersteller',
     },
     components: {
+        approvals: {
+            token_id: 'Token ID',
+            approved: 'Genehmigt',
+            login_account: 'Bitte melden Sie sich mit Ihrem Wallet bei diesem Konto an, um dessen Genehmigungen sehen zu können.',
+            approval_text: 'Um den Betrag der ausgewählten Genehmigungen auf 0 zu aktualisieren, ist eine Signatur Ihres Wallets erforderlich',
+            type: 'Typ',
+            delete: 'Löschen',
+            delete_all: 'Alles löschen',
+            unselect_all: 'Alles wiederufen',
+            cancel: 'Stornieren',
+            remove_approval: 'Entfernen Sie es',
+            removal_approval: 'Einzelgenehmigung entfernen',
+            unselect_all_approvals: 'Deaktivieren Sie alle Genehmigungen',
+            infinite: 'Unendlich',
+            infinite_tooltip: 'Der Zuschuss ist höher als der Gesamtvorrat dieses Tokens',
+            select: 'Wählen Sie Genehmigung aus',
+            unselect: 'Genehmigung deaktivieren',
+            update: 'Genehmigungs-Update',
+            update_description: 'Geben Sie den neuen Betrag ein, um den Spender zu berücksichtigen. Hierzu ist eine Wallet-Signatur erforderlich.',
+            removal_approvals: 'Entfernen Sie alle Genehmigungen',
+            removal_selected_approvals: 'Alle ausgewählten Genehmigungen entfernen',
+            update_failed: 'Die Genehmigung konnte nicht aktualisiert werden',
+            update_success: 'Die Genehmigung von {spender} für {contract} wurde erfolgreich aktualisiert',
+            spender: 'Spender',
+            amount: 'Zuschuss',
+        },
+        nfts : {
+            show_without_metadata: 'NFTs ohne Metadaten anzeigen',
+            id: 'Token ID',
+            name: 'Name',
+            collection: 'Sammlung',
+            nfts: 'NFTs',
+            metadata: 'Meta',
+            minter: 'Münzmeister',
+            owner: 'Eigentümer',
+            contract: 'Vertrag',
+            image: 'Bild',
+            media: 'Medien',
+            minted: 'Block geprägt',
+            attributes: 'attribut',
+            ipfs: 'Von IPFS beziehen',
+            consult_metadata: 'Konsultieren Sie Metadaten\n',
+            consult_media: 'Konsultieren Sie die Medien',
+            consult_collection: 'Konsultieren Sie die Sammlung',
+        },
+        holders : {
+            show_system_contracts: 'Systemverträge anzeigen',
+            holder: 'Halter',
+            balance: 'Guthaben',
+            global_supply: 'Weltweite Versorgung',
+            telos_supply: 'Telos EVM Versorgung',
+            updated: 'Letzte Aktualisierung\n',
+        },
+        gas_limit_tooltip: 'Die maximale Menge an Gas, die für diese Transaktion ausgegeben werden kann',
+        gas_used_tooltip: 'Die Menge an Gas, die bei dieser Transaktion verbraucht wurde',
+        known_tokens: 'Known tokens',
+        other_tokens: 'Unknown tokens',
+        no_balances_found: 'Für diese Adresse wurde kein erc20-Token-Guthaben gefunden',
         internal_txns: 'Interne Transaktionen',
         n_internal_txns: '{ amount } Interne Transaktionen',
         none: 'Keine',
@@ -206,23 +223,34 @@ export default {
         text3_or_to_recover_assets: 'oder zur Wiedererlangung von Werten, die an eine Telos Native Adresse gesendet wurden',
         copy_to_clipboard: '{ text } in die Zwischenablage kopieren',
         latest_block: 'Letzter Block',
+        price_sources: 'Daten von Coingecko, CoinMarketCap oder, falls nicht verfügbar, von dezentralen Börsen auf Telos EVM',
+        marketcap_sources: 'Daten stammen von Coingecko oder CoinMarketCap',
+        usd_marketcap: 'USD Marketcap',
+        usd_price: 'USD Preis',
+        usd_value: 'USD Wert',
         tlos_price: 'TLOS Preis',
         gas_price: 'Gas Preis',
-        click_to_expand: 'Klicken Sie, um die Funktionssignatur zu erweitern',
+        gas_price_tlos: '(Gas Price * Gas Used) in TLOS',
+        gas_price_gwei: 'Gas Price in gwei',
+        click_to_expand: 'Zum erweitern klicken',
+        click_to_fold: 'Zum Falten klicken',
+        expand_all: 'Alle erweitern',
+        collapse_all: 'Alle einklappen',
         search_evm_failed: 'Suche nach verlinkter EVM-Adresse für Telos Native Konto { search_term } fehlgeschlagen.',
         search_failed: 'Suche fehlgeschlagen, bitte geben Sie einen gültigen Suchbegriff ein.',
         add_to_metamask: '{ symbol } zu MetaMask hinzufügen',
-        tx_hash: 'Tx Hash',
+        tx_hash: 'Txn Hash',
         block: 'Block',
-        date: 'Datum',
+        date: 'Date Time (UTC)',
+        age: 'Age',
         method: 'Methode',
-        to_interacted_with: 'An/Interagiert mit',
-        value_transfer: 'Wert/Transfer',
+        to_interacted_with: 'An',
         value: 'Wert',
+        txn_fee: 'Txn Fee',
+        txn_failed: 'Txn Gescheitert',
         token: 'Token',
         unknown_precision: 'Unbekannte Präzision/Dezimalstellen',
         click_to_change_format: 'Zum Ändern des Formats anklicken',
-        func_exed_based_on_dec_data: 'Funktion auf Basis der dekodierten Daten ausgeführt.',
         balance: 'Saldo',
         error_fetching_balance: 'Fehler beim Aufrufen des Saldos',
         launch_metamask_dialog_to_add: 'MetaMask Dialog öffnen, um { symbol } hinzuzufügen',
@@ -231,8 +259,9 @@ export default {
         copied: 'Kopiert',
         copy_to_clipboard_failed: 'Koipieren in die Zwischenablage ist fehlgeschlagen',
         gwei: 'Gwei',
+        failed_to_fetch_transactions: 'Transaktionen konnten nicht abgerufen werden.',
         failed_to_parse_transaction: 'Das Parsen der Daten für die Transaktion ist fehlgeschlagen, Fehler: { message }',
-        executed_based_on_decoded_data: 'Funktion wird auf der Grundlage der dekodierten Eingabedaten ausgeführt. Bei nicht identifizierter Funktion wird stattdessen die Methoden-ID angezeigt.',
+        executed_based_on_decoded_data: 'Name of the function executed based. For unidentified functions, method ID is displayed instead.',
         unsupported_token_type: 'Token Typ nicht unterstützt: { tokenType }',
         token_id: 'Id #{ tokenId }',
         status: 'Status',
@@ -240,23 +269,55 @@ export default {
         from: 'Von',
         to: 'An',
         transaction: {
-            form_from: 'Von : ',
-            form_to: 'An : ',
-            form_token: 'Token : ',
-            consult_collection: 'Sammlung ansehen',
-            consult_metadata: 'Metadaten ansehen',
-            consult_media: 'Medien ansehen',
+            in: 'in',
+            out: 'out',
+            load_error: 'Transaktionen konnten nicht geladen werden',
+            show_short: 'Kurz anzeigen',
             show_total: 'Summe anzeigen',
             show_wei: 'wei anzeigen',
             value_uint256: 'Wert (uint256) : ',
-            tlos_transfer: 'TLOS Transfer',
+            tlos_transfer: 'TLOS Überweisen',
+            native_deposit: 'Einzahlung von Native Telos',
+            native_withdraw: 'Ziehen Sie sich zum einheimischen Telos zurück',
             unknown: 'Unbekannt',
-            contract_deployment: 'Smart Contract Deployment',
+            contract_deployed: 'Contract Deployed',
+            contract_deployment: 'Smart Contract Einsatz',
             no_internal_trxs_found: 'Keine interne Transaktion gefunden',
             human_readable: 'Für Menschen lesbar',
             no_logs_found: 'Keine Protokolle gefunden',
             verify_related_contract: 'Überprüfen Sie den zugehörigen Smart Contract für jedes Protokoll, um seine für den Menschen lesbare Version zu sehen',
             failed_to_retrieve_contract: 'Smart Contract mit dieser Adresse konnte nicht abgerufen werden { address }',
+            trx_hash: 'Transaktions-Hash',
+            trx_hash_tooltip: 'Die eindeutige Kennung der Transaktion.',
+            block: 'Block',
+            block_tooltip: 'Die Blocknummer, in der diese Transaktion enthalten war.',
+            status: 'Status',
+            status_tooltip: 'Gibt an, ob die Transaktion erfolgreich war, fehlgeschlagen ist oder noch aussteht',
+            timestamp: 'Zeitstempel',
+            timestamp_tooltip: 'Der Zeitpunkt, zu dem die Transaktion bestätigt wurde.',
+            trx_action: 'Transaktionsaktion',
+            trx_action_tooltip: 'Die durch diese Transaktion durchgeführte Operation, wie eine Überweisung oder Vertragsausführung.',
+            from: 'Von',
+            from_tooltip: 'Die Adresse, die die Transaktion initiiert hat.',
+            to: 'An',
+            to_tooltip: 'Die Empfängeradresse der Transaktion.',
+            value: 'Wert',
+            value_tooltip: 'Der Betrag der in dieser Transaktion übertragenen Kryptowährung.',
+            gas_fee: 'Transaktionsgebühr',
+            gas_fee_tooltip: 'Die gesamte für diese Transaktion gezahlte Gebühr, in TLOS und USD.',
+            gas_price: 'Gaspreis',
+            gas_price_tooltip: 'Der Preis pro Gaseinheit, der für die Transaktion gezahlt wurde.',
+            more_details: 'Weitere Details',
+            show_more_details: 'klicken, um mehr anzuzeigen',
+            show_less_details: 'klicken, um weniger anzuzeigen',
+            gas_limit_n_usage: 'Gaslimit & Verbrauch durch Txn',
+            gas_limit_n_usage_tooltip: 'Die maximale Menge an Gas, die für die Transaktion zugelassen war, und die tatsächlich verbrauchte Gasmenge.',
+            nonce: 'Nonce',
+            nonce_tooltip: 'Eine sequenzielle Nummer, die jeder Transaktion von derselben Adresse zugeordnet ist, um sicherzustellen, dass Transaktionen in der richtigen Reihenfolge verarbeitet werden.',
+            position_in_block: 'Position im Block',
+            position_in_block_tooltip: 'Die Position dieser Transaktion im Block.',
+            input: 'Eingabe',
+            input_tooltip: 'Mit der Transaktion gesendete Daten, die typischerweise für Vertragsinteraktionen verwendet werden.',
         },
         inputs: {
             incorrect_address_array_length: 'Das Array sollte { size } Adressen enthalten',
@@ -298,16 +359,23 @@ export default {
             checked_at: 'Geprüft am',
             task: 'Aufgabe',
             message: 'Nachricht',
+            category: 'Category',
             block_height: 'Block Nummer',
             latency: 'Latenz',
+            success: 'Success',
+            info: 'Info',
+            alert: 'Alert',
+            error: 'Error',
             click_to_change_format: 'Zum Ändern des Formats anklicken',
         },
         contract_tab: {
+            abi_loaded_from_interface: 'This generic ABI was loaded using IEP-165\'s supportsInterface() and may not be exhaustive. Some of the functions displayed may not be implemented. Verify the contract to be able to interact with it using its full ABI.',
             copy_abi_to_clipboard: 'ABI JSON des Smart Contracts in die Zwischenablage kopieren',
             enter_amount: 'Wählen Sie Anzahl der Dezimalstellen und geben Sie einen Betrag ein, dieser wird als Funktionsparameter als uint256 erfasst',
             result: 'Ergebnis',
             view_transaction: 'Transaktion ansehen',
             code: 'Code',
+            bytecode: 'Bytecode',
             read: 'Lesen',
             write: 'Schreiben',
             amount: 'Anzahl',
@@ -316,8 +384,9 @@ export default {
             custom: 'Benutzerdefiniert',
             unverified_contract_source: 'Dieser Smart Contract wurde nicht verifiziert...',
             click_here: 'Klicken Sie hier, ',
-            upload_source_files: 'um Quelldateien hochzuladen und diesen Smart Contract zu verifizieren. ' +
-                'Alternativ können Sie mit dem Smart Contract interagieren, indem Sie ein beliebiges ABI verwenden:',
+            upload_source_files: 'um Quelldateien hochzuladen und diesen Smart Contract zu verifizieren. ',
+            abi_autoloaded: 'In the meantime, you can interact with the contract using our automatically loaded preset ABI.',
+            choose_abi: 'Alternatively, you can interact with the contract either using one of our preset ABIs or a custom JSON one:',
             use_erc20_abi: 'ERC20 ABI nutzen',
             use_erc721_abi: 'ERC721 ABI nutzen',
             use_erc1155_abi: 'ERC1155 ABI nutzen',
@@ -329,30 +398,118 @@ export default {
             read_functions: 'Lese-Funktionen',
             write_functions: 'Schreib-Funktionen',
             unverified_contract: 'Ungeprüfter Smart Contract',
+            verified_contract: 'Verified contract',
         },
         header: {
-            sign_in: 'Anmelden',
-            sign_out: 'Abmelden',
-            liq_staking: 'Liquid Staking',
-            goto_staking: 'Staking/Anlage öffnen',
-            goto_health_monitor: 'Health Monitor öffnen',
-            goto_mainnet: 'Mainnet auswählen',
-            goto_testnet: 'Testnet auswählen',
-            health_monitor: 'Health Monitor',
-            health_status: 'Health Status',
-            advanced: 'Erweitert',
-            light_mode: 'Light Mode',
-            dark_mode: 'Dark Mode',
+            address_copied: 'Adresse/Konto in Zwischenablage kopiert',
             address_not_found: 'Suche nach verlinkter EVM-Adresse für Telos Native Konto { search_term } fehlgeschlagen.',
-            search_failed: 'Suche fehlgeschlagen, bitte geben Sie einen gültigen Suchbegriff ein.',
-            goto_address_details: 'Adresse/Konto Details öffnen',
+            api_documentation: 'API-Dokumentation',
+            blockchain: 'Blockchain',
+            blocks: 'Blöcke',
+            connect_wallet: 'Wallet verbinden',
             copy_address: 'Adresse/Konto kopieren',
-            address_copied: 'Adresse/Konto in Zwischenablage kopiert',
-            search_placeholder: 'Adresse/Konto, Transaktion, Block',
+            csv_export: 'CSV-Export',
+            developers: 'Entwickler',
+            disconnect_wallet_tooltip: 'Wallet trennen',
+            gas: 'Gas',
+            goto_address_details: 'Adresse/Konto Details öffnen',
+            health_monitor: 'Health Monitor',
+            home: 'Heim',
+            more: 'Mehr',
+            network: 'Netzwerk',
+            open_language_switcher: 'open language switcher',
+            search_failed: 'Suche fehlgeschlagen, bitte geben Sie einen gültigen Suchbegriff ein.',
+            search_placeholder: 'Suche alles auf Telos',
             select_language: 'Sprache wählen',
+            switch_to_dark_theme: 'Wechseln Sie zum dunklen Thema',
+            switch_to_light_theme: 'Wechseln Sie zum Lichtthema',
+            system_token_price: '{token}-Preis',
+            telos_ecosystem: 'Telos-Ökosystem',
+            telos_evm_logo_alt: 'Telos EVM-Logo',
+            telos_wallet: 'Wallet',
+            telos_bridge: 'Bridge',
+            transactions: 'Transaktionen',
+            verify_contract_sourcify: 'Vertrag überprüfen (Sourcify)',
+            view_other_networks: 'Andere Netzwerke anzeigen',
+        },
+        blocks: {
+            block_height: 'Blockhöhe',
+            timestamp: 'Zeitstempel',
+            size: 'Größe',
+            gas_used: 'Verbrauchtes Gas',
+            gas_limit: 'Gaslimit',
+            hash: 'Hash',
+            parent_hash: 'Eltern-Hash',
+            nonce: 'Nonce',
+            extra_data: 'Zusätzliche Daten',
+            extra_data_tooltip: 'Zusätzliche Daten, die vom Miner des Blocks hinzugefügt wurden',
+            block_height_tooltip: 'Auch "Blocknummer" genannt. Die Blockhöhe repräsentiert die Länge der Blockchain, die um eins nach dem Hinzufügen eines neuen Blocks zunimmt',
+            timestamp_tooltip: 'Die Zeit und das Datum, zu dem der Block produziert wurde',
+            transactions_tooltip: 'Die Anzahl der Transaktionen im Block. Interne Transaktionen sind Transaktionen, die als Ergebnis der Vertragsausführung auftreten und einen TLOS-Wert beinhalten',
+            size_tooltip: 'die Menge an Daten im Block, bestimmt durch das Gaslimit',
+            gas_used_tooltip: 'Die Menge an im Block verwendeten Gas',
+            gas_limit_tooltip: 'Das Gaslimit für alle Transaktionen im Block',
+            nonce_tooltip: 'Der Wert, der beim Mining verwendet wird, um einen Konsens über den Proof of Work für den Block zu erreichen',
+            hash_tooltip: 'Der Hash des Blockheaders',
+            parent_hash_tooltip: 'Der Hash des Elternblock',
+            count_transactions: '{count} Transaktionen',
+            count_transaction: '1 Transaktion',
+            in_this_block: 'in diesem Block',
+            transactions: 'Transaktionen',
+            transactions_root: 'Transaktions-Root',
+            block: 'Block',
+            age: 'Alter',
+        },
+        footer: {
+            telos: 'Telos',
+            telos_homepage: 'Hauptseite',
+            telos_wallet: 'Telos-Geldbörse',
+            telos_bridge: 'Telos-Brücke',
+            telos_zero_explorer: 'Telos Zero Explorer',
+            buy_telos: 'Telos kaufen',
+            stake_telos: 'Telos staken',
+            telos_ecosystem: 'Telos Ökosystem',
+            network_status: 'Netzwerkstatus',
+            about: 'Über',
+            about_us: 'Über uns',
+            contactUs: 'Kontaktiere uns',
+            build: 'Bauen',
+            api_documentation: 'API-Dokumentation',
+            telos_documentation: 'Telos Dokumentation',
+            github: 'Github',
+            brand_assets: 'Markenvermögen',
+            back_to_top: 'Zurück nach oben',
         },
     },
     global: {
+        all: 'Alle',
+        true: 'wahr',
+        false: 'falsch',
+        close: 'Schließen',
+        toggle_fullscreen: 'Vollbildmodus umschalten',
+        name: 'Name',
+        symbol: 'Symbol',
+        show_table: 'Tabelle anzeigen',
+        show_grid: 'Raster anzeigen',
+        records_per_page: 'Einträge pro Seite:',
+        max_decimals_reached: 'Please use { max } decimal places maximum',
+        erc20_token: 'ERC20 Token',
+        erc721_token: 'ERC721 Token',
+        sign: 'Zeichen',
+        hours: 'std.',
+        updated: 'Letzte Aktualisierung',
+        action: 'Aktion',
+        wallet_response: 'Warten auf Antwort von Ihrem Wallet-Anbieter',
+        minutes: 'minutes',
+        days: 'tage',
+        and: 'und',
+        unknown: 'Unknown',
+        data_behind_by: 'Entschuldigung ! Die angezeigten Daten liegen hinterher',
+        not_synced: 'Der Indexer ist nicht mit dem neuesten Block synchronisiert',
+        try_reloading: 'Sie können versuchen, die Seite neu zu laden, um das Problem zu beheben. Wenn das Problem weiterhin besteht, wenden Sie sich bitte an ein Telos-Teammitglied.',
+        expand: 'Mehr sehen',
+        error: 'Fehler',
+        async_error_description: 'Entschuldigung ! Beim Versuch, Ressourcen anzufordern, ist ein Fehler aufgetreten. Bitte stellen Sie sicher, dass Ihre Internetverbindung funktioniert, und versuchen Sie es erneut. Wenn der Fehler weiterhin besteht, kontaktieren Sie uns direkt über unseren Telegram-Kanal.',
         language: 'Sprache',
         cancel: 'Abbrechen',
         ok: 'Ok',
@@ -360,7 +517,7 @@ export default {
         internal_error: 'Interner Fehler',
     },
     layouts: {
-        health_status: 'Health Status',
+        health_status: 'Gesundheitszustand',
         stake_telos: 'Stake TLOS',
         teloscan_mainnet: 'Teloscan Mainnet',
         teloscan_testnet: 'Teloscan Testnet',
@@ -379,16 +536,12 @@ export default {
         error_see_details_label: 'Details anzeigen',
         error_details_title: 'Fehlerdetails',
         neutral_message_sending: 'Sende <b>{quantity}</b> an <b>{address}</b>',
-        neutral_message_staking: 'Einlagen von <b>{quantity} {symbol}</b>',
-        neutral_message_unstaking: 'Rücknahme von <b>{quantity} {symbol}</b> vorbereiten',
         neutral_message_revoking: 'Zuweisung von <b>{symbol}</b> für <b>{address}</b> erfolgreich widerrufen',
         neutral_message_wrapping: '<b>{quantity} {symbol}</b> in ERC20 umwandeln',
         neutral_message_unwrapping: '<b>{quantity} {symbol}</b> wiederherstellen',
         neutral_message_withdrawing: '<b>{quantity} {symbol}</b> abheben',
         dont_show_message_again: 'Diese Nachricht nicht mehr anzeigen',
         error_message_sending: 'Beim Senden von <b>{quantity}</b> an <b>{address}</b> ist ein Fehler aufgetreten',
-        error_message_staking: 'Beim Einzahlen von <b>{quantity} {symbol}</b> ist ein Fehler aufgetreten',
-        error_message_unstaking: 'Beim Vorbereiten der Rücknahme von <b>{quantity} {symbol}</b> ist ein Fehler aufgetreten',
         error_message_revoking: 'Beim Widerrufen der Zuweisung von <b>{symbol}</b> für <b>{address}</b> ist ein Fehler aufgetreten',
         error_message_wrapping: 'Beim Umwandeln von <b>{quantity} {symbol}</b> in ERC20 ist ein Fehler aufgetreten',
         error_message_unwrapping: 'Beim Wiederherstellen von <b>{quantity} {symbol}</b> ist ein Fehler aufgetreten',
@@ -403,6 +556,17 @@ export default {
             error_unpredictable_gas_limit: 'Das Gaslimit für diese Transaktion konnte nicht geschätzt werden',
             error_transaction_canceled: 'Sie haben die Aktion abgebrochen',
         },
+        words: {
+            day: 'Tag',
+            days: 'Tage',
+            hour: 'Stunde',
+            hours: 'Stunden',
+            minute: 'Minute',
+            minutes: 'Minuten',
+            second: 'Sekunde',
+            seconds: 'Sekunden',
+            time_ago: 'Vor {time}',
+        },
     },
     temporal: {
         telos_cloud_discontinued_title: 'Wichtig',
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 7743c071d..7970d0d91 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -1,120 +1,71 @@
-/* eslint-disable max-len*/
-
 export default {
     locale: {
         current_language_name: 'English',
     },
     pages: {
-        staking: {
-            note_unstaking_period: 'Please note that there is an unstaking period of {period}',
-            claim_tlos: 'Claim TLOS',
-            add_stlos_to_metamask: 'Launch MetaMask dialog to add sTLOS',
-            metamask_fox_logo: 'MetaMask fox logo',
-            cancel: 'Cancel',
-            stake_tlos_confirm: 'Continuing will stake TLOS in exchange for sTLOS. ' +
-            'sTLOS can be redeemed for TLOS at any time using the Unstake tab.',
-            stake_tlos_confirm_2a: 'After TLOS has been unstaked, it will be locked for a period of', /* unstakePeriodPretty...*/
-            stake_tlos_confirm_2b: /*...unstakePeriodPretty */ 'after which it can be withdrawn to your account from the Withdraw tab.',
-            stake_tlos_confirm_3: 'Would you like to proceed?',
-            stake_tlos: 'Stake TLOS',
-            stake_tlos_subheader: 'Staking your TLOS to sTLOS grants you access to a steady income and various DeFi applications, ' +
-            'further increasing yield. As the reward pool increases, the TLOS to sTLOS conversion rate will change ' +
-            'over time. Therefore, the amount of sTLOS received is smaller than the staked TLOS. Rewards will be ' +
-            'auto-compounded. No further action is required.',
-            receive_stlos: 'Receive sTLOS',
-            available: '{balanceTlos} Available',
-            insufficient_tlos_balance: 'Insufficient TLOS balance to stake',
-            login_using_an_evm_wallet: 'Login using an EVM wallet',
-            wallet_not_connected: 'Wallet not connected',
-            click_to_input_full_wallet_balance: 'Click to input full wallet balance\n\n' +
-            'Balance displayed is reduced by 1 TLOS to keep your account actionable.\n' +
-            'Precise balance (less approximate gas fees):\n' +
-            '{prettyBalance} TLOS',
-            loading: 'Loading...',
-            get_more_tlos: 'Get more TLOS',
-            connect_wallet: 'Connect Wallet',
-            minutes: 'minutes',
-            hours: 'hours',
-            days: 'days',
-            unstake: 'Unstake',
-            stake: 'Stake',
-            withdraw: 'Withdraw',
-            telos_evm_staking: 'Telos EVM Staking',
-            stake_tlos_earn_interest: 'Stake TLOS for sTLOS to earn interest from the staking rewards pool',
-            staked: 'Staked',
-            unstaked: 'Unstaked',
-            tooltip_1: 'APY: Annual Percentage Yield\n\nThe annual rate of return after taking compound interest into account.\n\n' +
-            'Interest is compounded approximately every 30 minutes. The percentage rate is not fixed, meaning that ' +
-            'it will change over time with the total amount of TLOS staked across Telos EVM and Native. ' +
-            'Rewards are disbursed from a community rewards pool into the sTLOS contract.',
-            tooltip_2: 'TVL: Total Value Locked\n\nThe current value, in TLOS, of all assets held in the sTLOS ' +
-            '(Staked TLOS) smart contract, i.e. the sum of all TLOS staked on the Telos EVM at this moment.',
-            tooltip_3: 'Staked\n\n' +
-            'The total staked amount associated with the logged-in account, i.e. ' +
-            'your sTLOS token balance, along with its value in TLOS',
-            tooltip_4: 'Unstaked\n\n' +
-            'The total value of TLOS which you have unstaked, both locked and unlocked.\n\n' +
-            'When you unstake\u2014i.e. redeem\u2014some value of sTLOS, the equivalent amount of ' +
-            'TLOS is sent into escrow ("locked") for {unlockPeriod}; during this time, ' +
-            'you cannot interact with this TLOS.\n\n' +
-            'After the unlock period has elapsed, you can withdraw your unlocked TLOS from the Withdraw tab ' +
-            'on this page, at which point it will be added to your account TLOS balance.',
-            confirm_unstake_1a: 'Continuing will redeem sTLOS in exchange for TLOS. ' +
-            'Unstaked TLOS will remain locked for a period of', /* unstakePeriodPretty...*/
-            confirm_unstake_1b: /*...unstakePeriodPretty */ 'after which it can be withdrawn to your account from the Withdraw tab',
-            confirm_unstake_2a: 'Heads up, you may unstake ', /* remainingDeposits...*/
-            confirm_unstake_2b: /*...remainingDeposits */ 'more times before ' +
-            'you reach the maximum concurrent unstake actions. When you reach the maximum, you will need to withdraw' +
-            'unlocked TLOS to continue unstaking. If you don\'t have any withdrawable TLOS at that time, you must' +
-            'wait until the lock duration has elapsed before you can withdraw unlocked TLOS and unstake more sTLOS. -',
-            unstake_stlos_for_tlos: 'Unstake sTLOS in exchange for TLOS',
-            unstake_stlos: 'Unstake sTLOS',
-            receive_tlos: 'Receive TLOS',
-            amount: 'Amount',
-            time_remaining: 'Time Remaining',
-            full_staked_balance_tooltip: 'Click to input full staked balance\n\n' +
-            'Precise balance (less approximate gas fees):\n' +
-            '{prettyBalance} sTLOS',
-            login_using_evm_wallet: 'Login using an EVM wallet',
-            max_unstake_transactions_reached: 'You have reached the maximum number of pending unstake transactions, ' +
-            'please withdraw available TLOS or wait for pending unstaked TLOS to become withdrawable before making another deposit.',
-            click_to_change_time_format: 'Click to change time format',
-            unstaking: 'Unstaking',
-            available_to_withdraw: 'Available to withdraw',
-            withdraw_tlos: 'Withdraw TLOS',
-            withdraw_successful: 'Withdraw successful! View Transaction:',
-            no_withdrawable_positions: 'No withdrawable positions',
-            you_have_unlocked_tlos: 'You have unlocked TLOS!',
-            stake_tlos_success: 'Stake successful! View Transaction:',
-            unstake_stlos_success: 'Unstake successful! View Transaction:',
-            deposit_failed: 'Failed to deposit TLOS: { message }',
-            redeem_failed: 'Unable to convert STLOS to TLOS: { message }',
-            fetch_balance_error: 'Failed to fetch account: { message }',
-            fetch_stlos_balance_error: 'Failed to fetch account STLOS balance: { message }',
-            fetch_stlos_value_error: 'Failed to fetch account STLOS balance value: { message }',
-            fetch_unstaked_balance_error: 'Failed to fetch total unstaked TLOS balance: { message }',
-            fetch_unlocked_balance_error: 'Failed to fetch withdrawable STLOS balance: { message }',
-            fetch_escrow_deposits_error: 'Failed to fetch escrow deposits: { message }',
-            fetch_conversion_rate_error: 'Failed to fetch TLOS->sTLOS conversion rate: { message }',
-            fetch_stlos_contract_error: 'Failed to get STLOS contract: { message }',
-            fetch_escrow_contract_error: 'Failed to get STLOS contract: { message }',
-            fetch_unstake_period_error: 'Failed to retrieve unstaking period: { message }',
-            fetch_account_error: 'Failed to fetch account: { message }',
-            fetch_stlos_tvl_error: 'Failed to fetch sTLOS TVL: { message }',
-            fetch_stlos_apy_error: 'Failed to fetch sTLOS APY: { message }',
-            fetch_max_deposits_error: 'Failed to fetch max deposits from escrow contract { message }',
-            convert_tlos_to_stlos_error: 'Unable to convert TLOS to STLOS { message }',
-            convert_stlos_to_tlos_error: 'Unable to convert STLOS to TLOS { message }',
-            unstake_stlos_error: 'Failed to unstake sTLOS { message }',
-            withdraw_failed: 'Failed to withdraw unlocked TLOS: { message }',
+        blocklist: {
+            title: 'Blocks',
+        },
+        blockpage: {
+            block: 'Block',
+            overview: 'Overview',
+            transactions: 'Transactions',
         },
+        transactions: {
+            contract_deployment: 'Contract Deployment',
+            deposit_action_name: 'deposit',
+            deposit_native: 'deposit (native)',
+            five_hundred_k_disclaimer: 'Showing the last 500K records of { total }',
+            for_block: 'for block',
+            for: 'for',
+            gas_info_label: 'Gas Info',
+            native_deposit_tooltip: 'Deposit from Native Telos',
+            native_withdraw_tooltip: 'Withdraw to Native Telos',
+            nonce_label: 'Nonce',
+            see_more_details: 'See more details',
+            see_tx_preview_tooltip: 'See preview of the transaction details',
+            status_label: 'Status',
+            to: 'to',
+            transaction_action_label: 'Transaction Action',
+            transaction_fee_label: 'Transaction Fee',
+            transactions: 'Transactions',
+            transfer_for_x_tlos_from: 'Transfer for { amount } TLOS from',
+            transfer_tlos_action_name: 'Transfer TLOS',
+            withdraw_action_name: 'withdraw',
+            withdraw_native: 'withdraw (native)',
+            x_gas_used_of_y_limit: '{ amount } gas used of { limit } limit',
+        },
+        transaction: {
+            page_title: 'Transaction Details',
+            overview: 'Overview',
+            logs: 'Logs',
+            internal: 'Internal Transactions',
+            not_found: 'Transaction not found',
+        },
+        home: {
+            telos_evm_explorer: 'The Telos EVM Explorer',
+            market_cap: 'Market Cap',
+            last_finalized_block: 'Last Finalized Block',
+            total_transactions: 'Total Transactions',
+        },
+        error: {
+            title: 'Page not found.',
+            subtitle: 'Please double-check the URL. If it looks correct, try again later.',
+        },
+        issuer: 'Issuer',
+        account_not_found: 'We could not find this account',
+        approvals: 'Approvals',
+        supported_interfaces: 'Known supported interface(s)',
         explore_transactions: 'Explore Transactions',
         recent_transactions: 'Recent transactions',
-        telos_evm_explorer: 'Telos EVM Explorer',
         rpc_endpoints: 'RPC Endpoints',
         monitor: 'Monitor',
-        oops: 'Oops. Nothing here...',
         go_home: 'Go Home',
+        minted: 'Minted',
+        telos_supply: 'Telos EVM supply',
+        holders: 'Holders',
+        evm_holders: 'All Telos EVM holders',
+        total_nfts_minted: 'Total NFTs minted in this collection',
         select_sol_file: 'Select .sol contract file for upload',
         select_json_file: 'Select standard JSON input object file for upload',
         paste_contract_contents: 'you must select a file for upload or toggle input to paste contract contents',
@@ -137,9 +88,11 @@ export default {
         verify_contract: 'Verify Contract',
         reset: 'Reset',
         gas_used: 'Gas used',
-        transactions: 'Transactions',
-        account: 'Account',
+        account: 'Address',
         contract: 'Contract',
+        transfers_title: '{ type } Transfers:',
+        loading_transfers: 'Loading transfers',
+        loading_approvals: 'Loading approvals',
         erc20_transfers: 'ERC20 Transfers',
         erc721_transfers: 'ERC721 Transfers',
         erc1155_transfers: 'ERC1155 Transfers',
@@ -182,8 +135,19 @@ export default {
         input: 'Input',
         output: 'Output',
         value: 'Value',
+        overview: 'overview',
+        more_info: 'more info',
+        transaction_sent: 'txn sent',
+        first: 'first',
+        last: 'last',
+        contract_creator: 'contract creator',
     },
     components: {
+        gas_limit_tooltip: 'The maximum amount of gas that can be spent on this transaction',
+        gas_used_tooltip: 'The amount of gas that was spent on this transaction',
+        known_tokens: 'Known tokens',
+        other_tokens: 'Unknown tokens',
+        no_balances_found: 'No erc20 token balance was found for this address',
         internal_txns: 'Internal Transactions',
         n_internal_txns: '{ amount } internal transactions',
         none: 'None',
@@ -206,23 +170,34 @@ export default {
         text3_or_to_recover_assets: 'or to recover assets sent to a native-linked address',
         copy_to_clipboard: 'Copy { text } to clipboard',
         latest_block: 'Latest Block',
+        price_sources: 'Data obtained from Coingecko, CoinMarketCap or if unavailable from decentralized exchanges on Telos EVM',
+        marketcap_sources: 'Data obtained from Coingecko or CoinMarketCap',
+        usd_marketcap: 'USD Marketcap',
+        usd_price: 'USD Price',
+        usd_value: 'USD Value',
         tlos_price: 'TLOS Price',
         gas_price: 'Gas Price',
-        click_to_expand: 'Click to expand the function signature',
+        gas_price_tlos: '(Gas Price * Gas Used) in TLOS',
+        gas_price_gwei: 'Gas Price in gwei',
+        click_to_expand: 'Click to expand',
+        click_to_fold: 'Click to fold',
+        expand_all: 'Expand all',
+        collapse_all: 'Collapse all',
         search_evm_failed: 'Search for EVM address linked to { search_term } native account failed.',
         search_failed: 'Search failed, please enter a valid search term.',
         add_to_metamask: 'Add { symbol } to MetaMask',
-        tx_hash: 'Tx Hash',
+        tx_hash: 'Txn Hash',
         block: 'Block',
-        date: 'Date',
+        date: 'Date Time (UTC)',
+        age: 'Age',
         method: 'Method',
-        to_interacted_with: 'To / Interacted With',
-        value_transfer: 'Value / Transfer',
+        to_interacted_with: 'To',
         value: 'Value',
+        txn_fee: 'Txn Fee',
+        txn_failed: 'Txn Failed',
         token: 'Token',
         unknown_precision: 'Unknown Precision',
         click_to_change_format: 'Click to change format',
-        func_exed_based_on_dec_data: 'Function executed based on decoded data',
         balance: 'Balance',
         error_fetching_balance: 'error fetching balance',
         launch_metamask_dialog_to_add: 'Launch MetaMask dialog to add { symbol }',
@@ -231,25 +206,84 @@ export default {
         copied: 'Copied',
         copy_to_clipboard_failed: 'Copy to clipboard failed',
         gwei: 'Gwei',
+        failed_to_fetch_transactions: 'Failed to fetch transactions',
         failed_to_parse_transaction: 'Failed to parse data for transaction, error was: { message }',
-        executed_based_on_decoded_data: 'Function executed based on decoded input data. For unidentified function, method ID is displayed instead.',
+        executed_based_on_decoded_data: 'Name of the function executed based. For unidentified functions, method ID is displayed instead.',
         unsupported_token_type: 'Unsupported token type: { tokenType }',
         token_id: 'Id #{ tokenId }',
         status: 'Status',
         nonce: 'Nonce',
         from: 'From',
         to: 'To',
-        transaction: {
-            form_from: 'From : ',
-            form_to: 'To : ',
-            form_token: 'Token : ',
-            consult_collection: 'Consult collection',
+        item: 'Item',
+        amount: 'Amount',
+        approvals: {
+            token_id: 'Token ID',
+            approved: 'Approved',
+            approvals_granted_title: 'ERC Approvals:',
+            login_account: 'Please log into this account using your wallet to be able to see its approvals.',
+            approval_text: 'A signature from your wallet is needed to update the selected approvals\' amount to 0.',
+            type: 'Type',
+            delete: 'Delete',
+            delete_all: 'Delete all',
+            unselect_all: 'Unselect all',
+            cancel: 'Cancel',
+            remove_approval: 'Remove it',
+            removal_approval: 'Remove single approval',
+            unselect_all_approvals: 'Unselect all approvals',
+            infinite: 'Infinite',
+            infinite_tooltip: 'Allowance is higher than the total supply of this token',
+            select: 'Select approval',
+            unselect: 'Unselect approval',
+            update: 'Approval Update',
+            update_description: 'Enter the new amount to allow for the spender. This will require a wallet signature.',
+            removal_approvals: 'Remove all approvals',
+            removal_selected_approvals: 'Remove all selected approvals',
+            update_failed: 'Failed to update approval',
+            update_success: 'Approval to {spender} for {contract} was successfully updated',
+            spender: 'Spender',
+            amount: 'Allowance',
+        },
+        nfts : {
+            show_without_metadata: 'Show NFTs with no metadata',
+            id: 'Token ID',
+            amount: 'Amount',
+            name: 'Name',
+            collection: 'Collection',
+            nfts: 'NFTs',
+            metadata: 'Meta',
+            minter: 'Minter',
+            owner: 'Owner',
+            contract: 'Contract',
+            image: 'Image',
+            media: 'Media',
+            minted: 'Block minted',
+            attributes: 'attribute',
+            ipfs: 'Get from IPFS',
             consult_metadata: 'Consult metadata',
             consult_media: 'Consult media',
+            consult_collection: 'Consult collection',
+        },
+        holders : {
+            show_system_contracts: 'Show system contracts',
+            holder: 'Holder',
+            balance: 'Balance',
+            global_supply: 'Global supply',
+            telos_supply: 'Telos EVM supply',
+            updated: 'Last updated',
+        },
+        transaction: {
+            in: 'in',
+            out: 'out',
+            load_error: 'Could not load transactions',
+            show_short: 'Show short',
             show_total: 'Show total',
             show_wei: 'Show wei',
             value_uint256: 'Value (uint256) : ',
             tlos_transfer: 'TLOS Transfer',
+            contract_deployed: 'Contract Deployed',
+            native_deposit: 'Deposit from Native Telos',
+            native_withdraw: 'Withdraw to Native Telos',
             unknown: 'Unknown',
             contract_deployment: 'Contract Deployment',
             no_internal_trxs_found: 'No internal transactions found',
@@ -257,6 +291,43 @@ export default {
             no_logs_found: 'No logs found',
             verify_related_contract: 'Verify the related contract for each log to see its human readable version',
             failed_to_retrieve_contract: 'Failed to retrieve contract with address { address }',
+            trx_hash: 'Transaction Hash',
+            trx_hash_tooltip: 'The unique identifier of the transaction.',
+            block: 'Block',
+            block_tooltip: 'The block number in which this transaction was included.',
+            status: 'Status',
+            status_tooltip: 'Indicates whether the transaction was successful, failed, or is pending',
+            timestamp: 'Timestamp',
+            timestamp_tooltip: 'The time and date the transaction was confirmed.',
+            trx_action: 'Transaction Action',
+            trx_action_tooltip: 'The operation performed by this transaction, such as a transfer or contract execution.',
+            from: 'From',
+            from_tooltip: 'The address initiating the transaction.',
+            to: 'To',
+            to_tooltip: 'The recipient address of the transaction.',
+            erc20_transfers: 'ERC20 transfers',
+            erc20_transfers_tooltip: 'List of ERC20 token transfers in this transaction',
+            erc721_transfers: 'ERC721 transfers',
+            erc721_transfers_tooltip: 'List of ERC721 token transfers in this transaction',
+            erc1155_transfers: 'ERC1155 transfers',
+            erc1155_transfers_tooltip: 'List of ERC1155 token transfers in this transaction',
+            value: 'Value',
+            value_tooltip: 'The amount of cryptocurrency transferred in this transaction.',
+            gas_fee: 'Transaction Fee',
+            gas_fee_tooltip: 'The total fee paid for this transaction, in TLOS and USD.',
+            gas_price: 'Gas Price',
+            gas_price_tooltip: 'The price per unit of gas paid for the transaction.',
+            more_details: 'More Details',
+            show_more_details: 'click to show more',
+            show_less_details: 'click to show less',
+            gas_limit_n_usage: 'Gas Limit & Usage by Txn',
+            gas_limit_n_usage_tooltip: 'The maximum amount of gas that was allowed for the transaction, and the actual amount of gas used.',
+            nonce: 'Nonce',
+            nonce_tooltip: 'A sequential number tied to every transaction made by the same address, ensuring transactions are processed in order.',
+            position_in_block: 'Position in Block',
+            position_in_block_tooltip: 'The position of this transaction in the block.',
+            input: 'Input',
+            input_tooltip: 'Data sent along with the transaction, typically used for contract interactions.',
         },
         inputs: {
             incorrect_address_array_length: 'There should be { size } addresses in the array',
@@ -298,26 +369,35 @@ export default {
             checked_at: 'Checked at',
             task: 'Task',
             message: 'Message',
+            category: 'Category',
             block_height: 'Block Height',
             latency: 'Latency',
+            success: 'Success',
+            info: 'Info',
+            alert: 'Alert',
+            error: 'Error',
             click_to_change_format: 'Click to change format',
         },
         contract_tab: {
+            abi_loaded_from_interface: 'This generic ABI was loaded using IEP-165\'s supportsInterface() and may not be exhaustive. Some of the functions displayed may not be implemented. Verify the contract to be able to interact with it using its full ABI.',
             copy_abi_to_clipboard: 'Copy contract ABI JSON to clipboard',
             enter_amount: 'Select number of decimals and enter an amount, this will be entered for you into the function parameter as uint256',
             result: 'Result',
             view_transaction: 'View transaction',
             code: 'Code',
+            bytecode: 'Bytecode',
             read: 'Read',
             write: 'Write',
             amount: 'Amount',
             value: 'Value',
             custom_decimals: 'Custom decimals',
             custom: 'Custom',
-            unverified_contract_source: 'This contract source has not been verified.',
-            click_here: 'Click here',
-            upload_source_files: 'to upload source files and verify this contract. ' +
-                'Alternatively, you can interact with the contract using an arbitrary ABI:',
+            unverified_contract_source: 'This contract is unverified.',
+            verified_contract_source: 'Verify and Publish your contract source code',
+            here: 'here.',
+            upload_source_files: 'to upload source files which will also verify this contract. ',
+            abi_autoloaded: 'In the meantime, you can interact with the contract using our automatically loaded preset ABI.',
+            choose_abi: 'Alternatively, you can interact with the contract either using one of our preset ABIs or a custom JSON one:',
             use_erc20_abi: 'Use ERC20 ABI',
             use_erc721_abi: 'Use ERC721 ABI',
             use_erc1155_abi: 'Use ERC1155 ABI',
@@ -329,84 +409,124 @@ export default {
             read_functions: 'Read functions',
             write_functions: 'Write functions',
             unverified_contract: 'Unverified contract',
+            verified_contract: 'Verified contract',
         },
         header: {
-            sign_in: 'Sign in',
-            sign_out: 'Sign out',
-            liq_staking: 'Liquid Staking',
-            goto_staking: 'Go to Staking',
-            goto_health_monitor: 'go to Heath Monitor page',
-            goto_mainnet: 'Go to Mainnet',
-            goto_testnet: 'Go to Testnet',
-            health_monitor: 'Health Monitor',
-            health_status: 'Health Status',
-            advanced: 'Advanced',
-            light_mode: 'Light Mode',
-            dark_mode: 'Dark Mode',
+            address_copied: 'Address copied to clipboard',
             address_not_found: 'Search for EVM address linked to { account } native account failed.',
-            search_failed: 'Search failed, please enter a valid search term.',
-            goto_address_details: 'Go to address details',
+            api_documentation: 'API Documentation',
+            blockchain: 'Blockchain',
+            blocks: 'Blocks',
+            connect_wallet: 'Connect Wallet',
             copy_address: 'Copy address',
-            address_copied: 'Address copied to clipboard',
-            search_placeholder: 'Address, Tx, Block',
+            csv_export: 'CSV Export',
+            developers: 'Developers',
+            disconnect_wallet_tooltip: 'Disconnect wallet',
+            gas: 'Gas',
+            goto_address_details: 'Go to address details',
+            health_monitor: 'Health Monitor',
+            home: 'Home',
+            more: 'More',
+            network: 'Network',
+            open_language_switcher: 'Open language switcher',
+            search_failed: 'Search failed, please enter a valid search term.',
+            search_placeholder: 'Search Address/Block/TxnHash',
             select_language: 'Select Language',
-            open_language_switcher: 'open language switcher',
+            switch_to_dark_theme: 'Switch to dark theme',
+            switch_to_light_theme: 'Switch to light theme',
+            system_token_price: '{token} price',
+            telos_ecosystem: 'Telos Ecosystem',
+            telos_evm_logo_alt: 'Telos EVM logo',
+            telos_wallet: 'Wallet',
+            telos_bridge: 'Bridge',
+            transactions: 'Transactions',
+            verify_contract_sourcify: 'Verify Contract (Sourcify)',
+            view_other_networks: 'View other networks',
+        },
+        blocks: {
+            block_height: 'Block Height',
+            timestamp: 'Timestamp',
+            size: 'Size',
+            gas_used: 'Gas Used',
+            gas_limit: 'Gas Limit',
+            hash: 'Hash',
+            parent_hash: 'Parent Hash',
+            nonce: 'Nonce',
+            extra_data: 'Extra Data',
+            extra_data_tooltip: 'The extra data field is 32 bytes long and can be used for special purposes',
+            block_height_tooltip: 'Also called "Block Number". The block height represents the length of of the blockchain, increasing by one after the addition of a new block',
+            timestamp_tooltip: 'The time and date the block was produced',
+            transactions_tooltip: 'The number of transactions in the block. Internal Transactions are transactions which occur as a result of contract execution and include a TLOS value',
+            size_tooltip: 'the amount of data in the block, determined by the gas limit',
+            gas_used_tooltip: 'The amount of gas used in the block',
+            gas_limit_tooltip: 'The gas limit for all transactions in the block',
+            nonce_tooltip: 'The value used during mining to achieve consensus on Proof of Work for the block',
+            hash_tooltip: 'The hash of the block header',
+            parent_hash_tooltip: 'The hash of the parent block',
+            count_transactions: '{count} transactions',
+            count_transaction: '1 transaction',
+            in_this_block: 'in this block',
+            transactions: 'Transactions',
+            transactions_root: 'Transactions Root',
+            block: 'Block',
+            age: 'Age',
+        },
+        footer: {
+            telos: 'Telos',
+            telos_homepage: 'Telos Homepage',
+            telos_wallet: 'Telos Wallet',
+            telos_bridge: 'Telos Bridge',
+            telos_zero_explorer: 'Telos Zero Explorer',
+            buy_telos: 'Buy Telos',
+            stake_telos: 'Stake Telos',
+            telos_ecosystem: 'Telos Ecosystem',
+            network_status: 'Network Status',
+            about: 'About',
+            about_us: 'About Us',
+            contactUs: 'Contact Us',
+            build: 'Build',
+            api_documentation: 'API Documentation',
+            telos_documentation: 'Telos Documentation',
+            github: 'Github',
+            brand_assets: 'Brand Assets',
+            back_to_top: 'Back to top',
         },
-    },
-    evm_wallet: {
-        send_icon_alt: 'Send icon',
-        receive_icon_alt: 'Receive icon',
-        buy_icon_alt: 'Buy more tokens icon',
-        token_logo_alt: 'Token logo',
-        send: 'Send',
-        receive: 'Receive',
-        scan_qr: 'Scan the QR Code to get your account',
-        buy: 'Buy',
-        unwrap: 'Unwrap',
-        wrap: 'Wrap',
-        stake: 'Stake',
-        unstake: 'Unstake',
-        copy: 'Copy',
-        link_to_send_aria: 'Link to Send page',
-        link_to_receive_aria: 'Link to Receive page',
-        link_to_buy_aria: 'External link to buy tokens',
-        balance_row_actions_aria: 'Balance row actions',
-        no_fiat_value: 'No reliable fiat value found',
-        receiving_account: 'Receiving Account',
-        account_required: 'Account is required',
-        token: 'Token',
-        cancel: 'Cancel',
-        estimated_fees: 'Estimated Fees',
-        amount_available: '{amount} Available',
-        amount_required: 'Amount is required',
-        view_contract: 'View Contract',
-        invalid_form: 'There is at least one invalid field.',
-        general_error: 'There was an error processing your request',
-        invalid_amount_precision: 'You can only enter {precision} decimal places',
-        sent: 'Sent',
-        received: 'Received',
-        swapped: 'Swapped',
-        switch: 'Switch',
-        failed_contract_interaction: 'Failed contract interaction',
-        contract_interaction: 'Contract interaction',
-        contract_creation: 'Contract creation',
-        aria_link_to_address: 'Link to block explorer address page',
-        aria_link_to_transaction: 'Link to block explorer transaction page',
-        click_to_fill_max: 'Click to fill max amount',
-        amount_exceeds_available_balance: 'Balance too low',
-        incorrect_network: 'Incorrect network detected! Switch to {networkName} to complete transaction',
-        viewing_n_transactions: 'Viewing {rowsPerPage} of {totalRows} transactions',
-        no_transactions_found: 'No transactions found',
-        add_to_metamask: 'Add to MetaMask',
-        rejected_metamask_prompt: 'The MetaMask prompt was rejected',
-        error_adding_token_to_metamask: 'Error adding token to MetaMask',
-        inventory: 'Collectibles',
     },
     global: {
+        all: 'all',
+        true: 'true',
+        false: 'false',
+        close: 'Close',
+        toggle_fullscreen: 'Toggle fullscreen mode',
+        name: 'Name',
+        symbol: 'Symbol',
+        show_table: 'Show table',
+        show_grid: 'Show grid',
+        records_per_page: 'Records per page:',
+        max_decimals_reached: 'Please use { max } decimal places maximum',
+        erc20_token: 'ERC20 Token',
+        erc721_token: 'ERC721 Token',
+        sign: 'Sign',
+        hours: 'hour(s)',
+        updated: 'Last updated',
+        action: 'Action',
+        wallet_response: 'Awaiting response from your wallet provider',
+        minutes: 'minute(s)',
+        days: 'day(s)',
+        and: 'and',
+        unknown: 'Unknown',
+        data_behind_by: 'Sorry ! The data shown is behind by',
+        not_synced: 'Indexer is not synced to latest block',
+        try_reloading: 'You can try reloading the page to fix it, if the problem persist please contact a Telos team member.',
+        error: 'Error',
+        expand: 'See more ({more})',
+        async_error_description: 'Sorry ! An error occured trying to request resources. Please make sure your internet connection is working and try again. If the error persists, contact us directly on our Telegram channel.',
         language: 'Language',
         cancel: 'Cancel',
         ok: 'Ok',
         dismiss: 'Dismiss',
+        empty_block: 'Block is empty',
+        empty_block_description: 'This block has no transactions. Try navigating to a different block',
         internal_error: 'Internal Error',
     },
     layouts: {
@@ -429,16 +549,12 @@ export default {
         error_see_details_label: 'See Details',
         error_details_title: 'Error Details',
         neutral_message_sending: 'Sending <b>{quantity}</b> to <b>{address}</b>',
-        neutral_message_staking: 'Staking <b>{quantity} {symbol}</b>',
-        neutral_message_unstaking: 'Unstaking <b>{quantity} {symbol}</b>',
         neutral_message_revoking: 'Revoking  <b>{symbol}</b> allowance for <b>{address}</b>',
         neutral_message_wrapping: 'Wrapping <b>{quantity} {symbol}</b>',
         neutral_message_unwrapping: 'Unwrapping <b>{quantity} {symbol}</b>',
         neutral_message_withdrawing: 'Withdrawing <b>{quantity} {symbol}</b>',
         dont_show_message_again: 'Don\'t show me this message again',
         error_message_sending: 'An error occurred while sending <b>{quantity}</b> to <b>{address}</b>',
-        error_message_staking: 'An error occurred while staking <b>{quantity} {symbol}</b>',
-        error_message_unstaking: 'An error occurred while unstaking <b>{quantity} {symbol}</b>',
         error_message_revoking: 'An error occurred while revoking <b>{symbol}</b> allowance for <b>{address}</b>',
         error_message_wrapping: 'An error occurred while wrapping <b>{quantity} {symbol}</b>',
         error_message_unwrapping: 'An error occurred while unwrapping <b>{quantity} {symbol}</b>',
@@ -483,8 +599,6 @@ export default {
             error_unwrap_not_supported_on_native: 'Unwrap is not supported on native chain',
             error_wrap_failed: 'An unknown error occurred when wrapping tokens',
             error_unwrap_failed: 'An unknown error occurred when unwrapping tokens',
-            error_stake_failed: 'An unknown error occurred when staking tokens',
-            error_unstakes_failed: 'An unknown error occurred when unstaking tokens',
             error_withdraw_failed: 'An unknown error occurred when withdrawing tokens',
             error_fetching_token_price: 'An unknown error occurred when fetching token price data',
         },
@@ -526,16 +640,16 @@ export default {
             error_wrap: 'An unknown error occurred while wrapping system token',
         },
         words: {
+            day: 'day',
             days: 'days',
+            hour: 'hour',
             hours: 'hours',
+            minute: 'minute',
             minutes: 'minutes',
+            second: 'second',
             seconds: 'seconds',
+            time_ago: '{time} ago',
         },
     },
-    temporal: {
-        telos_cloud_discontinued_title: 'Important',
-        telos_cloud_discontinued_message_title: 'Attention Users: Telos Cloud Wallet account option will be discontinued.',
-        telos_cloud_discontinued_message_body:'The Telos Cloud Wallet (ORE ID via Google) account option to connect and sign transactions will be discontinued after December 31st. If you use the Telos Cloud Wallet to access your account, please transfer your assets to another wallet before this deadline. <strong> This change does <i>not</i> impact users accessing their accounts via Metamask, WalletConnect, Anchor, or other sign-in methods.</strong>',
-    },
 };
 
diff --git a/src/i18n/es-es/index.js b/src/i18n/es-es/index.js
index d28d642ec..7203dc9d5 100644
--- a/src/i18n/es-es/index.js
+++ b/src/i18n/es-es/index.js
@@ -1,120 +1,68 @@
-/* eslint-disable max-len */
-
 export default {
     locale: {
         current_language_name: 'Español',
     },
     pages: {
-        staking: {
-            note_unstaking_period: 'Tenga en cuenta que hay un período de recuperación de { period }',
-            claim_tlos: 'Retirar TLOS',
-            add_stlos_to_metamask: 'Iniciar el cuadro de diálogo MetaMask para agregar sTLOS',
-            metamask_fox_logo: 'Logotipo de la zorra de MetaMask',
-            stake_tlos_confirm: 'continuar significa bloquer TLOS a cambio de sTLOS. ' +
-            'sTLOS se puede canjear por TLOS en cualquier momento usando la pestaña Desbloquear.',
-            cancel: 'Cancelar',
-            stake_tlos_confirm_2a: 'Después de que se canjéen los TLOS, éstos estarán bloqueados durante un período de', /* unstakePeriodPretty...*/
-            stake_tlos_confirm_2b: /*...unstakePeriodPretty */ 'después de lo cual se puede retirar a su cuenta desde la pestaña Retirar.',
-            stake_tlos_confirm_3: '¿Le gustaría proceder?',
-            stake_tlos: 'Bloquar TLOS',
-            stake_tlos_subheader: 'Su bloqueo de TLOS a sTLOS le otorga acceso a una renta constante y varias aplicaciones DeFi, ' +
-            'aumentando aún más la rentabilidad. A medida que aumenta la cantidad de recompensas, la tasa de conversión de TLOS a sTLOS cambiará ' +
-            'con el tiempo. Por lo tanto, la cantidad de sTLOS recibida es menor que la cantidad de TLOS bloqueada. Las recompensas se ' +
-            'auto-compensarán. No se requiere ninguna acción adicional.',
-            receive_stlos: 'Recibir sTLOS',
-            available: '{balanceTlos} Disponible',
-            insufficient_tlos_balance: 'Saldo de TLOS insuficiente para apostar',
-            login_using_an_evm_wallet: 'Iniciar sesión usando una billetera EVM',
-            wallet_not_connected: 'Billetera no conectada',
-            click_to_input_full_wallet_balance: 'Haga clic para ingresar el saldo completo de la billetera\n\n' +
-            'El saldo mostrado se reduce en 1 TLOS para mantener su cuenta operativa.\n' +
-            'Saldo preciso (menos las tarifas de gas aproximadas):\n' +
-            '{prettyBalance} TLOS',
-            loading: 'Cargando...',
-            get_more_tlos: 'Obtener más TLOS',
-            connect_wallet: 'Conectar billetera',
-            minutes: 'minutos',
-            hours: 'horas',
-            days: 'días',
-            unstake: 'Desbloquear',
-            stake: 'Bloquear',
-            withdraw: 'Retirar',
-            telos_evm_staking: 'Bloqueo de TLOS en EVM',
-            stake_tlos_earn_interest: 'Bloquear TLOS para obtener sTLOS y ganar intereses de la recompensa de bloqueo',
-            staked: 'Bloqueado',
-            unstaked: 'Desbloqueado',
-            tooltip_1: 'APY: Tasa Anual Efectiva (APY en Inglés)\n\nLa tasa de retorno anual después de tomar en cuenta el interés compuesto.\n\n' +
-            'El interés se compone aproximadamente cada 30 minutos. La tasa porcentual no es fija, lo que significa que ' +
-            'cambiará con el tiempo con la cantidad total de TLOS bloqueados en Telos EVM y Telos nativo. ' +
-            'Las recompensas se pagan desde un fondo de recompensas de la comunidad al contrato de sTLOS.',
-            tooltip_2: 'TVL: Valor Total Bloqueado (TVL en Inglés)\n\nEl valor actual, en TLOS, de todos los activos en el contrato inteligente de sTLOS ' +
-            '(TLOS bloqueado), es decir, la suma de todos los TLOS bloqueados en Telos EVM en este momento.',
-            tooltip_3: 'Bloqueado\n\n' +
-            'La cantidad total bloqueada asociada con la cuenta iniciada, es decir, ' +
-            'su saldo de sTLOS, junto con su valor en TLOS',
-            tooltip_4: 'Desbloqueado\n\n' +
-            'El valor total de TLOS que ha desbloqueado, tanto bloqueado como desbloqueado.\n\n' +
-            'Cuando desbloquea\u2014es decir, canjea\u2014algun valor de sTLOS, la cantidad equivalente de ' +
-            'TLOS se envía en garantía ("bloqueado") por {unlockPeriod}; durante este tiempo, ' +
-            'no puede interactuar con este TLOS.\n\n' +
-            'Después de que transcurra el período de desbloqueo, puede retirar su TLOS desbloqueados desde la pestaña Retirar ' +
-            'en esta página, momento en el que se agregará a su saldo de TLOS de su cuenta.',
-            confirm_unstake_1a: 'Continuará canjeando sTLOS a cambio de TLOS. ' +
-            'El TLOS desbloqueado permanecerá bloqueado por un período de', /* unstakePeriodPretty...*/
-            confirm_unstake_1b: /*...unstakePeriodPretty */ 'después del cual se puede retirar a su cuenta desde la pestaña Retirar',
-            confirm_unstake_2a: 'Tenga en cuenta, que sólo puede desbloquear ', /* remainingDeposits...*/
-            confirm_unstake_2b: /*...remainingDeposits */ 'veces más antes ' +
-            'de alcanzar el máximo de acciones de desbloqueo concurrentes. Cuando llegue al máximo, deberá retirar ' +
-            'los TLOS desbloqueados para continuar desbloqueando más sTLOS. Si no tiene ningún TLOS desbloqueado en ese momento, debe ' +
-            'espear hasta que transcurra el período de bloqueo antes de que pueda retirar los TLOS canjeados y pueda desbloquear más sTLOS. -',
-            unstake_stlos_for_tlos: 'Desbloquear sTLOS a cambio de TLOS',
-            unstake_stlos: 'Desbloquear sTLOS',
-            receive_tlos: 'Recibir TLOS',
-            amount: 'Cantidad',
-            time_remaining: 'Tiempo restante',
-            full_staked_balance_tooltip: 'Haga clic para ingresar el saldo total bloqueado\n\n' +
-            'Saldo preciso (menos las tarifas de gas aproximadas):\n' +
-            '{prettyBalance} sTLOS',
-            login_using_evm_wallet: 'Inicie sesión usando una billetera EVM',
-            max_unstake_transactions_reached: 'Ha alcanzado el número máximo de transacciones de desbloqueo pendientes, ' +
-            'por favor retire los TLOS disponibles o espere a que los TLOS desbloqueados pendientes se conviertan en retirables antes de realizar otro depósito.',
-            click_to_change_time_format: 'Haga clic para cambiar el formato de tiempo',
-            unstaking: 'Desbloqueando',
-            available_to_withdraw: 'Disponible para retirar',
-            withdraw_tlos: 'Retirar TLOS',
-            withdraw_successful: 'Retiro exitoso! Ver transacción:',
-            no_withdrawable_positions: 'No hay posiciones disponibles para retirar',
-            you_have_unlocked_tlos: '¡Ha desbloqueado TLOS!',
-            stake_tlos_success: '¡Bloqueo exitoso! Ver transacción:',
-            unstake_stlos_success: '¡Desbloqueo exitoso! Ver transacción:',
-            deposit_failed: 'Error al depositar TLOS: { message }',
-            redeem_failed: 'No se puede convertir sTLOS a TLOS: { message }',
-            fetch_balance_error: 'Error al buscar cuenta: { message }',
-            fetch_stlos_balance_error: 'Error al buscar el saldo de sTLOS de la cuenta: { message }',
-            fetch_stlos_value_error: 'Error al buscar el valor del saldo de sTLOS de la cuenta: { message }',
-            fetch_unstaked_balance_error: 'Error al buscar el saldo total de TLOS no bloqueado: { message }',
-            fetch_unlocked_balance_error: 'Error al buscar el saldo de sTLOS desbloqueado: { message }',
-            fetch_escrow_deposits_error: 'Error al buscar depósitos de custodia: { message }',
-            fetch_conversion_rate_error: 'Error al buscar la tasa de conversión TLOS->sTLOS: { message }',
-            fetch_stlos_contract_error: 'Error al obtener el contrato sTLOS: { message }',
-            fetch_escrow_contract_error: 'Error al obtener el contrato sTLOS: { message }',
-            fetch_unstake_period_error: 'Error al recuperar el período de desbloqueo: { message }',
-            fetch_account_error: 'Error al buscar cuenta: { message }',
-            fetch_stlos_tvl_error: 'Error al buscar el TVL de sTLOS: { message }',
-            fetch_stlos_apy_error: 'Error al buscar el APY de sTLOS: { message }',
-            fetch_max_deposits_error: 'Error al buscar depósitos máximos del contrato de custodia { message }',
-            convert_tlos_to_stlos_error: 'No se puede convertir TLOS a sTLOS { message }',
-            convert_stlos_to_tlos_error: 'No se puede convertir sTLOS a TLOS { message }',
-            unstake_stlos_error: 'Error al desbloquear sTLOS { message }',
-            withdraw_failed: 'Error al retirar TLOS desbloqueado: { message }',
+        blockpage: {
+            block: 'Bloque',
+            overview: 'Visión General',
+            transactions: 'Transacciones',
+        },
+        transactions: {
+            contract_deployment: 'Despliegue de contrato',
+            deposit_action_name: 'Depósito',
+            deposit_native: 'Depósito (nativo)',
+            five_hundred_k_disclaimer: 'Mostrando los últimos 500 mil registros de { total }',
+            for_block: 'para el bloque',
+            for: 'para',
+            gas_info_label: 'Información de gas',
+            native_deposit_tooltip: 'Depósito desde Telos nativo',
+            native_withdraw_tooltip: 'Retirar a Telos nativo',
+            nonce_label: 'Nonce',
+            see_more_details: 'Ver más detalles',
+            see_tx_preview_tooltip: 'Ver vista previa de los detalles de la transacción',
+            status_label: 'Estado',
+            to: 'a',
+            transaction_action_label: 'Acción de transacción',
+            transaction_fee_label: 'Tarifa de transacción',
+            transactions: 'Transacciones',
+            transfer_for_x_tlos_from: 'Transferencia de { amount } TLOS desde',
+            transfer_tlos_action_name: 'Transferir TLOS',
+            withdraw_action_name: 'Retirar',
+            withdraw_native: 'Retirar (nativo)',
+            x_gas_used_of_y_limit: '{ amount } gas utilizado de un límite de { limit }',
+        },
+        transaction: {
+            page_title: 'Detalles de la Transacción',
+            overview: 'Resumen',
+            logs: 'Registros',
+            internal: 'Transacciones Internas',
+            not_found: 'Transacción no encontrada',
         },
+        home: {
+            telos_evm_explorer: 'El Explorador Telos EVM',
+            market_cap: 'Capitalización de mercado',
+            last_finalized_block: 'Último bloque finalizado',
+            total_transactions: 'Transacciones totales',
+        },
+        error: {
+            title: 'Página no encontrada.',
+            subtitle: 'Por favor, revise nuevamente la URL. Si parece correcta, intente de nuevo más tarde.',
+        },
+        issuer: 'Issuer',
+        account_not_found: 'No pudimos encontrar esta cuenta',
+        approvals: 'Aprobaciones',
+        supported_interfaces: 'Interfaces compatibles',
         explore_transactions: 'Explorar transacciones',
         recent_transactions: 'Transacciones recientes',
-        telos_evm_explorer: 'Explorador Telos EVM',
         rpc_endpoints: 'Puntos de entrada RPC',
         monitor: 'Monitor',
-        oops: 'Ups. Nada por aquí...',
         go_home: 'Ir a inicio',
+        minted: 'Acuñado',
+        holders: 'Titulares',
+        evm_holders: 'Todos los titulares de EVM de Telos',
+        total_nfts_minted: 'Total de NFTs creados en esta colección',
+        telos_supply: 'Suministro Telos EVM ',
         select_sol_file: 'Seleccione el archivo de contrato .sol para cargar',
         select_json_file: 'Seleccione el archivo de objeto de entrada JSON estándar para cargar',
         paste_contract_contents: 'debe seleccionar un archivo para cargar o alternar la entrada para pegar el contenido del contrato',
@@ -137,12 +85,17 @@ export default {
         verify_contract: 'Verificar contrato',
         reset: 'Reiniciar',
         gas_used: 'Gas usado',
-        transactions: 'Transacciones',
         account: 'Cuenta',
         contract: 'Contrato',
+        transfers_title: 'Transferencias { type }',
+        loading_transfers: 'Cargando transferencias',
+        loading_approvals: 'Cargando aprobaciones de permisos',
         erc20_transfers: 'Transferencias ERC20',
+        erc20_transfers_tooltip: 'Lista de transferencias de tokens ERC20 en esta transacción',
         erc721_transfers: 'Transferencias ERC721',
+        erc721_transfers_tooltip: 'Lista de transferencias de tokens ERC721 en esta transacción',
         erc1155_transfers: 'Transferencias ERC1155',
+        erc1155_transfers_tooltip: 'Lista de transferencias de tokens ERC1155 en esta transacción',
         tokens: 'Tokens',
         created_at_trx: 'Creada en la Trx',
         by_address: 'Por la dirección',
@@ -182,8 +135,72 @@ export default {
         input: 'Entrada',
         output: 'Salida',
         value: 'Valor',
+        overview: 'visión general',
+        more_info: 'más información',
+        transaction_sent: 'txn enviado',
+        first: 'primero',
+        last: 'último',
+        contract_creator: 'creador del contrato',
     },
     components: {
+        approvals: {
+            token_id: 'Token ID',
+            approved: 'Aprobado',
+            login_account: 'Inicie sesión en esta cuenta usando su billetera para poder ver sus aprobaciones.',
+            approval_text: 'Se necesita una firma de su billetera para actualizar el monto de las aprobaciones seleccionadas a 0.',
+            type: 'Tipo',
+            delete: 'Borrar',
+            delete_all: 'Eliminar todos',
+            unselect_all: 'Deselecciona todo',
+            cancel: 'Anular',
+            remove_approval: 'Bórralo',
+            removal_approval: 'Eliminar aprobación única',
+            unselect_all_approvals: 'Deseleccionar todas las aprobaciones',
+            infinite: 'Infinita',
+            infinite_tooltip: 'El límite de la aprobación (del permiso) es mayor que la cantidad total de este token',
+            select: 'Seleccionar aprobación',
+            unselect: 'Deseleccionar aprobación',
+            update: 'Actualización de aprobación',
+            update_description: 'Ingrese la nueva cantidad para permitir al gastador. Esto requerirá una firma de billetera.',
+            removal_approvals: 'Eliminar todas las aprobaciones',
+            removal_selected_approvals: 'Eliminar todas las aprobaciones seleccionadas',
+            update_failed: 'Error al actualizar la aprobación',
+            update_success: 'La aprobación del permiso a {spender} para el contrato {contract} se actualizó con éxito',
+            spender: 'Gastador',
+            amount: 'Cantidad',
+        },
+        nfts : {
+            show_without_metadata: 'Mostrar Items sin metadatos',
+            id: 'Token ID',
+            name: 'Nombre',
+            collection: 'Recopilación',
+            nfts: 'NFTs',
+            metadata: 'Meta',
+            minter: 'Minter',
+            owner: 'Dueño',
+            contract: 'Contrato',
+            image: 'Imagen',
+            media: 'Media',
+            minted: 'Bloque acuñado',
+            attributes: 'atributo',
+            ipfs: 'Obtener de IPFS',
+            consult_metadata: 'Consultar metadatos',
+            consult_media: 'Consultar media',
+            consult_collection: 'Consultar recopilación',
+        },
+        holders : {
+            show_system_contracts: 'Mostrar contratos del sistema',
+            holder: 'Poseedor',
+            balance: 'Balance',
+            global_supply: 'Suministro mundial',
+            telos_supply: 'Suministro Telos EVM',
+            updated: 'Ultima actualización',
+        },
+        gas_limit_tooltip: 'La cantidad máxima de gas que se puede gastar en esta transacción',
+        gas_used_tooltip: 'La cantidad de gas que se gastó en esta transacción',
+        known_tokens: 'Token conocida',
+        other_tokens: 'Token desconocida',
+        no_balances_found: 'No se encontraron saldos de tokens erc20 para esta cuenta',
         internal_txns: 'Transacciones internas',
         n_internal_txns: '{ amount } transacciones internas',
         none: 'Ninguno',
@@ -206,23 +223,35 @@ export default {
         text3_or_to_recover_assets: 'o para recuperar activos enviados a una dirección vinculada nativa',
         copy_to_clipboard: 'Copiar { text } al portapapeles',
         latest_block: 'Último bloque',
+        price_sources: 'Data obtained from Coingecko, CoinMarketCap or if unavailable from decentralized exchanges on Telos EVM',
+        marketcap_sources: 'Data obtained from Coingecko or CoinMarketCap',
+        usd_marketcap: 'Capitalización de mercado USD',
+        usd_price: 'Precio USD',
+        usd_value: 'USD Value',
         tlos_price: 'Precio TLOS',
         gas_price: 'Precio del gas',
-        click_to_expand: 'Haga clic para expandir la firma de la función',
+        click_to_expand: 'Haga clic para expandir',
+        click_to_fold: 'Haga clic para doblar',
+        expand_all: 'Expandir todo',
+        collapse_all: 'Contraer todo',
         search_evm_failed: 'La búsqueda de la dirección EVM vinculada a la cuenta nativa { search_term } falló.',
         search_failed: 'La búsqueda falló, ingrese un término de búsqueda válido.',
         add_to_metamask: 'Agregar { symbol } a MetaMask',
-        tx_hash: 'Tx Hash',
+        tx_hash: 'Hash de Txn',
         block: 'Bloque',
-        date: 'Fecha',
+        date: 'Date Time (UTC)',
+        age: 'Age',
         method: 'Método',
-        to_interacted_with: 'A / Interactuado con',
-        value_transfer: 'Valor / Transferencia',
+        to_interacted_with: 'A',
         value: 'Valor',
+        txn_fee: 'Txn Fee',
+        txn_failed: 'Txn Fallida',
+        gas: 'Gas Price',
+        gas_price_tlos: '(Gas Price * Gas Used) in TLOS',
+        gas_price_gwei: 'Gas Price in gwei',
         token: 'Token',
         unknown_precision: 'Precisión desconocida',
         click_to_change_format: 'Haga clic para cambiar el formato',
-        func_exed_based_on_dec_data: 'Función ejecutada en función de los datos decodificados',
         balance: 'Balance',
         error_fetching_balance: 'error al recuperar el saldo',
         launch_metamask_dialog_to_add: 'Lanzar diálogo MetaMask para agregar { symbol }',
@@ -231,8 +260,9 @@ export default {
         copied: 'Copiado',
         copy_to_clipboard_failed: 'Error al copiar al portapapeles',
         gwei: 'Gwei',
+        failed_to_fetch_transactions: 'Failed to fetch transactions.',
         failed_to_parse_transaction: 'No se pudo analizar los datos de la transacción, el error fue: { message }',
-        executed_based_on_decoded_data: 'Función ejecutada en función de los datos decodificados. Para la función no identificada, se muestra el ID de método en su lugar.',
+        executed_based_on_decoded_data: 'Name of the function executed based. For unidentified functions, method ID is displayed instead.',
         unsupported_token_type: 'Tipo de token no compatible: { tokenType }',
         token_id: 'Id #{ tokenId }',
         success: 'Éxito',
@@ -240,23 +270,55 @@ export default {
         from: 'De',
         to: 'A',
         transaction: {
-            form_from: 'De : ',
-            form_to: 'A : ',
-            form_token: 'Token : ',
-            consult_collection: 'Consultar colección',
-            consult_metadata: 'Consultar metadatos',
-            consult_media: 'Consultar medios',
+            in: 'entra',
+            out: 'sale',
+            load_error: 'No se pudieron cargar las transacciones',
+            show_short: 'Mostrar corta',
             show_total: 'Mostrar total',
             show_wei: 'Mostrar wei',
             value_uint256: 'Valor (uint256) : ',
             tlos_transfer: 'Transferencia TLOS',
+            native_deposit: 'Depósito de Native Telos',
+            native_withdraw: 'Retirarse a Telos Nativo',
             unknown: 'Desconocido',
+            contract_deployed: 'Contrato Desplegado',
             contract_deployment: 'Despliegue de contrato',
             no_internal_trxs_found: 'No se encontraron transacciones internas',
             human_readable: 'Lectura humana',
             no_logs_found: 'No se encontraron registros',
             verify_related_contract: 'Verifique el contrato relacionado para cada registro para ver su versión legible por humanos',
             failed_to_retrieve_contract: 'No se pudo recuperar el contrato con la dirección { address }',
+            trx_hash: 'Hash de la Transacción',
+            trx_hash_tooltip: 'El identificador único de la transacción.',
+            block: 'Bloque',
+            block_tooltip: 'El número de bloque en el que esta transacción fue incluida.',
+            status: 'Estado',
+            status_tooltip: 'Indica si la transacción fue exitosa, fallida o está pendiente',
+            timestamp: 'Marca de Tiempo',
+            timestamp_tooltip: 'La fecha y hora en que la transacción fue confirmada.',
+            trx_action: 'Acción de la Transacción',
+            trx_action_tooltip: 'La operación realizada por esta transacción, como una transferencia o ejecución de contrato.',
+            from: 'Desde',
+            from_tooltip: 'La dirección que inicia la transacción.',
+            to: 'Hacia',
+            to_tooltip: 'La dirección receptora de la transacción.',
+            value: 'Valor',
+            value_tooltip: 'La cantidad de criptomoneda transferida en esta transacción.',
+            gas_fee: 'Tarifa de la Transacción',
+            gas_fee_tooltip: 'La tarifa total pagada por esta transacción, en TLOS y USD.',
+            gas_price: 'Precio del Gas',
+            gas_price_tooltip: 'El precio por unidad de gas pagado por la transacción.',
+            more_details: 'Más Detalles',
+            show_more_details: 'clic para mostrar más',
+            show_less_details: 'clic para mostrar menos',
+            gas_limit_n_usage: 'Límite de Gas & Uso por Txn',
+            gas_limit_n_usage_tooltip: 'La cantidad máxima de gas que se permitió para la transacción y la cantidad real de gas utilizada.',
+            nonce: 'Nonce',
+            nonce_tooltip: 'Un número secuencial vinculado a cada transacción hecha por la misma dirección, asegurando que las transacciones se procesen en orden.',
+            position_in_block: 'Posición en Bloque',
+            position_in_block_tooltip: 'La posición de esta transacción en el bloque.',
+            input: 'Entrada',
+            input_tooltip: 'Datos enviados junto con la transacción, típicamente usados para interacciones con contratos.',
         },
         inputs: {
             incorrect_address_array_length: 'Debe haber { size } direcciones en la matriz',
@@ -298,16 +360,23 @@ export default {
             checked_at: 'Verificado en',
             task: 'Tarea',
             message: 'Mensaje',
+            category: 'Category',
             block_height: 'Altura del bloque',
             latency: 'Latencia',
+            success: 'Success',
+            info: 'Info',
+            alert: 'Alert',
+            error: 'Error',
             click_to_change_format: 'Haga clic para cambiar el formato',
         },
         contract_tab: {
+            abi_loaded_from_interface: 'Esta ABI genérica se cargó utilizando supportsInterface() de IEP-165 y puede no ser exhaustiva. Algunas de las funciones mostradas podrían no estar implementadas. Verifica el contrato para poder interactuar con él utilizando su ABI completo.',
             copy_abi_to_clipboard: 'Copiar el JSON del ABI del contrato al portapapeles',
             enter_amount: 'Seleccione el número de decimales y escriba una cantidad, esto se ingresará para usted en el parámetro de función como uint256',
             result: 'Resultado',
             view_transaction: 'Ver transacción',
             code: 'Código',
+            bytecode: 'Código de bytes',
             read: 'Leer',
             write: 'Escribir',
             amount: 'Cantidad',
@@ -316,8 +385,9 @@ export default {
             custom: 'Personalizado',
             unverified_contract_source: 'El código fuente de este contrato no ha sido verificado.',
             click_here: 'Haga clic aquí',
-            upload_source_files: 'para cargar archivos de código fuente y verificar este contrato. ' +
-                'Alternativamente, puede interactuar con el contrato usando un ABI arbitrario:',
+            upload_source_files: 'para cargar archivos de código fuente y verificar este contrato. ',
+            abi_autoloaded: 'Mientras tanto, puedes interactuar con el contrato utilizando nuestra ABI preestablecida cargada automáticamente.',
+            choose_abi: 'Alternativamente, puedes interactuar con el contrato usando una de nuestras ABIs preestablecidas o una personalizada en JSON:',
             use_erc20_abi: 'Usar ABI ERC20',
             use_erc721_abi: 'Usar ABI ERC721',
             use_erc1155_abi: 'Usar ABI ERC1155',
@@ -329,31 +399,118 @@ export default {
             read_functions: 'Funciones de lectura',
             write_functions: 'Funciones de escritura',
             unverified_contract: 'Contrato no verificado',
+            verified_contract: 'Contrato verificado',
         },
         header: {
-            sign_in: 'Iniciar sesión',
-            sign_out: 'Cerrar sesión',
-            liq_staking: 'Bloqueado líquido',
-            goto_staking: 'Ir a Bloqueado',
-            goto_health_monitor: 'ir a la página de monitoreo de salud',
-            goto_mainnet: 'Ir a Mainnet',
-            goto_testnet: 'Ir a Testnet',
-            health_monitor: 'Monitoreo de salud',
-            health_status: 'Estado de la salud',
-            advanced: 'Avanzado',
-            light_mode: 'Modo claro',
-            dark_mode: 'Modo oscuro',
+            address_copied: 'Dirección copiada al portapapeles',
             address_not_found: 'La búsqueda de la dirección EVM vinculada a la cuenta nativa { account } falló.',
-            search_failed: 'La búsqueda falló, ingrese un término de búsqueda válido.',
-            goto_address_details: 'Ir a los detalles de la dirección',
+            api_documentation: 'Documentación de la API',
+            blockchain: 'Blockchain',
+            blocks: 'Bloques',
+            connect_wallet: 'Conectar Cartera',
             copy_address: 'Copiar dirección',
-            address_copied: 'Dirección copiada al portapapeles',
-            search_placeholder: 'Dirección, Tx, Bloque',
-            select_language: 'Seleccionar idioma',
+            csv_export: 'Exportar CSV',
+            developers: 'Desarrolladores',
+            disconnect_wallet_tooltip: 'Desconectar cartera',
+            gas: 'Gas',
+            goto_address_details: 'Ir a los detalles de la dirección',
+            health_monitor: 'Monitoreo de salud',
+            home: 'Inicio',
+            more: 'Más',
+            network: 'Red',
             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',
+            select_language: 'Seleccionar idioma',
+            switch_to_dark_theme: 'Cambiar a tema oscuro',
+            switch_to_light_theme: 'Cambiar a tema claro',
+            system_token_price: 'Precio de {token}',
+            telos_ecosystem: 'Ecosistema Telos',
+            telos_evm_logo_alt: 'Logotipo de Telos EVM',
+            telos_wallet: 'Wallet',
+            telos_bridge: 'Bridge',
+            transactions: 'Transacciones',
+            verify_contract_sourcify: 'Verificar Contrato (Sourcify)',
+            view_other_networks: 'Ver otras redes',
+        },
+        blocks: {
+            block_height: 'Altura del Bloque',
+            timestamp: 'Marca de Tiempo',
+            size: 'Tamaño',
+            gas_used: 'Gas Utilizado',
+            gas_limit: 'Límite de Gas',
+            hash: 'Hash',
+            parent_hash: 'Hash Padre',
+            nonce: 'Nonce',
+            extra_data: 'Datos Extra',
+            extra_data_tooltip: 'Datos adicionales incluidos en el bloque',
+            block_height_tooltip: 'También llamado "Número de Bloque". La altura del bloque representa la longitud de la blockchain, incrementando en uno después de la adición de un nuevo bloque',
+            timestamp_tooltip: 'El momento y fecha en que el bloque fue producido',
+            transactions_tooltip: 'El número de transacciones en el bloque. Las transacciones internas son transacciones que ocurren como resultado de la ejecución de un contrato e incluyen un valor TLOS',
+            size_tooltip: 'la cantidad de datos en el bloque, determinada por el límite de gas',
+            gas_used_tooltip: 'La cantidad de gas utilizado en el bloque',
+            gas_limit_tooltip: 'El límite de gas para todas las transacciones en el bloque',
+            nonce_tooltip: 'El valor utilizado durante la minería para lograr un consenso sobre la Prueba de Trabajo para el bloque',
+            hash_tooltip: 'El hash del encabezado del bloque',
+            parent_hash_tooltip: 'El hash del bloque anterior',
+            count_transactions: '{count} transacciones',
+            count_transaction: '1 transacción',
+            in_this_block: 'en este bloque',
+            transactions: 'Transacciones',
+            transactions_root: 'Raíz de Transacciones',
+            block: 'Bloque',
+            age: 'Edad',
+        },
+        footer: {
+            telos: 'Telos',
+            telos_homepage: 'Página Principal',
+            telos_wallet: 'Telos Wallet',
+            telos_bridge: 'Telos Bridge',
+            telos_zero_explorer: 'Explorador Telos Zero',
+            buy_telos: 'Comprar Telos',
+            stake_telos: 'Depositar Telos',
+            telos_ecosystem: 'Ecosistema de Telos',
+            network_status: 'Estado de la Red',
+            about: 'Acerca de',
+            about_us: 'Acerca de Nosotros',
+            contactUs: 'Contáctanos',
+            build: 'Construir',
+            api_documentation: 'Documentación de API',
+            telos_documentation: 'Documentación de Telos',
+            github: 'Github',
+            brand_assets: 'Activos de Marca',
+            back_to_top: 'Volver arriba',
         },
     },
     global: {
+        all: 'Todo',
+        true: 'verdadero',
+        false: 'falso',
+        close: 'Cerrar',
+        toggle_fullscreen: 'Cambiar al modo de pantalla completa',
+        name: 'Nombre',
+        symbol: 'Símbolo',
+        show_table: 'Mostrar tabla',
+        show_grid: 'Mostrar cuadrícula',
+        records_per_page: 'Registros por página:',
+        expand: 'Ver más',
+        max_decimals_reached: 'Utilice { max } decimales como máximo',
+        erc20_token: 'ERC20 Token',
+        erc721_token: 'ERC721 Token',
+        sign: 'Firmar',
+        hours: 'horas',
+        updated: 'Ultima actualización',
+        action: 'Acción',
+        wallet_response: 'Esperando respuesta de tu proveedor de cartera',
+        minutes: 'minutos',
+        days: 'días',
+        and: 'y',
+        unknown: 'Desconocido',
+        data_behind_by: 'Lo siento ! Los datos mostrados están atrasados ​​por',
+        not_synced: 'El indexador no está sincronizado con el último bloque',
+        try_reloading: 'Puede intentar volver a cargar la página para solucionarlo, si el problema persiste, comuníquese con un miembro del equipo de Telos.',
+        error: 'Error',
+        async_error_description: '¡Lo sentimos! Ocurrió un error al intentar solicitar recursos. Por favor, asegúrate de que tu conexión a Internet esté funcionando y vuelve a intentarlo. Si el error persiste, contáctanos directamente en nuestro canal de Telegram.',
         language: 'Idioma',
         ok: 'Ok',
         cancel: 'Cancelar',
@@ -380,16 +537,12 @@ export default {
         error_see_details_label: 'Ver Detalles',
         error_details_title: 'Detalles del Error',
         neutral_message_sending: 'Enviando <b>{quantity}</b> a <b>{address}</b>',
-        neutral_message_staking: 'Depositando <b>{quantity} {symbol}</b>',
-        neutral_message_unstaking: 'Preparando retiro de <b>{quantity} {symbol}</b>',
         neutral_message_revoking: 'Revocando asignación de <b>{symbol}</b> para <b>{address}</b>',
         neutral_message_wrapping: 'Convirtiendo <b>{quantity} {symbol}</b> a ERC20',
         neutral_message_unwrapping: 'Restaurando <b>{quantity} {symbol}</b>',
         neutral_message_withdrawing: 'Retirando <b>{quantity} {symbol}</b>',
         dont_show_message_again: 'No volver a mostrar este mensaje',
         error_message_sending: 'Se produjo un error al enviar <b>{quantity}</b> a <b>{address}</b>',
-        error_message_staking: 'Se produjo un error al depositar <b>{quantity} {symbol}</b>',
-        error_message_unstaking: 'Se produjo un error al preparar retiro <b>{quantity} {symbol}</b>',
         error_message_revoking: 'Se produjo un error al revocar la asignación de <b>{symbol}</b> para <b>{address}</b>',
         error_message_wrapping: 'Se produjo un error al convertir <b>{quantity} {symbol}</b> a ERC20',
         error_message_unwrapping: 'Se produjo un error al restaurar <b>{quantity} {symbol}</b>',
@@ -404,6 +557,17 @@ export default {
             error_unpredictable_gas_limit: 'No se pudo estimar el límite de gas para esta transacción',
             error_transaction_canceled: 'Has cancelado la acción',
         },
+        words: {
+            day: 'día',
+            days: 'días',
+            hour: 'hora',
+            hours: 'horas',
+            minute: 'minuto',
+            minutes: 'minutos',
+            second: 'segundo',
+            seconds: 'segundos',
+            time_ago: 'Hace {time}',
+        },
     },
     temporal: {
         telos_cloud_discontinued_title: 'Importante',
diff --git a/src/i18n/fr-fr/index.js b/src/i18n/fr-fr/index.js
index 83c11f939..a9a0f66b0 100644
--- a/src/i18n/fr-fr/index.js
+++ b/src/i18n/fr-fr/index.js
@@ -1,120 +1,72 @@
-/* eslint-disable max-len*/
-
 export default {
     locale: {
         current_language_name: 'Français',
     },
     pages: {
-        staking: {
-            note_unstaking_period: 'Veuillez noter qu\'il y a une période d\'unstacking de {period}',
-            claim_tlos: 'Réclamer votre TLOS',
-            add_stlos_to_metamask: 'Ouvrez le dialogue MetaMask pour ajouter sTLOS',
-            metamask_fox_logo: 'MetaMask logo renard',
-            cancel: 'Annuler',
-            stake_tlos_confirm: 'En continuant vous miserez vos TLOS en échange de sTLOS. ' +
-                'Les sTLOS peuvent être converti en TLOS à tout moment à l\'aide de l\'onglet Unstake.',
-            stake_tlos_confirm_2a: 'Après que les TLOS sont unstake, ils seront vérouillés pour une période de', /* unstakePeriodPretty...*/
-            stake_tlos_confirm_2b: /*...unstakePeriodPretty */ ' après quoi ils seront retirable sur votre compte à partir de l\'onglet Retrait.',
-            stake_tlos_confirm_3: 'Voulez-vous continuer?',
-            stake_tlos: 'Staker vos TLOS',
-            stake_tlos_subheader: 'Staker vos TLOS contre des sTLOS vous permet d\'accèder à un revenu passif ainsi qu\'à diverses applications DeFi, ' +
-                'vous permettant d\'augmenter encore plus le rendement. Le taux de conversion de TLOS à sTLOS change au fur et à mesure que le bassin de récompense se rempli,  ' +
-                'c\'est pourquoi le montant de sTLOS reçu est moins important que le montant de Telos déposé. Les récompenses s\'accumulent ' +
-                'automatiquement et vous n\'avez donc pas besoin de les réclamer.',
-            receive_stlos: 'Recevez sTLOS',
-            available: '{balanceTlos} Disponible',
-            insufficient_tlos_balance: 'Solde de TLOS non suffisant pour stake',
-            login_using_an_evm_wallet: 'Connectez vous à l\'aide d\'un portefeuille EVM',
-            wallet_not_connected: 'Portefeuille non connecté',
-            click_to_input_full_wallet_balance: 'Cliquez pour choisir le solde entier de votre portefeuille\n\n' +
-                'Le solde montré est réduit de 1 TLOS afin de pouvoir régler les frais de gaz.\n' +
-                'Solde exact (moins les frais de gaz approximatifs):\n' +
-                '{prettyBalance} TLOS',
-            loading: 'Chargement...',
-            get_more_tlos: 'Obtenez plus de TLOS',
-            connect_wallet: 'Connectez votre portefeuille',
-            minutes: 'minutes',
-            hours: 'heures',
-            days: 'jours',
-            unstake: 'Unstaker',
-            stake: 'Staker',
-            withdraw: 'Retrait',
-            telos_evm_staking: 'Staking Telos EVM',
-            stake_tlos_earn_interest: 'Stakez votre TLOS contre des sTLOS pour gagner des interêts à partir du bassin de récompense',
-            staked: 'Staké',
-            unstaked: 'Unstaké',
-            tooltip_1: 'APY: Pourcentage annuel de rendement\n\n Ce pourcentage répresente les interêts gagnés sur un an et prend.\n\n' +
-                'Les interêts s\'accumulent automatiquement toute les 30 minutes (\'auto-compounding\'). Ce pourcentage n\'est pas fixe,' +
-                'ce qui veut dire qu\'il changera au fur et à mesure du temps suivant le total de TLOS stake à la fois sur l\'EVM et la chaîne native. ' +
-                'Les récompenses sont distribués à partir d\'un bassin de récompense communautaire directement dans le contract sTLOS.',
-            tooltip_2: 'TVL: Valeur Totale Vérouillé\n\nLa valeur actuelle, en TLOS, de tout les actifs déposés dans le contrat sTLOS ' +
-                '(Staked TLOS), c\'est à dire la somme de tout les TLOS stakés sur l\'EVM Telos à l\'instant T.',
-            tooltip_3: 'Staké\n\n' +
-                'Le montant total staké par le compte connecté, c\'est à dire ' +
-                ' votre solde de jetons sTLOS, ainsi que sa valeur en TLOS',
-            tooltip_4: 'Unstaké\n\n' +
-                'La valeur total de TLOS que vous avez unstaké, vérouillé ou non.\n\n' +
-                'Quand vous unstakez\u2014c\'est à dire récuperez\u2014 un montant de sTLOS, le montant équivalent de ' +
-                'TLOS est envoyé dans un contract de dépot fiduciare où il est verrouillé pour {unlockPeriod}; pendant cette période, ' +
-                'vous ne pourrez pas intéragir avec voc TLOS.\n\n' +
-                'Une fois la période de vérouillage finie, vous pourrez éffectuer un retrait de vos TLOS dévérouillés ' +
-                ' à partir de l\'onglet Retrait sur cette page, il sera alors ajouté au solde TLOS de votre compte.',
-            confirm_unstake_1a: 'Continuer va échanger vos sTLOS contre des TLOS. ' +
-                'Les TLOS unstaké vont rester vérouillé pour une période de', /* unstakePeriodPretty...*/
-            confirm_unstake_1b: /*...unstakePeriodPretty */ 'après quoi ils peuvent être retirer sur votre compte à partir de l\'onglet Retrait',
-            confirm_unstake_2a: 'Attention, vous pouvez unstake encore', /* remainingDeposits...*/
-            confirm_unstake_2b: /*...remainingDeposits */ 'fois avant ' +
-                'd\'atteindre le nombre d\'unstake simultané maximum. Si vous atteignez ce maximum vous devrez' +
-                'retirer vos TLOS pour continuer à unstaker. Si vous n\'avez pas encore de TLOS retirable il vous faudra' +
-                'attendre jusqu\'a que la durée de verrouillage soit écoulée avant de pouvoir les retirer et de unstake plus de sTLOS. -',
-            unstake_stlos_for_tlos: 'Unstaker vos sTLOS contre des TLOS',
-            unstake_stlos: 'Unstaker vos sTLOS',
-            receive_tlos: 'Recevez TLOS',
-            amount: 'Montant',
-            time_remaining: 'Temps restant',
-            full_staked_balance_tooltip: 'Cliquez pour saisir le solde total staké\n\n' +
-                'Solde précis (moins frais de gaz approximatifs):\n' +
-                '{prettyBalance} sTLOS',
-            login_using_evm_wallet: 'Connectez vous à l\'aide d\'un portefeuille EVM',
-            max_unstake_transactions_reached: 'Vous avez atteint le nombre maximum de unstake concurents, ' +
-                'veuillez retirer le TLOS disponible ou attendre que vos unstake en cours soit dévérouillés avant de réessayer.',
-            click_to_change_time_format: 'Cliquer pour changer le format du temps',
-            unstaking: 'Unstaking',
-            available_to_withdraw: 'Disponible pour retrait',
-            withdraw_tlos: 'Retirer vos TLOS',
-            withdraw_successful: 'Retrait effectué ! Voir la transaction:',
-            no_withdrawable_positions: 'Aucune position retirable',
-            you_have_unlocked_tlos: 'Vous avez des TLOS déverrouillés !',
-            stake_tlos_success: 'Stake effectuée ! Voir la transaction:',
-            unstake_stlos_success: 'Unstake effectuée ! Voir la transaction:',
-            deposit_failed: 'Échec lors de dépot de TLOS: { message }',
-            redeem_failed: 'Impossible de convertir vos sTLOS en TLOS: { message }',
-            fetch_balance_error: 'Impossible de récuperer le compte: { message }',
-            fetch_stlos_balance_error: 'Échec de récupération du solde sTLOS: { message }',
-            fetch_stlos_value_error: 'Échec de récupération de la valeur du solde sTLOS: { message }',
-            fetch_unstaked_balance_error: 'Échec de récupération du total de TLOS unstaked: { message }',
-            fetch_unlocked_balance_error: 'Échec de récupération du solde de sTLOS récupérable: { message }',
-            fetch_escrow_deposits_error: 'Échec de récupération des dépôts fiduciaire: { message }',
-            fetch_conversion_rate_error: 'Échec de récupération du taux de conversion TLOS->sTLOS: { message }',
-            fetch_stlos_contract_error: 'Échec de récupération du contrat sTLOS: { message }',
-            fetch_escrow_contract_error: 'Échec de récupération du contrat des dépôts fiduciaire: { message }',
-            fetch_unstake_period_error: 'Échec de récupération de la période d\'unstaking: { message }',
-            fetch_account_error: 'Échec de récupération du compte: { message }',
-            fetch_stlos_tvl_error: 'Échec de récupération de la valeur totale verouillée (VTV) de sTLOS: { message }',
-            fetch_stlos_apy_error: 'Échec de récupération de l\'APY sTLOS: { message }',
-            fetch_max_deposits_error: 'Échec de récupération du nombre de dépôts maximum sur le contract des dépôts fiduciaire: { message }',
-            convert_tlos_to_stlos_error: 'Impossible de convertir TLOS en sTLOS: { message }',
-            convert_stlos_to_tlos_error: 'Impossible de convertir sTLOS en TLOS: { message }',
-            unstake_stlos_error: 'Échec lors de l\'unstake de sTLOS { message }',
-            withdraw_failed: 'Échec du retrait des TLOS déverrouillés: { message }',
+        blocklist: {
+            title: 'Liste des Blocs',
+        },
+        blockpage: {
+            block: 'Bloc',
+            overview: 'Vue d\'ensemble',
+            transactions: 'Transactions',
+        },
+        transactions: {
+            contract_deployment: 'Déploiement de contrat',
+            deposit_action_name: 'dépôt',
+            deposit_native: 'dépôt (native)',
+            five_hundred_k_disclaimer: 'Affichage des derniers 500K enregistrements de { total }',
+            for_block: 'pour le bloc',
+            for: 'pour',
+            gas_info_label: 'Infos sur le gaz',
+            native_deposit_tooltip: 'Dépôt depuis le Telos natif',
+            native_withdraw_tooltip: 'Retrait vers le Telos natif',
+            nonce_label: 'Nonce',
+            see_more_details: 'Voir plus de détails',
+            see_tx_preview_tooltip: 'Voir un aperçu des détails de la transaction',
+            status_label: 'Statut',
+            to: 'à',
+            transaction_action_label: 'Action de transaction',
+            transaction_fee_label: 'Frais de transaction',
+            transactions: 'Transactions',
+            transfer_for_x_tlos_from: 'Transfert de { amount } TLOS depuis',
+            transfer_tlos_action_name: 'Transférer TLOS',
+            withdraw_action_name: 'retrait',
+            withdraw_native: 'retrait (natif)',
+            x_gas_used_of_y_limit: '{ amount } gaz utilisé sur une limite de { limit }',
+        },
+        transaction: {
+            page_title: 'Détails de la transaction',
+            overview: 'Aperçu',
+            logs: 'Journaux',
+            internal: 'Transactions internes',
+            not_found: 'Transaction non trouvée',
         },
+        home: {
+            telos_evm_explorer: 'L\'explorateur Telos EVM',
+            market_cap: 'Capitalisation boursière',
+            last_finalized_block: 'Dernier bloc finalisé',
+            total_transactions: 'Nombre total de transactions',
+        },
+        error: {
+            title: 'Page non trouvée.',
+            subtitle: 'Veuillez vérifier à nouveau l\'URL. Si elle semble correcte, réessayez plus tard.',
+        },
+        issuer: 'Émetteur',
+        account_not_found: 'Nous n\'avons pas pu trouver ce compte',
+        approvals: 'Permissions',
+        supported_interfaces: 'Interface(s) supporté(s) connue(s)',
         explore_transactions: 'Explorer les transactions',
         recent_transactions: 'Transactions récentes',
         telos_evm_explorer: 'Exploreur Telos EVM',
         rpc_endpoints: 'RPC',
         monitor: 'Moniteur',
-        oops: 'Oops. Il n\'y a rien ici...',
         go_home: 'Accueil',
+        minted: 'Frappé(s)',
+        holders: 'Détenteurs',
+        evm_holders: 'Tout détenteurs sur Telos EVM',
+        total_nfts_minted: 'Total des NFTs crés dans cette collection',
+        telos_supply: 'Réserve Telos EVM',
         select_sol_file: 'Sélectionnez votre fichier .sol pour l\'envoyer',
         select_json_file: 'Sélectionnez un fichier avec un objet JSON standard à envoyer',
         paste_contract_contents: 'vous devez séléctionner un fichier à envoyer ou utiliser le boutton de bascule pour pouvoir coller le contenu de votre contrat',
@@ -137,12 +89,17 @@ export default {
         verify_contract: 'Verifier le contrat',
         reset: 'Réinitialiser',
         gas_used: 'Gaz utilisé',
-        transactions: 'Transactions',
         account: 'Compte',
         contract: 'Contrat',
+        transfers_title: 'Transferts { type }:',
+        loading_transfers: 'Chargement des transferts',
+        loading_approvals: 'Chargement des permissions',
         erc20_transfers: 'Transferts ERC20',
+        erc20_transfers_tooltip: 'Liste des transferts de jetons ERC20 dans cette transaction',
         erc721_transfers: 'Transferts ERC721',
+        erc721_transfers_tooltip: 'Liste des transferts de jetons ERC721 dans cette transaction',
         erc1155_transfers: 'Transferts ERC1155',
+        erc1155_transfers_tooltip: 'Liste des transferts de jetons ERC1155 dans cette transaction',
         tokens: 'Jetons',
         created_at_trx: 'Création',
         by_address: 'Par',
@@ -182,8 +139,17 @@ export default {
         input: 'Entrée',
         output: 'Sortie',
         value: 'Valeur',
+        overview: 'aperçu',
+        more_info: 'plus d\'info',
+        transaction_sent: 'txn envoyé',
+        first: 'premier',
+        last: 'dernier',
+        contract_creator: 'créateur de contrat',
     },
     components: {
+        known_tokens: 'Jetons connus',
+        other_tokens: 'Jetons inconnus',
+        no_balances_found: 'Aucun jetons erc20 trouvés pour cette adresse',
         internal_txns: 'Transactions Internes',
         n_internal_txns: '{ amount } transactions internes',
         none: 'Aucun',
@@ -206,9 +172,17 @@ export default {
         text3_or_to_recover_assets: 'ou pour récuperer des jetons envoyés à une adresse EVM lié à un compte natif',
         copy_to_clipboard: 'Copiez { text } dans le presse-papiers',
         latest_block: 'Dernier Bloc',
+        price_sources: 'Données obtenues de Coingecko, CoinMarketCap si disponible sinon des échanges décentralisés présents sur Telos EVM',
+        marketcap_sources: 'Données obtenues de Coingecko ou CoinMarketCap',
+        usd_marketcap: 'Capitalisation USD',
+        usd_price: 'Prix USD',
+        usd_value: 'Valeur USD',
         tlos_price: 'Prix TLOS',
         gas_price: 'Prix gaz',
         click_to_expand: 'Cliquez pour étendre la signature de la fonction',
+        click_to_fold: 'Cliquez pour réduire',
+        expand_all: 'Etendre tout',
+        collapse_all: 'Réduire tout',
         search_evm_failed: 'La recherche d\'une adresse EVM lié au compte natif { search_term } à échoué.',
         search_failed: 'La recherche à échouée, veuillez saisir des mots clés de recherche correctes.',
         add_to_metamask: 'Ajoutez { symbol } à MetaMask',
@@ -231,6 +205,7 @@ export default {
         copied: 'Copié',
         copy_to_clipboard_failed: 'La copie sur le presse-papiers à échoué',
         gwei: 'Gwei',
+        failed_to_fetch_transactions: 'Erreur lors du chargement des transactions.',
         failed_to_parse_transaction: 'Echec de l\'analyse des données de la transaction. Erreur: { message }',
         executed_based_on_decoded_data: 'Fonction executé à partir des données d\'entrée décodé. Pour les fonctions non identifiés, l\'ID de méthode est affiché à la place.',
         unsupported_token_type: 'Type de jeton non supporté: { tokenType }',
@@ -239,17 +214,79 @@ export default {
         nonce: 'Nonce',
         from: 'De',
         to: 'À',
+        approvals: {
+            token_id: 'ID Jeton',
+            approved: 'Approuvé',
+            approvals_granted_title: 'Permissions ERC:',
+            login_account: 'Veuillez vous connecter à cette addresse à l\'aide de votre portefeuille afin de consulter ses permissions.',
+            approval_text: 'Nous allons définir le montant des permissions séléctionés à 0. Ceci requiert une signature avec votre portefeuille.',
+            type: 'Type',
+            delete: 'Supprimer',
+            delete_all: 'Supprimer tout',
+            unselect_all: 'Tout déséléctionner',
+            cancel: 'Annuler',
+            remove_approval: 'Supprimer',
+            removal_approval: 'Supprimer la permission',
+            unselect_all_approvals: 'Déséléctionner les permissions',
+            infinite: 'Infini',
+            infinite_tooltip: 'Permission plus grande que la totalité des jetons en existence',
+            select: 'Selectionnez la permission',
+            unselect: 'Déséléctionner la permission',
+            update: 'Mise à jour permission(s)',
+            update_description: 'Saisissez le nouveau montant de la permission. Ceci requiert une signature avec votre portefeuille.',
+            removal_approvals: 'Supprimer toutes les permissions',
+            removal_selected_approvals: 'Supprimer toutes les permissions séléctionnées',
+            update_failed: 'Echec lors de la mise à jour de la ou des permissions',
+            update_success: 'Permission à {spender} pour {contract} a bien été mise à jour',
+            spender: 'Dépensier',
+            amount: 'Montant',
+        },
+        nfts : {
+            show_without_metadata: 'Voir les NFTs sans metadata',
+            id: 'ID Jeton',
+            name: 'Nom',
+            collection: 'Collection',
+            nfts: 'NFTs',
+            contract: 'Contrat NFT',
+            metadata: 'Meta',
+            minter: 'Cré par',
+            owner: 'Propriétaire',
+            minted: 'Bloc',
+            image: 'Image',
+            media: 'Media',
+            attributes: 'attribut',
+            ipfs: 'Obtenir de IPFS',
+            consult_collection: 'Consultez la collection',
+            consult_metadata: 'Consultez les metadonnées',
+            consult_media: 'Consultez le media',
+        },
+        holders : {
+            show_system_contracts: 'Voir les contrats systèmes',
+            holder: 'Détenteur',
+            balance: 'Solde',
+            telos_supply: 'Parts Telos EVM',
+            global_supply: 'Parts globales',
+            updated: 'Mis à jour',
+        },
+
         transaction: {
+            in: 'dépot',
+            out: 'envoi',
             form_from: 'De : ',
             form_to: 'À : ',
+            load_error: 'Erreur de chargement des transactions',
             form_token: 'Jeton : ',
             consult_collection: 'Consultez la collection',
             consult_metadata: 'Consultez les metadonnées',
             consult_media: 'Consultez le media',
+            show_short: 'Voir format court',
             show_total: 'Voir le total',
             show_wei: 'Voir en wei',
             value_uint256: 'Valeur (uint256) : ',
             tlos_transfer: 'TLOS Transfer',
+            contract_deployed: 'Contrat Deployé',
+            native_deposit: 'Dépôt de Telos Natif',
+            native_withdraw: 'Transfert à Telos Natif',
             unknown: 'Inconnu',
             contract_deployment: 'Deploiement du contrat',
             no_internal_trxs_found: 'Aucune transaction interne trouvée',
@@ -298,16 +335,23 @@ export default {
             checked_at: 'Vérifié à',
             task: 'Tâche',
             message: 'Message',
+            category: 'Catégorie',
             block_height: 'Bloc',
             latency: 'Latence',
+            success: 'Succès',
+            info: 'Info',
+            alert: 'Alerte',
+            error: 'Erreur',
             click_to_change_format: 'Cliquer pour changer de format',
         },
         contract_tab: {
+            abi_loaded_from_interface: 'Cet ABI générique a été chargé à l\'aide de supportsInterface() de l\'IEP-165. Certaines fonctions listées peuvent donc ne pas être implémentés. Vérifiez le contrat pour intégagir avec en utilisant l\'ABI complet.',
             copy_abi_to_clipboard: 'Copier l\'ABI du contrat sur le presse-papiers',
             enter_amount: 'Séléctionnez un nombre de décimales et saisissez un montant qui sera injecté pour vous dans la fonction en tant que uint256',
             result: 'Résultat',
             view_transaction: 'Voir la transaction',
             code: 'Code',
+            bytecode: 'Bytecode',
             read: 'Lire',
             write: 'Ecrire',
             amount: 'Montant',
@@ -318,6 +362,8 @@ export default {
             click_here: 'Cliquez ici',
             upload_source_files: 'pour envoyer le fichier source et vérifier votre contrat.  ' +
                 'Alternativement, vous pouvez intéragir avec le contrat en utilisant un ABI arbitraire:',
+            abi_autoloaded: 'En attendant, vous pouvez intéragir avec le contrat en utilisant notre ABI générique chargé automatiquement.',
+            choose_abi: 'Alternativement, vous pouvez intéragir avec le contrat en utilisant soit un de nos ABIs génériques ou bien un ABI JSON personalisé:',
             use_erc20_abi: 'Utiliser l\'ABI ERC20',
             use_erc721_abi: 'Utiliser l\'ABI ERC721',
             use_erc1155_abi: 'Utiliser l\'ABI ERC1155',
@@ -329,36 +375,102 @@ export default {
             read_functions: 'Fonctions de lecture',
             write_functions: 'Fonctions de d\'écriture',
             unverified_contract: 'Contract non verifié',
+            verified_contract: 'Contract Verifié',
         },
         header: {
-            sign_in: 'Connexion',
-            sign_out: 'Déconnexion',
-            liq_staking: 'Staking Liquide',
-            goto_staking: 'Aller au Staking',
-            goto_health_monitor: 'aller à la page Moniteur de Santé',
-            goto_mainnet: 'Aller au Mainnet',
-            goto_testnet: 'Aller au Testnet',
-            health_monitor: 'Moniteur de Santé',
-            health_status: 'Statut',
-            advanced: 'Avancé',
-            light_mode: 'Mode Clair',
-            dark_mode: 'Mode Sombre',
+            address_copied: 'Adresse copiée',
             address_not_found: 'La recherche d\'une adresse EVM lié à au compte natif { account } a échoué.',
-            search_failed: 'La recherche a échoué, veuillez saisir des mots clés de recherche corrects.',
-            goto_address_details: 'Voir les détails de l\'adresse',
+            api_documentation: 'Documentation API',
+            blockchain: 'Blockchain',
+            blocks: 'Blocs',
+            connect_wallet: 'Connecter Portefeuille',
             copy_address: 'Copier l\'adresse',
-            address_copied: 'Adresse copiée',
+            csv_export: 'Exportation CSV',
+            developers: 'Développeurs',
+            disconnect_wallet_tooltip: 'Déconnecter le portefeuille',
+            gas: 'Gas',
+            goto_address_details: 'Voir les détails de l\'adresse',
+            health_monitor: 'Moniteur de Santé',
+            home: 'Accueil',
+            more: 'Plus',
+            network: 'Réseau',
+            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',
             select_language: 'Choisir votre language',
-            open_language_switcher: 'Ouvrir le sélécteur de language',
+            switch_to_dark_theme: 'Passer au thème sombre',
+            switch_to_light_theme: 'Passer au thème clair',
+            system_token_price: 'Prix du {token}',
+            telos_ecosystem: 'Écosystème Telos',
+            telos_evm_logo_alt: 'Logo de Telos EVM',
+            telos_wallet: 'Wallet',
+            telos_bridge: 'Bridge',
+            transactions: 'Transactions',
+            verify_contract_sourcify: 'Vérifier le Contrat (Sourcify)',
+            view_other_networks: 'Voir d\'autres réseaux',
+        },
+        blocks: {
+            block_height: 'Hauteur du bloc',
+            timestamp: 'Horodatage',
+            size: 'Taille',
+            gas_used: 'Gaz utilisé',
+            gas_limit: 'Limite de gaz',
+            hash: 'Hachage',
+            parent_hash: 'Hachage parent',
+            nonce: 'Nonce',
+            extra_data: 'Données supplémentaires',
+            extra_data_tooltip: 'Données supplémentaires incluses dans le bloc',
+            block_height_tooltip: 'Aussi appelé "Numéro de bloc". La hauteur du bloc représente la longueur de la chaîne de blocs, augmentant de un après l\'ajout d\'un nouveau bloc',
+            timestamp_tooltip: 'Le moment et la date de production du bloc',
+            transactions_tooltip: 'Le nombre de transactions dans le bloc. Les transactions internes sont des transactions qui se produisent à la suite de l\'exécution d\'un contrat et incluent une valeur TLOS',
+            size_tooltip: 'la quantité de données dans le bloc, déterminée par la limite de gaz',
+            gas_used_tooltip: 'La quantité de gaz utilisée dans le bloc',
+            gas_limit_tooltip: 'La limite de gaz pour toutes les transactions dans le bloc',
+            nonce_tooltip: 'La valeur utilisée lors du minage pour atteindre un consensus sur la Preuve de Travail pour le bloc',
+            hash_tooltip: 'Le hachage de l\'en-tête du bloc',
+            parent_hash_tooltip: 'Le hachage du bloc parent',
+            count_transactions: '{count} transactions',
+            count_transaction: '1 transaction',
+            in_this_block: 'dans ce bloc',
+            transactions: 'Transactions',
         },
     },
     global: {
+        all: 'Tous',
+        true: 'oui',
+        false: 'non',
+        close: 'Fermer',
+        toggle_fullscreen: 'Passer en mode plein écran',
+        name: 'Nom',
+        symbol: 'Symbole',
+        show_table: 'Version tableau',
+        show_grid: 'Version grille',
+        records_per_page: 'Entrées par page:',
+        max_decimals_reached: 'Veuillez utiliser au maximum { max } décimales',
+        erc20_token: 'Jeton ERC20',
+        erc721_token: 'Jeton ERC721',
+        sign: 'Signer',
+        hours: 'heures',
+        wallet_response: 'En attente d\'une réponse de votre portefeuille',
+        minutes: 'minute(s)',
+        days: 'jour(s)',
+        and: 'et',
+        unknown: 'inconnu(e)',
+        data_behind_by: 'Les données affichés sont en retard de',
+        not_synced: 'L\'indexeur n\'est pas synchronisé',
+        try_reloading: 'Vous pouvez rafraîchir la page pour réesayer',
+        error: 'Erreur',
+        async_error_description: 'Désolé ! Un erreur est survenue lors de la requête d\'une ressource. Assurez vous que votre connection internet fonctionne et réessayez. Si cela ne marche toujours pas, contactez nous directement sur nos canaux Telegram.',
         language: 'Language',
         cancel: 'Annuler',
+        updated: 'Mis à jour',
+        action: 'Action',
         ok: 'Ok',
+        expand: 'Voir plus',
         dismiss: 'Rejeter',
         internal_error: 'Erreur interne',
+        empty_block: 'Le bloc est vide',
+        empty_block_description: 'Ce bloc ne comporte aucune transaction. Essayez de consulter un autre bloc',
     },
     layouts: {
         health_status: 'Statut santé',
@@ -380,16 +492,12 @@ export default {
         error_see_details_label: 'Voir Détails',
         error_details_title: 'Détails de l\'Erreur',
         neutral_message_sending: 'Envoi de <b>{quantity}</b> à <b>{address}</b>',
-        neutral_message_staking: 'Dépôt de <b>{quantity} {symbol}</b>',
-        neutral_message_unstaking: 'Préparation du retrait de <b>{quantity} {symbol}</b>',
         neutral_message_revoking: 'Révocation de l\'allocation de <b>{symbol}</b> pour <b>{address}</b>',
         neutral_message_wrapping: 'Conversion de <b>{quantity} {symbol}</b> en ERC20',
         neutral_message_unwrapping: 'Restauration de <b>{quantity} {symbol}</b>',
         neutral_message_withdrawing: 'Retrait de <b>{quantity} {symbol}</b>',
         dont_show_message_again: 'Ne plus afficher ce message',
         error_message_sending: 'Une erreur s\'est produite lors de l\'envoi de <b>{quantity}</b> à <b>{address}</b>',
-        error_message_staking: 'Une erreur s\'est produite lors du dépôt de <b>{quantity} {symbol}</b>',
-        error_message_unstaking: 'Une erreur s\'est produite lors de la préparation du retrait de <b>{quantity} {symbol}</b>',
         error_message_revoking: 'Une erreur s\'est produite lors de la révocation de l\'allocation de <b>{symbol}</b> pour <b>{address}</b>',
         error_message_wrapping: 'Une erreur s\'est produite lors de la conversion de <b>{quantity} {symbol}</b> en ERC20',
         error_message_unwrapping: 'Une erreur s\'est produite lors de la restauration de <b>{quantity} {symbol}</b>',
@@ -404,10 +512,16 @@ export default {
             error_unpredictable_gas_limit: 'Impossible d\'estimer la limite de gaz pour cette transaction',
             error_transaction_canceled: 'Vous avez annulé l\'action',
         },
-    },
-    temporal: {
-        telos_cloud_discontinued_title: 'Importante',
-        telos_cloud_discontinued_message_title: 'Attention aux utilisateurs : L\'option de compte Telos Cloud Wallet sera supprimée.',
-        telos_cloud_discontinued_message_body: 'L\'option du compte Telos Cloud Wallet (ORE ID via Google) pour se connecter et signer des transactions sera supprimée après le 31 décembre. Si vous utilisez le Telos Cloud Wallet pour accéder à votre compte, veuillez transférer vos actifs vers un autre portefeuille avant cette date. <strong>Ce changement n\'affecte pas les utilisateurs qui accèdent à leurs comptes via Metamask, WalletConnect, Anchor ou d\'autres méthodes de connexion.</strong>',
+        words: {
+            day: 'jour',
+            days: 'jours',
+            hour: 'heure',
+            hours: 'heures',
+            minute: 'minute',
+            minutes: 'minutes',
+            second: 'seconde',
+            seconds: 'secondes',
+            time_ago: 'Il y a {time}',
+        },
     },
 };
diff --git a/src/i18n/pt-br/index.js b/src/i18n/pt-br/index.js
index b87f1035e..81fb2514d 100644
--- a/src/i18n/pt-br/index.js
+++ b/src/i18n/pt-br/index.js
@@ -1,120 +1,68 @@
-/* eslint-disable max-len*/
-
 export default {
     locale: {
         current_language_name: 'Português',
     },
     pages: {
-        staking: {
-            note_unstaking_period: 'Lembre-se que há um período de retirada de {period}',
-            claim_tlos: 'Resgatar TLOS',
-            add_stlos_to_metamask: 'Iniciar interação com o MetaMask para adicionar sTLOS',
-            metamask_fox_logo: 'Logotipo de raposa do MetaMask',
-            cancel: 'Cancelar',
-            stake_tlos_confirm: 'Continuar significa aplicar TLOS em troca de sTLOS. ' +
-            'sTLOS podem ser resgatados por TLOS a qualquer momento usando a aba Desaplicar.',
-            stake_tlos_confirm_2a: 'Depois que desaplicar os TLOS, eles ficarão bloqueados por um período de', /* unstakePeriodPretty...*/
-            stake_tlos_confirm_2b: /*...unstakePeriodPretty */ 'depois disso, podem ser retirados da sua conta na aba Resgatar.',
-            stake_tlos_confirm_3: 'Deseja continuar?',
-            stake_tlos: 'Aplicar TLOS',
-            stake_tlos_subheader: 'Aplicar seus TLOS por sTLOS te dá acesso a uma renda estável e várias aplicações DeFi, ' +
-            'aumentando ainda mais a rentabilidade. Conforme o tamanho da pool de recompensas aumenta, a taxa de conversão de TLOS para sTLOS mudará ' +
-            'com o tempo. Portanto, a quantidade de sTLOS recebida é menor que a quantidade de TLOS aplicada. As recompensas se ' +
-            'auto-compensarão. Não é necessária nenhuma ação adicional.',
-            receive_stlos: 'Receber sTLOS',
-            available: '{balanceTlos} Disponível',
-            insufficient_tlos_balance: 'Saldo de TLOS insuficiente para aplicar',
-            login_using_an_evm_wallet: 'Logar usando uma carteira EVM',
-            wallet_not_connected: 'Carteira não conectada',
-            click_to_input_full_wallet_balance: 'Clique para inserir o saldo completo de sua carteira\n\n' +
-            'O saldo mostrado é reduzido em 1 TLOS para manter sua conta operacional.\n' +
-            'Saldo exato (menos as tarifas de gás aproximadas):\n' +
-            '{prettyBalance} TLOS',
-            loading: 'Carregando...',
-            get_more_tlos: 'Obter mais TLOS',
-            connect_wallet: 'Conectar carteira',
-            minutes: 'minutos',
-            hours: 'horas',
-            days: 'dias',
-            unstake: 'Desaplicar',
-            stake: 'Aplicar',
-            withdraw: 'Retirar',
-            telos_evm_staking: 'Aplicação de TLOS em EVM',
-            stake_tlos_earn_interest: 'Aplicar TLOS em sTLOS para ganhar juros do pool de recompensas por aplicação',
-            staked: 'Aplicado',
-            unstaked: 'Desaplicado',
-            tooltip_1: 'RPA: Rendimento Percentual Anual (APY em inglês)\n\nA taxa de retorno anual depois de receber o juros composto na conta.\n\n' +
-            'Os juros são compostos aproximadamente a cada 30 minutos. A taxa percentual não é fixa, o que significa que ' +
-            'mudará ao longo do tempo com a quantidade total de TLOS aplicados em Telos EVM e Telos Native. ' +
-            'As recompensas são pagas de um pool de recompensas da comunidade para o contrato sTLOS.',
-            tooltip_2: 'VTB: Valor Total Bloqueado (TVL em inglês)\n\nO valor atual, em TLOS, de todos os ativos mantidos no sTLOS ' +
-            '(Staked TLOS, que significa TLOS aplicados em inglês), ou seja, a soma de todos os TLOS aplicados no Telos EVM neste momento.',
-            tooltip_3: 'Aplicado\n\n' +
-            'O montante total aplicado associado com a conta logada, ou seja, ' +
-            'seu saldo de tokens sTLOS, junto com seu valor em TLOS',
-            tooltip_4: 'Desaplicado\n\n' +
-            'O valor total de TLOS desaplicados que você tem, tanto bloqueados quanto desbloqueados.\n\n' +
-            'Quando você desaplica\u2014ou seja, resgata\u2014parte do valor em sTLOS, a quantidade equivalente de ' +
-            'TLOS permanece como garantia ("bloqueado") por {unlockPeriod}; durante este tempo, ' +
-            'não é possível interagir com esta quantidade de TLOS.\n\n' +
-            'Depois de decorrido o período de desbloqueio, você pode reivindicar seu TLOS disponível na aba Resgatar ' +
-            'nesta página. O valor resgatado será adicionado ao saldo TLOS da sua conta.',
-            confirm_unstake_1a: 'Ao continuar, você resgatará sTLOS em troca de TLOS. ' +
-            'O TLOS não aplicado permanecerá bloqueado por um período de', /* unstakePeriodPretty...*/
-            confirm_unstake_1b: /*...unstakePeriodPretty */ 'após o qual pode ser transferido para sua conta na aba Resgatar',
-            confirm_unstake_2a: 'Atenção, você já pode desaplicar ', /* remainingDeposits...*/
-            confirm_unstake_2b: /*...remainingDeposits */ 'mais vezes antes ' +
-            'de atingir o máximo de ações simultâneas de desaplicação. Quando atingir o máximo, você precisará resgatar ' +
-            'TLOS desbloqueado para continuar desaplicando. Se você não tiver nenhum TLOS resgatável nesse momento, você deve ' +
-            'aguardar até que a duração do bloqueio acabe, antes de resgatar o TLOS desbloqueado e desaplicar mais sTLOS. -',
-            unstake_stlos_for_tlos: 'Desaplicar sTLOS em troca de TLOS',
-            unstake_stlos: 'Desaplicar sTLOS',
-            receive_tlos: 'Receber TLOS',
-            amount: 'Montante',
-            time_remaining: 'Tempo restante',
-            full_staked_balance_tooltip: 'Clique para inserir o saldo total aplicado\n\n' +
-            'Saldo exato (menos as tarifas de gás aproximadas):\n' +
-            '{prettyBalance} sTLOS',
-            login_using_evm_wallet: 'Logar usando uma carteira EVM',
-            max_unstake_transactions_reached: 'Você atingiu o número máximo de transações de desaplicação pendentes, ' +
-            'por favor, resgate o TLOS disponível ou aguarde que o TLOS  desaplicado ainda pendente se torne resgatável antes de fazer outro depósito.',
-            click_to_change_time_format: 'Clique para mudar o formato de hora',
-            unstaking: 'Desaplicando',
-            available_to_withdraw: 'Disponível para retirar',
-            withdraw_tlos: 'Retirar TLOS',
-            withdraw_successful: 'Retirada bem-sucedida! Ver transação:',
-            no_withdrawable_positions: 'Não há posições disponíveis para retirar',
-            you_have_unlocked_tlos: 'Você desbloqueou TLOS!',
-            stake_tlos_success: 'Aplicação bem-sucedida! Ver transação:',
-            unstake_stlos_success: 'Desaplicação bem-sucedida! Ver transação:',
-            deposit_failed: 'Falha ao depositar TLOS: { message }',
-            redeem_failed: 'Não foi possível converter STLOS em TLOS: { message }',
-            fetch_balance_error: 'Falha ao buscar conta: { message }',
-            fetch_stlos_balance_error: 'Falha ao buscar saldo de STLOS da conta: { message }',
-            fetch_stlos_value_error: 'Falha ao buscar valor do saldo de STLOS da conta: { message }',
-            fetch_unstaked_balance_error: 'Falha ao buscar saldo total de TLOS não aplicado: { message }',
-            fetch_unlocked_balance_error: 'Falha ao buscar saldo de STLOS desbloqueado: { message }',
-            fetch_escrow_deposits_error: 'Falha ao buscar depósitos em garantia: { message }',
-            fetch_conversion_rate_error: 'Falha ao buscar taxa de conversão TLOS->sTLOS: { message }',
-            fetch_stlos_contract_error: 'Falha ao obter contrato STLOS: { message }',
-            fetch_escrow_contract_error: 'Falha ao obter contrato STLOS: { message }',
-            fetch_unstake_period_error: 'Falha ao recuperar período de desaplicação: { message }',
-            fetch_account_error: 'Falha ao buscar conta: { message }',
-            fetch_stlos_tvl_error: 'Falha ao buscar TVL de sTLOS: { message }',
-            fetch_stlos_apy_error: 'Falha ao buscar APY de sTLOS: { message }',
-            fetch_max_deposits_error: 'Falha ao buscar depósitos máximos do contrato de garantia { message }',
-            convert_tlos_to_stlos_error: 'Não foi possível converter TLOS em STLOS { message }',
-            convert_stlos_to_tlos_error: 'Não foi possível converter STLOS em TLOS { message }',
-            unstake_stlos_error: 'Falha ao desaplicar sTLOS { message }',
-            withdraw_failed: 'Falha ao retirar TLOS desbloqueado: { message }',
+        blockpage: {
+            block: 'Bloco',
+            overview: 'Visão Geral',
+            transactions: 'Transações',
+        },
+        transactions: {
+            contract_deployment: 'Implantação de Contrato',
+            deposit_action_name: 'Depósito',
+            deposit_native: 'Depósito (nativo)',
+            five_hundred_k_disclaimer: 'Mostrando os últimos 500 mil registros de { total }',
+            for_block: 'para o bloco',
+            for: 'para',
+            gas_info_label: 'Informações de Gás',
+            native_deposit_tooltip: 'Depósito do Telos Nativo',
+            native_withdraw_tooltip: 'Saque para o Telos Nativo',
+            nonce_label: 'Nonce',
+            see_more_details: 'Ver mais detalhes',
+            see_tx_preview_tooltip: 'Ver prévia dos detalhes da transação',
+            status_label: 'Status',
+            to: 'para',
+            transaction_action_label: 'Ação da Transação',
+            transaction_fee_label: 'Taxa de Transação',
+            transactions: 'Transações',
+            transfer_for_x_tlos_from: 'Transferir { amount } TLOS de',
+            transfer_tlos_action_name: 'Transferir TLOS',
+            withdraw_action_name: 'Saque',
+            withdraw_native: 'Saque (nativo)',
+            x_gas_used_of_y_limit: '{ amount } gás usado de um limite de { limit }',
+        },
+        transaction: {
+            page_title: 'Detalhes da Transação',
+            overview: 'Visão Geral',
+            logs: 'Logs',
+            internal: 'Transações Internas',
+            not_found: 'Transação não encontrada',
+        },
+        home: {
+            telos_evm_explorer: 'O Explorador Telos EVM',
+            market_cap: 'Capitalização de mercado',
+            last_finalized_block: 'Último bloco finalizado',
+            total_transactions: 'Total de transações',
         },
+        error: {
+            title: 'Página não encontrada.',
+            subtitle: 'Por favor, verifique novamente a URL. Se parecer correta, tente novamente mais tarde.',
+        },
+        issuer: 'Issuer',
+        account_not_found: 'Não conseguimos encontrar esse conta',
+        approvals: 'Approvals',
+        supported_interfaces: 'interfaces suportadas conhecida(s)',
         explore_transactions: 'Explorar transações',
         recent_transactions: 'Transações recentes',
-        telos_evm_explorer: 'Explorador Telos EVM',
         rpc_endpoints: 'Endpoints RPC',
         monitor: 'Monitor',
-        oops: 'Ops! Nada por aqui...',
         go_home: 'Ver Início',
+        minted: 'Minted',
+        holders: 'Holders',
+        evm_holders: 'Todos os detentores de Telos EVM',
+        total_nfts_minted: 'Total de NFTs cunhadas nessa coleção',
+        telos_supply: 'Telos EVM fornecimento',
         select_sol_file: 'Selecione o arquivo de contrato .sol para carregar',
         select_json_file: 'Selecione o arquivo de objeto de entrada JSON convencional para carregar',
         paste_contract_contents: 'você deve selecionar um arquivo para carrregar ou alternar a entrada para colar conteúdos do contrato',
@@ -137,12 +85,17 @@ export default {
         verify_contract: 'Verificar contrato',
         reset: 'Reiniciar',
         gas_used: 'Gás usado',
-        transactions: 'Transações',
         account: 'Conta',
         contract: 'Contrato',
+        transfers_title: 'Transferências { type }',
+        loading_transfers: 'Loading transfers',
+        loading_approvals: 'Loading approvals',
         erc20_transfers: 'Transferências ERC20',
+        erc20_transfers_tooltip: 'Lista de transferências de tokens ERC20 nessa transação',
         erc721_transfers: 'Transferências ERC721',
+        erc721_transfers_tooltip: 'Lista de transferências de tokens ERC721 nessa transação',
         erc1155_transfers: 'Transferências ERC1155',
+        erc1155_transfers_tooltip: 'Lista de transferências de tokens ERC1155 nessa transação',
         tokens: 'Tokens',
         created_at_trx: 'Criada na TRX',
         by_address: 'Por endereço',
@@ -182,8 +135,72 @@ export default {
         input: 'Entrada',
         output: 'Saída',
         value: 'Valor',
+        overview: 'visão geral',
+        more_info: 'mais informações',
+        transaction_sent: 'txn enviado',
+        first: 'primeiro',
+        last: 'último',
+        contract_creator: 'criador do contrato',
     },
     components: {
+        approvals: {
+            token_id: 'Token ID',
+            approved: 'Aprovado',
+            login_account: 'Faça login nesta conta usando sua carteira para poder ver suas aprovações.',
+            approval_text: 'É necessária uma assinatura de sua carteira para atualizar o valor das aprovações selecionadas para 0.',
+            type: 'Tipo',
+            delete: 'Excluir',
+            delete_all: 'Excluir todos',
+            unselect_all: 'Desmarque todos',
+            cancel: 'Cancelar',
+            remove_approval: 'Remova',
+            removal_approval: 'Remover aprovação única',
+            unselect_all_approvals: 'Desmarque todas as aprovações',
+            infinite: 'Infinita',
+            infinite_tooltip: 'A permissão é maior que o fornecimento total deste token',
+            select: 'Selecione a aprovação',
+            unselect: 'Desmarcar aprovação',
+            update: 'Atualização de aprovação',
+            update_description: 'Insira o novo valor para permitir o gastador. Isso exigirá uma assinatura de carteira.',
+            removal_approvals: 'Remover todas as aprovações',
+            removal_selected_approvals: 'Remover todas as aprovações selecionadas',
+            update_failed: 'Falha ao atualizar a aprovação',
+            update_success: 'A aprovação de {spender} para o {contract} foi atualizada com sucesso',
+            spender: 'Gastador',
+            amount: 'Mesada',
+        },
+        nfts : {
+            show_without_metadata: 'Mostrar NFTs sem metadados',
+            id: 'Token ID',
+            name: 'Nome',
+            collection: 'Coleção',
+            nfts: 'NFTs',
+            metadata: 'Meta',
+            minter: 'Minter',
+            owner: 'Proprietário',
+            contract: 'Contrato',
+            image: 'Imagem',
+            media: 'Media',
+            minted: 'Bloco cunhado',
+            attributes: 'atributo',
+            ipfs: 'Obtenha do IPFS',
+            consult_metadata: 'Consultar metadados',
+            consult_media: 'Consultar media',
+            consult_collection: 'Consultar coleção',
+        },
+        holders : {
+            show_system_contracts: 'Mostrar contratos do sistema',
+            holder: 'Suporte',
+            balance: 'Saldo',
+            global_supply: 'Fornecimento global',
+            telos_supply: 'Fornecimento Telos EVM',
+            updated: 'Ultima atualização',
+        },
+        gas_limit_tooltip: 'A quantidade máxima de gás que pode ser gasta nesta transação',
+        gas_used_tooltip: 'A quantidade de gás que foi gasta nesta transação',
+        known_tokens: 'Known tokens',
+        other_tokens: 'Unknown tokens',
+        no_balances_found: 'Nenhum saldo de token erc20 foi encontrado para este endereço',
         internal_txns: 'Transações internas',
         n_internal_txns: '{ amount } transações internas',
         none: 'Nenhum',
@@ -206,23 +223,34 @@ export default {
         text3_or_to_recover_assets: 'ou para recuperar ativos enviados a um endereço nativo vinculado',
         copy_to_clipboard: 'Copiar { text } para a Área de Transferência',
         latest_block: 'Último bloqueio',
+        price_sources: 'Data obtained from Coingecko, CoinMarketCap or if unavailable from decentralized exchanges on Telos EVM',
+        marketcap_sources: 'Data obtained from Coingecko or CoinMarketCap',
+        usd_marketcap: 'USD Marketcap',
+        usd_price: 'Preço da USD',
+        usd_value: 'USD Value',
         tlos_price: 'Preço da TLOS',
         gas_price: 'Preço do gás',
-        click_to_expand: 'Clique para expandir a assinatura da função',
+        gas_price_tlos: '(Gas Price * Gas Used) in TLOS',
+        gas_price_gwei: 'Gas Price in gwei',
+        click_to_expand: 'Clique para expandir',
+        click_to_fold: 'Clique para dobrar',
+        expand_all: 'Expandir tudo',
+        collapse_all: 'Dobrar tudo',
         search_evm_failed: 'A busca pelo endereço EVM vinculado à conta nativa { search_term } falhou.',
         search_failed: 'A busca falhou, digite um termo de pesquisa válido.',
         add_to_metamask: 'Adicionar { symbol } ao MetaMask',
-        tx_hash: 'Tx Hash',
+        tx_hash: 'Txn Hash',
         block: 'Bloco',
-        date: 'Data',
+        date: 'Date Time (UTC)',
+        age: 'Age',
         method: 'Método',
-        to_interacted_with: 'Para / Interagido com',
-        value_transfer: 'Valor / Transferência',
+        to_interacted_with: 'Para',
         value: 'Valor',
+        txn_fee: 'Txn Fee',
+        txn_failed: 'Txn Falha',
         token: 'Token',
         unknown_precision: 'Precisão desconhecida',
         click_to_change_format: 'Clique para mudar o formato',
-        func_exed_based_on_dec_data: 'Função executada com base nos dados decodificados',
         balance: 'Saldo',
         error_fetching_balance: 'erro ao recuperar o saldo',
         launch_metamask_dialog_to_add: 'Iniciar interação com o MetaMask para adicionar { symbol }',
@@ -231,8 +259,9 @@ export default {
         copied: 'Copiado',
         copy_to_clipboard_failed: 'Falha ao copiar para a área de transferência',
         gwei: 'Gwei',
+        failed_to_fetch_transactions: 'Failed to fetch transactions.',
         failed_to_parse_transaction: 'Falha ao analisar os dados da transação, o erro foi: { message }',
-        executed_based_on_decoded_data: 'Função executada com base nos dados de entrada decodificados. Para função não identificada, o ID do método é exibido.',
+        executed_based_on_decoded_data: 'Name of the function executed based. For unidentified functions, method ID is displayed instead.',
         unsupported_token_type: 'Tipo de token não suportado: { tokenType }',
         token_id: 'Id #{ tokenId }',
         status: 'Status',
@@ -240,23 +269,55 @@ export default {
         from: 'De',
         to: 'Para',
         transaction: {
-            form_from: 'De : ',
-            form_to: 'Para : ',
-            form_token: 'Token : ',
-            consult_collection: 'Consultar coleção',
-            consult_metadata: 'Consultar metadados',
-            consult_media: 'Consultar mídia',
+            in: 'in',
+            out: 'out',
+            load_error: 'Could not load transactions',
+            show_short: 'Show short',
             show_total: 'Mostrar total',
             show_wei: 'Mostrar wei',
             value_uint256: 'Valor (uint256) : ',
-            tlos_transfer: 'Transferência TLOS',
+            tlos_transfer: 'TLOS Transfer',
+            native_deposit: 'Deposit from Native Telos',
+            native_withdraw: 'Withdraw to Native Telos',
             unknown: 'Desconhecido',
+            contract_deployed: 'Contract Deployed',
             contract_deployment: 'Implantação de contrato',
             no_internal_trxs_found: 'Nenhuma transação interna encontrada',
             human_readable: 'Legível por humanos',
             no_logs_found: 'Nenhum registro encontrado',
             verify_related_contract: 'Verifique o contrato relacionado para cada registro para ver sua versão legível por humanos',
             failed_to_retrieve_contract: 'Falha ao recuperar o contrato com o endereço { address }',
+            trx_hash: 'Hash da Transação',
+            trx_hash_tooltip: 'O identificador único da transação.',
+            block: 'Bloco',
+            block_tooltip: 'O número do bloco no qual esta transação foi incluída.',
+            status: 'Status',
+            status_tooltip: 'Indica se a transação foi bem-sucedida, falhou ou está pendente',
+            timestamp: 'Data e Hora',
+            timestamp_tooltip: 'O momento em que a transação foi confirmada.',
+            trx_action: 'Ação da Transação',
+            trx_action_tooltip: 'A operação realizada por esta transação, como uma transferência ou execução de contrato.',
+            from: 'De',
+            from_tooltip: 'O endereço que iniciou a transação.',
+            to: 'Para',
+            to_tooltip: 'O endereço destinatário da transação.',
+            value: 'Valor',
+            value_tooltip: 'A quantidade de criptomoeda transferida nesta transação.',
+            gas_fee: 'Taxa da Transação',
+            gas_fee_tooltip: 'A taxa total paga por esta transação, em TLOS e USD.',
+            gas_price: 'Preço do Gás',
+            gas_price_tooltip: 'O preço por unidade de gás pago pela transação.',
+            more_details: 'Mais Detalhes',
+            show_more_details: 'clique para mostrar mais',
+            show_less_details: 'clique para mostrar menos',
+            gas_limit_n_usage: 'Limite de Gás & Uso por Txn',
+            gas_limit_n_usage_tooltip: 'A quantidade máxima de gás que foi permitida para a transação, e a quantidade real de gás utilizada.',
+            nonce: 'Nonce',
+            nonce_tooltip: 'Um número sequencial associado a cada transação feita pelo mesmo endereço, garantindo que as transações sejam processadas em ordem.',
+            position_in_block: 'Posição no Bloco',
+            position_in_block_tooltip: 'A posição desta transação no bloco.',
+            input: 'Entrada',
+            input_tooltip: 'Dados enviados junto à transação, normalmente usados para interações com contratos.',
         },
         inputs: {
             incorrect_address_array_length: 'Deve haver { size } endereços na matriz',
@@ -298,16 +359,23 @@ export default {
             checked_at: 'Verificado em',
             task: 'Tarefa',
             message: 'Mensagem',
+            category: 'Category',
             block_height: 'Altura do bloco',
             latency: 'Latência',
+            success: 'Success',
+            info: 'Info',
+            alert: 'Alert',
+            error: 'Error',
             click_to_change_format: 'Clique para alterar o formato',
         },
         contract_tab: {
+            abi_loaded_from_interface: 'Essa ABI genérica foi carregada usando a função supportsInterface() do IEP-165 e pode não ser exaustiva. Algumas das funções exibidas podem não estar implementadas. Verifique o contrato para poder interagir com ele usando sua ABI completa.',
             copy_abi_to_clipboard: 'Copiar ABI JSON do contrato para a área de transferência',
             enter_amount: 'Selecione o número de decimais e insira um valor, este será inserido para você no parâmetro da função como uint256',
             result: 'Resultado',
             view_transaction: 'Ver transação',
             code: 'Código',
+            bytecode: 'Código de bytes',
             read: 'Ler',
             write: 'Escrever',
             amount: 'Montante',
@@ -316,8 +384,9 @@ export default {
             custom: 'Personalizado',
             unverified_contract_source: 'O código fonte deste contrato não foi verificado.',
             click_here: 'Clique aqui',
-            upload_source_files: 'para carregar arquivos de código fonte e verificar este contrato. ' +
-                'Como alternativa, você pode interagir com o contrato usando um ABI arbitrário:',
+            upload_source_files: 'para carregar arquivos de código fonte e verificar este contrato. ',
+            abi_autoloaded: 'Enquanto isso, você pode interagir com o contrato usando nossa ABI predefinida carregada automaticamente.',
+            choose_abi: 'Como alternativa, você pode interagir com o contrato usando uma de nossas ABIs predefinidas ou uma JSON personalizada:',
             use_erc20_abi: 'Usar ABI ERC20',
             use_erc721_abi: 'Usar ABI ERC721',
             use_erc1155_abi: 'Usar ABI ERC1155',
@@ -329,31 +398,115 @@ export default {
             read_functions: 'Funções de leitura',
             write_functions: 'Funções de escrita',
             unverified_contract: 'Contrato não verificado',
+            verified_contract: 'Contrato verificado',
         },
         header: {
-            sign_in: 'Entrar',
-            sign_out: 'Sair',
-            liq_staking: 'Stake líquido',
-            goto_staking: 'Ir para Stake',
-            goto_health_monitor: 'ir para a página de monitoramento de saúde',
-            goto_mainnet: 'Ir para Mainnet',
-            goto_testnet: 'Ir para Testnet',
-            health_monitor: 'Monitoramento de saúde',
-            health_status: 'Estado de saúde',
-            advanced: 'Avançado',
-            light_mode: 'Modo claro',
-            dark_mode: 'Modo escuro',
+            address_copied: 'Endereço copiado para a área de transferência',
             address_not_found: 'A busca pelo endereço EVM vinculado à conta nativa { account } falhou.',
-            search_failed: 'A busca falhou, insira um termo de pesquisa válido.',
-            goto_address_details: 'Ir para detalhes do endereço',
+            api_documentation: 'Documentação da API',
+            blockchain: 'Blockchain',
+            blocks: 'Blocos',
+            connect_wallet: 'Conectar Carteira',
             copy_address: 'Copiar endereço',
-            address_copied: 'Endereço copiado para a área de transferência',
-            search_placeholder: 'Endereço, Tx, Bloco',
-            select_language: 'Selecione o idioma',
+            csv_export: 'Exportar CSV',
+            developers: 'Desenvolvedores',
+            disconnect_wallet_tooltip: 'Desconectar carteir',
+            gas: 'Gas',
+            goto_address_details: 'Ir para detalhes do endereço',
+            health_monitor: 'Monitoramento de saúde',
+            home: 'Início',
+            more: 'Mais',
+            network: 'Rede',
             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',
+            select_language: 'Selecione o idioma',
+            switch_to_dark_theme: 'Mudar para tema escuro',
+            switch_to_light_theme: 'Mudar para tema claro',
+            system_token_price: 'Preço do {token}',
+            telos_ecosystem: 'Ecossistema Telos',
+            telos_evm_logo_alt: 'Logo do Telos EVM',
+            telos_wallet: 'Wallet',
+            telos_bridge: 'Bridge',
+            transactions: 'Transações',
+            verify_contract_sourcify: 'Verificar Contrato (Sourcify)',
+            view_other_networks: 'Visualizar outras redes',
+        },
+        blocks: {
+            block_height: 'Altura do Bloco',
+            timestamp: 'Timestamp',
+            size: 'Tamanho',
+            gas_used: 'Gás Usado',
+            gas_limit: 'Limite de Gás',
+            hash: 'Hash',
+            parent_hash: 'Hash Pai',
+            nonce: 'Nonce',
+            extra_data: 'Dados Extras',
+            extra_data_tooltip: 'Dados extras incluídos no bloco',
+            block_height_tooltip: 'Também chamado de "Número do Bloco". A altura do bloco representa o comprimento da blockchain, aumentando um após a adição de um novo bloco',
+            timestamp_tooltip: 'O momento e data em que o bloco foi produzido',
+            transactions_tooltip: 'O número de transações no bloco. Transações Internas são transações que ocorrem como resultado da execução de contrato e incluem um valor TLOS',
+            size_tooltip: 'a quantidade de dados no bloco, determinada pelo limite de gás',
+            gas_used_tooltip: 'A quantidade de gás usada no bloco',
+            gas_limit_tooltip: 'O limite de gás para todas as transações no bloco',
+            nonce_tooltip: 'O valor usado durante a mineração para alcançar consenso sobre a Prova de Trabalho para o bloco',
+            hash_tooltip: 'O hash do cabeçalho do bloco',
+            parent_hash_tooltip: 'O hash do bloco pai',
+            count_transactions: '{count} transações',
+            count_transaction: '1 transação',
+            in_this_block: 'neste bloco',
+            transactions: 'Transações',
+        },
+        footer: {
+            telos: 'Telos',
+            telos_homepage: 'Página Principal',
+            telos_wallet: 'Carteira Telos',
+            telos_bridge: 'Ponte Telos',
+            telos_zero_explorer: 'Explorador Telos Zero',
+            buy_telos: 'Comprar Telos',
+            stake_telos: 'Apostar Telos',
+            telos_ecosystem: 'Ecossistema Telos',
+            network_status: 'Status da Rede',
+            about: 'Sobre',
+            about_us: 'Sobre nós',
+            contactUs: 'Fale conosco',
+            build: 'Construir',
+            api_documentation: 'Documentação da API',
+            telos_documentation: 'Documentação do Telos',
+            github: 'Github',
+            brand_assets: 'Ativos da Marca',
+            back_to_top: 'Voltar ao topo',
         },
     },
     global: {
+        all: 'Todos',
+        true: 'true',
+        false: 'false',
+        close: 'Close',
+        toggle_fullscreen: 'Toggle fullscreen mode',
+        name: 'Name',
+        symbol: 'Symbol',
+        show_table: 'Show table',
+        show_grid: 'Show grid',
+        records_per_page: 'Records per page:',
+        max_decimals_reached: 'Please use { max } decimal places maximum',
+        erc20_token: 'ERC20 Token',
+        erc721_token: 'ERC721 Token',
+        sign: 'Sign',
+        hours: 'hours',
+        updated: 'Last updated',
+        action: 'Action',
+        wallet_response: 'Awaiting response from your wallet provider',
+        minutes: 'minutes',
+        days: 'days',
+        and: 'and',
+        unknown: 'Unknown',
+        data_behind_by: 'Desculpe-me! Os dados mostrados são atrasados por',
+        not_synced: 'O indexador não está sincronizado com o bloco mais recente',
+        try_reloading: 'Tente recarregar a página para corrigir o problema, Se o problema persistir, entre em contato com um membro da equipe da Telos.',
+        expand: 'Veja mais',
+        error: 'Erro',
+        async_error_description: 'Desculpe! Ocorreu um erro ao tentar solicitar recursos. Verifique se sua conexão com a Internet está funcionando e tente novamente. Se o erro persistir, entre em contato conosco diretamente em nosso canal do Telegram.',
         language: 'Idioma',
         cancel: 'Cancelar',
         ok: 'OK',
@@ -380,16 +533,12 @@ export default {
         error_see_details_label: 'Ver Detalhes',
         error_details_title: 'Detalhes do Erro',
         neutral_message_sending: 'Enviando <b>{quantity}</b> para <b>{address}</b>',
-        neutral_message_staking: 'Depositando <b>{quantity} {symbol}</b>',
-        neutral_message_unstaking: 'Preparando retirada de <b>{quantity} {symbol}</b>',
         neutral_message_revoking: 'Revogando alocação de <b>{symbol}</b> para <b>{address}</b>',
         neutral_message_wrapping: 'Convertendo <b>{quantity} {symbol}</b> para ERC20',
         neutral_message_unwrapping: 'Restaurando <b>{quantity} {symbol}</b>',
         neutral_message_withdrawing: 'Retirando <b>{quantity} {symbol}</b>',
         dont_show_message_again: 'Não mostrar esta mensagem novamente',
         error_message_sending: 'Ocorreu um erro ao enviar <b>{quantity}</b> para <b>{address}</b>',
-        error_message_staking: 'Ocorreu um erro ao depositar <b>{quantity} {symbol}</b>',
-        error_message_unstaking: 'Ocorreu um erro ao preparar a retirada de <b>{quantity} {symbol}</b>',
         error_message_revoking: 'Ocorreu um erro ao revogar a alocação de <b>{symbol}</b> para <b>{address}</b>',
         error_message_wrapping: 'Ocorreu um erro ao converter <b>{quantity} {symbol}</b> para ERC20',
         error_message_unwrapping: 'Ocorreu um erro ao restaurar <b>{quantity} {symbol}</b>',
@@ -404,6 +553,17 @@ export default {
             error_unpredictable_gas_limit: 'Não foi possível estimar o limite de gás para esta transação',
             error_transaction_canceled: 'Você cancelou a ação',
         },
+        words: {
+            day: 'dia',
+            days: 'dias',
+            hour: 'hora',
+            hours: 'horas',
+            minute: 'minuto',
+            minutes: 'minutos',
+            second: 'segundo',
+            seconds: 'segundos',
+            time_ago: 'Há {time}',
+        },
     },
     temporal: {
         telos_cloud_discontinued_title: 'Importante',
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 7770b7d58..a80d1f634 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,119 +1,244 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup lang="ts">
+import {
+    computed,
+    onBeforeMount,
+    onMounted,
+    ref,
+} from 'vue';
+import { useRoute } from 'vue-router';
+import { useQuasar } from 'quasar';
 
 import AppHeader from 'components/header/AppHeader.vue';
-import FooterMain from 'components/Footer.vue';
-
-import { stlos } from 'src/lib/logos.js';
-
-export default {
-    name: 'MainLayout',
-    components: {
-        AppHeader,
-        FooterMain,
-    },
-    data() {
-        return {
-            stlosLogo: stlos,
-            mainnet: process.env.NETWORK_EVM_CHAIN_ID === 40,
-            accountConnected: false,
-            drawer: false,
-        };
-    },
-    computed: {
-        ...mapGetters('login', [
-            'isLoggedIn',
-            'isNative',
-            'address',
-            'nativeAccount',
-        ]),
-        onHomePage() {
-            return this.$route.name === 'home';
-        },
-    },
-    async mounted(){
-        this.removeOldAngularCache();
-    },
-    created() {
-        this.$q.dark.set(localStorage.getItem('darkModeEnabled') !== 'false');
-    },
-    methods: {
-        removeOldAngularCache() {
-            // the old hyperion explorer hosted at teloscan.io had this stubborn cache that won't go away on it's own,
-            // this should remove it
-            if(window.navigator && navigator.serviceWorker) {
-                navigator.serviceWorker.getRegistrations()
-                    .then(function(registrations) {
-                        for(let registration of registrations) {
-                            registration.unregister();
-                        }
-                    });
-            }
-        },
-    },
-};
+import FooterMain from 'components/FooterMain.vue';
+
+import { getBrowserName } from 'src/lib/utils';
+
+const $route = useRoute();
+const $q = useQuasar();
+
+const scrollY = ref(0);
+const footerHeight = ref(0);
+const margin = ref(50);
+
+const onHomePage = computed(() => $route.name === 'home');
+
+onBeforeMount(() => {
+    $q.dark.set(localStorage.getItem('darkModeEnabled') !== 'false');
+});
+
+onMounted(() => {
+    if ($q.screen.width > 500) {
+        footerHeight.value = document.getElementById('footer')?.offsetHeight || 0;
+    }
+});
+
+function toTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+    });
+}
+
+function scrollHandler() {
+    scrollY.value = window.scrollY;
+}
+
+function showBackToTop() {
+    return scrollY.value > 300 &&
+    scrollY.value < document.documentElement.scrollHeight - window.innerHeight - footerHeight.value + margin.value;
+}
+
 </script>
 
 <template>
-<AppHeader />
-<q-layout view="lhh Lpr lFf ">
-    <div :class="`banner ${onHomePage ? 'home' : ''}`" ></div>
+<q-layout view="hhh lpr fff" :class="`c-main-layout ${getBrowserName()}`">
+    <div class="c-main-layout__background-container">
+        <div class="c-main-layout__background-top">
+            <div class="c-main-layout__background-circle c-main-layout__background-circle--1"></div>
+            <div class="c-main-layout__background-circle c-main-layout__background-circle--2"></div>
+        </div>
+        <div class="c-main-layout__background-bottom"></div>
+    </div>
+
+    <q-header elevated>
+        <AppHeader />
+    </q-header>
 
-    <q-page-container class="flex flex-center page-container">
+    <q-page-container
+        :class="{
+            'flex flex-center c-main-layout__page-container': true,
+            'c-main-layout__page-container--home': onHomePage,
+        }"
+    >
         <router-view />
     </q-page-container>
-    <FooterMain />
+
+    <q-footer>
+        <FooterMain id="footer" class="c-main-layout__footer" />
+    </q-footer>
+
+    <transition
+        appear
+        enter-active-class="animated fadeIn"
+        leave-active-class="animated fadeOut"
+    >
+        <q-btn
+            v-if="showBackToTop()"
+            round
+            class="c-main-layout__scroll-up shadow-4"
+            icon="fas fa-chevron-up"
+            :text-color="$q.dark.isActive ? 'white' : 'primary'"
+            :color="$q.dark.isActive ? 'primary' : 'white'"
+            @click="toTop"
+        />
+    </transition>
 </q-layout>
+<q-scroll-observer @scroll="scrollHandler" />
 </template>
 
-<style lang="sass" scoped>
-.page-container
-    margin-top: 48px
-    @media screen and (min-width: $breakpoint-lg-min)
-        margin-top: 96px
-
-
-.separator
-  border-bottom: 1px solid lightgrey
-
-.banner
-  z-index: -1
-  height: 40vh
-  position: absolute
-  left: 0
-  right: 0
-  top: 0
-  background: linear-gradient(180deg, rgb(37,42,94) 0%, rgba(45,70,132) 60%, transparent 99%)
-  &.home
-    height: 50vh
-
-.connection
-  font-size: .5rem
-  margin-right: 0.2rem
-
-.q-item
-    .q-icon
-        transition: 400ms color ease
-
-.q-item:hover
-    .grayscale
-        filter: grayscale(0)
-    .q-icon
-        color: $secondary
-
-.account
-  width: 120px
-  white-space: nowrap
-  overflow: hidden
-  text-overflow: ellipsis
-
-.q-header
-  position: relative
-
-@media only screen and (max-width: 400px)
-    #logo
-        .text-h5
-            font-size: 1.1rem
-        img
-            width: 24px
+<style lang="scss" scoped>
+
+.c-main-layout {
+    --faint-circle-color: rgba(255, 255, 255, 0.1);
+
+    body.body--dark & {
+        --faint-circle-color: rgba(100, 100, 100, 0.1);
+    }
+
+    &__background-container {
+        position: fixed;
+        z-index: -1;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(var(--q-primary), 0.04);
+
+        body.body--dark & {
+            background-color: rgb(28, 28, 28);
+            opacity: 1;
+        }
+    }
+
+    &__background-top,
+    &__background-bottom {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-position: center center;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+    }
+
+    &__background-top {
+        top: 0;
+        height: 320px;
+        overflow: hidden;
+        background-image:
+        radial-gradient(circle at 0% 170%, $secondary, transparent 45%),
+            radial-gradient(circle at 100% 130%, $secondary, transparent 30%),
+            radial-gradient(circle at 100% 0%, var(--q-primary), transparent 30%),
+            radial-gradient(circle at 50% 20%, $accent, transparent 70%);
+
+        @media screen and (min-width: $breakpoint-sm-min) {
+            background-image:
+            radial-gradient(circle at 0% 170%, $secondary, transparent 45%),
+            radial-gradient(circle at 100% 130%, $secondary, transparent 30%),
+            radial-gradient(circle at 100% 0%, var(--q-primary), transparent 30%),
+            radial-gradient(circle at 50% 20%, $accent, transparent 70%)
+        }
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            height: 400px;
+
+            background-image:
+            radial-gradient(circle at 0% 170%, $secondary, transparent 45%),
+            radial-gradient(circle at 100% 130%, $secondary, transparent 30%),
+            radial-gradient(circle at 100% 0%, var(--q-primary), transparent 30%),
+            radial-gradient(circle at 50% 20%, $accent, transparent 70%)
+        }
+
+        @media screen and (min-width: $breakpoint-lg-min) {
+            background-image:
+                radial-gradient(circle at 0% 170%, $secondary, transparent 40%),
+                radial-gradient(circle at 100% 140%, $secondary, transparent 20%),
+                radial-gradient(circle at 100% 0%, var(--q-primary), transparent 20%),
+                radial-gradient(circle at 50% 20%, $accent, transparent 90%)
+        }
+    }
+
+    &__background-bottom {
+        top: 30vh;
+        height: 70vh;
+
+        background-image:
+            radial-gradient(circle at 112% 75%, $accent, transparent 20%),
+                radial-gradient(circle at 98% 100%, var(--q-primary), transparent 20%);
+
+        @media screen and (min-width: $breakpoint-lg-min) {
+            background-image:
+                radial-gradient(circle at 112% 75%, $accent, transparent 20%),
+                radial-gradient(circle at 98% 100%, var(--q-primary), transparent 20%);
+        }
+    }
+
+    &__background-circle {
+        position: absolute;
+        content: "";
+        border-radius: 100%;
+        border: 32px solid var(--faint-circle-color);
+
+        &--1 {
+            top: -12vh;
+            right: -16vh;
+            width: 45vh;
+            height: 45vh;
+        }
+
+        &--2 {
+            display: none;
+
+            @media screen and (min-width: $breakpoint-md-min) {
+                display: block;
+                top: -50%;
+                right: 0;
+                left: 0;
+                width: 45vh;
+                height: 45vh;
+                margin: 0 auto;
+            }
+        }
+    }
+
+    &__page-container {
+        $stacked-header-height: calc(var(--top-bar-height) + var(--bottom-bar-height));
+
+        margin: $stacked-header-height 12px 0;
+
+        &--home {
+            margin-top: var(--bottom-bar-height);
+
+            @media screen and (min-width: $breakpoint-md-min) {
+                margin-top: $stacked-header-height;
+            }
+        }
+    }
+
+    &__footer {
+        margin-top: 40px;
+        @media screen and (min-width: $breakpoint-md-min) {
+            margin-top: 65px;
+        }
+    }
+
+    &__scroll-up {
+        position: fixed;
+        bottom: 24px;
+        right: 24px;
+        z-index: 2001;
+    }
+}
 </style>
diff --git a/src/lib/Contract.js b/src/lib/Contract.js
deleted file mode 100644
index 05088f7dc..000000000
--- a/src/lib/Contract.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/* eslint-disable */
-
-import { ethers } from "ethers";
-import { markRaw } from 'vue';
-import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
-
-export default class Contract {
-
-  constructor({address, creationInfo, name, abi, manager, token, verified = false}) {
-    this.address = address
-    this.name = name
-    this.abi = abi
-    this.manager = manager;
-    if (abi){
-      this.iface = markRaw(new ethers.utils.Interface(abi));
-    }
-    if (token){
-      this.token = token;
-    }
-    this.verified = verified;
-    this.sources = [];
-    this.creationInfo = creationInfo;
-  }
-
-  getName() {
-    return this.name;
-  }
-
-  setVerified(status) {
-    this.verified = status;
-  }
-
-  isVerified() {
-    return this.verified;
-  }
-
-  getCreationTrx() {
-    if (!this.creationInfo)
-      return;
-
-    return this.creationInfo.creation_trx;
-  }
-
-  getCreator() {
-    if (!this.creationInfo)
-      return;
-
-    return this.creationInfo.creator;
-  }
-
-  getContractInstance(provider, createNew=false) {
-    if (!this.abi){
-      console.log("Cannot create contract instance without ABI!");
-      return;
-    }
-
-    if (!this.contract || createNew){
-      this.contract = new ethers.Contract(this.address, this.abi, provider ? provider : this.manager.getEthersProvider());
-    }
-    return this.contract;
-  }
-
-  async parseTransaction(data) {
-    if (this.iface) {
-      try {
-
-        return await this.iface.parseTransaction({data});
-      } catch (e) {
-        console.log(`Failed to parse transaction data ${data} using abi for ${this.address}`);
-      }
-    }
-    try {
-      // this functionIface is an interface for a single function signature as discovered via 4bytes.directory... only use it for this function
-      const functionIface = await this.manager.getFunctionIface(data);
-      if (functionIface) {
-        return functionIface.parseTransaction({data});
-      }
-    } catch (e) {
-      console.error(`Failed to parse transaction data ${data} using abi for ${this.address}`);
-    }
-  }
-
-  formatLog(log, parsedLog){
-    if(!parsedLog.signature) return log;
-    parsedLog.function_signature = log.topics[0].substr(0, 10);
-    parsedLog.isTransfer = TRANSFER_SIGNATURES.includes(parsedLog.function_signature);
-    parsedLog.logIndex = log.logIndex;
-    parsedLog.address = log.address;
-    parsedLog.token = this.token;
-    parsedLog.name = parsedLog.signature;
-    return parsedLog;
-  }
-
-  async parseLogs(logsArray) {
-    if (this.iface) {
-      let parsedArray = await Promise.all(logsArray.map(async (log) => {
-        try {
-          let parsedLog = this.iface.parseLog(log);
-          parsedLog = this.formatLog(log, parsedLog);
-          return parsedLog;
-        } catch (e) {
-          return await this.parseEvent(log);
-        }
-      }));
-      parsedArray.forEach(parsed => {
-        if(parsed.name && parsed.eventFragment?.inputs){
-          parsed.inputs = parsed.eventFragment.inputs;
-        }
-      })
-      return parsedArray;
-    }
-
-
-    return await Promise.all(logsArray.map(async log => {
-      let parsedLog = await this.parseEvent(log);
-      if(parsedLog.name && parsedLog.eventFragment?.inputs){
-        parsedLog.inputs = parsedLog.eventFragment.inputs;
-      }
-      return parsedLog;
-    }))
-  }
-
-  async parseEvent(log){
-    const eventIface = await this.manager.getEventIface(log.topics[0]);
-    if (eventIface) {
-      try {
-        let parsedLog = eventIface.parseLog(log);
-        parsedLog = this.formatLog(log, parsedLog);
-        return parsedLog;
-      } catch(e) {
-        console.log(`Failed to parse log ${log.logIndex} from event interface`)
-      }
-    }
-    return log;
-  }
-
-}
diff --git a/src/lib/ContractManager.js b/src/lib/ContractManager.js
deleted file mode 100644
index 3bec201a7..000000000
--- a/src/lib/ContractManager.js
+++ /dev/null
@@ -1,332 +0,0 @@
-import Contract from 'src/lib/Contract';
-import { ethers } from 'ethers';
-import functions_overrides from 'src/lib/abi/signature/functions_signatures_overrides.json';
-import events_overrides from 'src/lib/abi/signature/events_signatures_overrides.json';
-import { Web3 } from 'web3';
-import axios from 'axios';
-import erc20Abi from 'erc-20-abi';
-import { erc721Abi, erc1155Abi, erc721MetadataAbi, supportsInterfaceAbi } from 'src/lib/abi';
-import { toChecksumAddress } from 'src/lib/utils';
-import { ERC1155_TRANSFER_SIGNATURE } from 'src/lib/abi/signature/transfer_signatures.js';
-
-const contractsBucket = axios.create({
-    baseURL: `https://${process.env.VERIFIED_CONTRACTS_BUCKET}.s3.amazonaws.com`,
-});
-
-const tokenList = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/telosevm.tokenlist.json';
-export default class ContractManager {
-
-    constructor(evmEndpoint) {
-        this.tokenList = null;
-        this.contracts = {};
-        this.functionInterfaces = functions_overrides;
-        this.eventInterfaces = events_overrides;
-        this.evmEndpoint = evmEndpoint;
-        this.web3 = new Web3(process.env.NETWORK_EVM_RPC);
-        this.ethersProvider = new ethers.providers.JsonRpcProvider(process.env.NETWORK_EVM_RPC);
-    }
-
-    async init() {
-        await this.loadTokenList();
-    }
-
-    getWeb3Provider() {
-        return this.web3;
-    }
-
-    getEthersProvider() {
-        return this.ethersProvider;
-    }
-    async getFunctionIface(data) {
-        let prefix = data.toLowerCase().slice(0, 10);
-        if (Object.prototype.hasOwnProperty.call(this.functionInterfaces, prefix)) {
-            return new ethers.utils.Interface([this.functionInterfaces[prefix]]);
-        }
-
-        try {
-            const abiResponse = await this.evmEndpoint.get(`/v2/evm/get_abi_signature?type=function&hex=${prefix}`);
-            if (abiResponse) {
-                if (!abiResponse.data || !abiResponse.data.text_signature || abiResponse.data.text_signature === '') {
-                    console.error(`Unable to find function signature for sig: ${prefix}`);
-                    return;
-                }
-                this.functionInterfaces[prefix] = `function ${abiResponse.data.text_signature}`;
-                return new ethers.utils.Interface([this.functionInterfaces[prefix]]);
-            }
-        } catch (e) {
-            console.error(`Error trying to find event signature for function ${prefix}`);
-            return;
-        }
-    }
-    async loadTokenMetadata(address, token, tokenId){
-        if(token.type === 'erc1155'){
-            const contract = await this.getContractFromAbi(address, erc1155Abi);
-            token.metadata = await contract.uri(tokenId);
-        } else {
-            const contract = await this.getContractFromAbi(address, erc721MetadataAbi);
-            token.metadata = await contract.tokenURI(tokenId);
-        }
-        token.metadata = token.metadata.replace('ipfs://', 'https://cloudflare-ipfs.com/ipfs/');
-
-        return token;
-    }
-
-    getTokenTypeFromLog(log){
-        let sig = log.topics[0].substr(0, 10);
-        let type = (log.topics.length === 4) ? 'erc721' : 'erc20';
-        return (sig === ERC1155_TRANSFER_SIGNATURE) ? 'erc1155' : type;
-    }
-    async getEventIface(data) {
-        let prefix = data.toLowerCase().slice(0, 10);
-        if (Object.prototype.hasOwnProperty.call(this.eventInterfaces, prefix)) {
-            return new ethers.utils.Interface([this.eventInterfaces[prefix]]);
-        }
-
-        try {
-            const abiResponse = await this.evmEndpoint.get(`/v2/evm/get_abi_signature?type=event&hex=${data}`);
-            if (abiResponse) {
-                if (!abiResponse.data || !abiResponse.data.text_signature || abiResponse.data.text_signature === '') {
-                    console.error(`Unable to find event signature for event: ${data}`);
-                    return;
-                }
-
-                this.eventInterfaces[data] = `event ${abiResponse.data.text_signature}`;
-                return new ethers.utils.Interface([this.eventInterfaces[data]]);
-            }
-        } catch (e) {
-            console.error(`Error trying to find event signature for event ${data}: ${e.message}`);
-            return;
-        }
-    }
-
-    async getContractCreation(address) {
-        if (!address) {
-            return;
-        }
-        try {
-            const v2ContractResponse = await this.evmEndpoint.get(`/v2/evm/get_contract?contract=${address}`);
-            return v2ContractResponse.data;
-        } catch (e) {
-            console.error(e.message);
-        }
-    }
-
-    // suspectedToken is so we don't try to check for ERC20 info via eth_call unless we think this is a token...
-    // this is coming from the token transfer, transactions table & transaction (general + logs tabs) pages where we're
-    // looking for a contract based on a token transfer event
-    // handles erc721 & erc20 (w/ stubs for erc1155)
-    async getContract(address, suspectedToken) {
-        if (!address) {
-            return;
-        }
-        const addressLower = address.toLowerCase();
-
-        // Get from already queried contracts, add token data if needed & not present
-        // (ie: queried beforehand w/o suspectedToken or a wrong suspectedToken)
-        if (this.contracts[addressLower]) {
-            if (
-                !suspectedToken ||
-                this.contracts[addressLower].token && this.contracts[addressLower].token.type === suspectedToken
-            ) {
-                return this.contracts[addressLower];
-            }
-        }
-
-        const creationInfo = await this.getContractCreation(addressLower);
-
-        const metadata = await this.checkBucket(address);
-        if (metadata) {
-            return await this.getVerifiedContract(addressLower, metadata, creationInfo, suspectedToken);
-        }
-
-        // TODO: there's some in this list that are not ERC20... they have extra stuff like the Swapin method
-        const contract = await this.getContractFromTokenList(address, creationInfo, suspectedToken);
-        if (contract) {
-            this.contracts[addressLower] = contract;
-            return contract;
-        }
-
-        if (suspectedToken) {
-            const tokenData = await this.getTokenData(address, suspectedToken);
-            if (tokenData) {
-                return await this.getTokenContract(addressLower, tokenData, creationInfo);
-            }
-        }
-
-        return await this.getEmptyContract(addressLower, creationInfo);
-    }
-
-    async checkBucket(address) {
-        let checksumAddress = toChecksumAddress(address);
-        try {
-            let responseData = (await contractsBucket.get(`${checksumAddress}/metadata.json`)).data;
-            return JSON.parse(responseData.content);
-        } catch (e) {
-            console.log(e);
-            return false;
-        }
-    }
-
-    async getVerifiedContract(address, metadata, creationInfo, suspectedType) {
-        let token = await this.getToken(address, suspectedType);
-        if(token){
-            token.type = suspectedType;
-            token.address = address;
-        }
-
-        const contract = new Contract({
-            name: Object.values(metadata.settings.compilationTarget)[0],
-            address,
-            abi: metadata.output.abi,
-            manager: this,
-            token: token,
-            creationInfo,
-            verified: true,
-        });
-        this.contracts[address] = contract;
-        return contract;
-    }
-
-    async getTokenContract(address, tokenData, creationInfo) {
-        const contract = new Contract({
-            name: tokenData.symbol ? `${tokenData.name} (${tokenData.symbol})` : tokenData.name,
-            address,
-            abi: this.getTokenABI(tokenData.type),
-            manager: this,
-            creationInfo,
-            token: Object.assign({
-                address,
-            }, tokenData),
-        });
-
-        this.contracts[address] = contract;
-        return contract;
-    }
-
-    async getEmptyContract(address, creationInfo) {
-        const contract = new Contract({
-            name: `0x${address.slice(0, 16)}...`,
-            address,
-            creationInfo,
-            abi: undefined,
-            manager: this,
-        });
-        this.contracts[address] = contract;
-        return contract;
-    }
-
-    async supportsInterface(address, iface){
-        const contract = new ethers.Contract(address, supportsInterfaceAbi, this.getEthersProvider());
-        try {
-            return await contract.supportsInterface(iface);
-        } catch (e) {
-            // Contract does not support interface, not necessarly an error
-            return false;
-        }
-    }
-
-    async isTokenType(address, type){
-        if(typeof type === 'undefined'){
-            return false;
-        } else if(type === 'erc721'){
-            if(!await this.supportsInterface(address, '0x80ac58cd')){
-                return false;
-            }
-        } else if(type === 'erc1155') {
-            if(!await this.supportsInterface(address, '0xd9b67a26')){
-                return false;
-            }
-        }
-        return type;
-    }
-
-    getTokenABI(type){
-        if(type === 'erc721'){
-            return erc721Abi;
-        } else if(type === 'erc1155'){
-            return erc1155Abi;
-        }
-        return erc20Abi;
-    }
-
-    async getContractFromAbi(address, abi){
-        return  new ethers.Contract(address, abi, this.getEthersProvider());
-    }
-
-    async getTokenData(address, suspectedType) {
-        const type = await this.isTokenType(address, suspectedType);
-        if(type === false){
-            return;
-        }
-        const contract = new ethers.Contract(address, this.getTokenABI(type), this.getEthersProvider());
-        try {
-            let tokenData = {};
-            if (type === 'erc20') {
-                tokenData.symbol = await contract.symbol();
-                tokenData.name = await contract.name();
-                tokenData.decimals = await contract.decimals();
-            } else if(type === 'erc721'){
-                tokenData.symbol = await contract.symbol();
-                tokenData.name = await contract.name();
-                tokenData.extensions = {
-                    metadata: await this.supportsInterface(address, '0x5b5e139f'),
-                };
-            } else if(type === 'erc1155'){
-                tokenData.name = contract.name || contract.address;
-                tokenData.extensions = {
-                    metadata: await this.supportsInterface(address, '0x0e89341c'),
-                };
-            }
-
-            tokenData.type = type;
-            return tokenData;
-        } catch (e) {
-            return;
-        }
-    }
-
-    async loadTokenList() {
-        const results = await axios.get(tokenList);
-        const { tokens } = results.data;
-        results.data.tokens = (tokens ?? []).filter(({ chainId }) => chainId === +process.env.NETWORK_EVM_CHAIN_ID);
-
-        this.tokenList = results.data;
-    }
-
-    async getTokenList() {
-        if (!this.tokenList) {
-            await this.loadTokenList();
-        }
-        return this.tokenList;
-    }
-
-    async getToken(address, suspectedType) {
-        if (!this.tokenList) {
-            await this.loadTokenList();
-        }
-
-        let i = this.tokenList.tokens.length;
-        while (i--) {
-            if (this.tokenList.tokens[i].address.toLowerCase() === address.toLowerCase()) {
-                return this.tokenList.tokens[i];
-            }
-        }
-        return await this.getTokenData(address, suspectedType);
-    }
-
-    async getContractFromTokenList(address, creationInfo, suspectedType) {
-        const token = await this.getToken(address, suspectedType);
-        if (token) {
-            return new Contract({
-                name: `${token.name} (${token.symbol})`,
-                address,
-                creationInfo,
-                abi: this.getTokenABI(token.type),
-                manager: this,
-                token: Object.assign({
-                    address,
-                }, token),
-            });
-        }
-    }
-}
diff --git a/src/lib/abi/multicall.js b/src/lib/abi/multicall.js
new file mode 100644
index 000000000..5bcfc40f7
--- /dev/null
+++ b/src/lib/abi/multicall.js
@@ -0,0 +1,309 @@
+export const multicallAbi = [
+    {
+        'inputs': [{
+            'components': [
+                {
+                    'internalType':'address',
+                    'name':'target',
+                    'type':'address',
+                },
+                {
+                    'internalType':'bytes',
+                    'name':'callData',
+                    'type':'bytes',
+                },
+            ],
+            'internalType':'struct Multicall2.Call[]',
+            'name':'calls',
+            'type':'tuple[]',
+        }],
+        'name':'aggregate',
+        'outputs':[
+            {
+                'internalType':'uint256',
+                'name':'blockNumber',
+                'type':'uint256',
+            },
+            {
+                'internalType':'bytes[]',
+                'name':'returnData',
+                'type':'bytes[]',
+            },
+        ],
+        'stateMutability':'nonpayable',
+        'type':'function',
+    },
+    {
+        'inputs': [{
+            'components': [
+                {
+                    'internalType':'address',
+                    'name':'target',
+                    'type':'address',
+                },
+                {
+                    'internalType':'bytes',
+                    'name':'callData',
+                    'type':'bytes',
+                },
+            ],
+            'internalType':'struct Multicall2.Call[]',
+            'name':'calls',
+            'type':'tuple[]',
+        }],
+        'name':'blockAndAggregate',
+        'outputs':[
+            {
+                'internalType':'uint256',
+                'name':'blockNumber',
+                'type':'uint256',
+            },
+            {
+                'internalType':'bytes32',
+                'name':'blockHash',
+                'type':'bytes32',
+            },
+            {
+                'components':[
+                    {
+                        'internalType':'bool',
+                        'name':'success',
+                        'type':'bool',
+                    },
+                    {
+                        'internalType':'bytes',
+                        'name':'returnData',
+                        'type':'bytes',
+                    },
+                ],
+                'internalType':'struct Multicall2.Result[]',
+                'name':'returnData',
+                'type':'tuple[]',
+            },
+        ],
+        'stateMutability':'nonpayable',
+        'type':'function',
+    },
+    {
+        'inputs':[
+            {
+                'internalType':'uint256',
+                'name':'blockNumber',
+                'type':'uint256',
+            },
+        ],
+        'name':'getBlockHash',
+        'outputs':[
+            {
+                'internalType':'bytes32',
+                'name':'blockHash',
+                'type':'bytes32',
+            },
+        ],
+        'stateMutability':'view',
+        'type':'function',
+    },
+    {
+        'inputs':[],
+        'name':'getBlockNumber',
+        'outputs':[
+            {
+                'internalType':'uint256',
+                'name':'blockNumber',
+                'type':'uint256',
+            },
+        ],
+        'stateMutability':'view',
+        'type':'function',
+    },
+    {
+        'inputs':[],
+        'name':'getCurrentBlockCoinbase',
+        'outputs':[
+            {
+                'internalType':'address',
+                'name':'coinbase',
+                'type':'address',
+            },
+        ],
+        'stateMutability':'view',
+        'type':'function',
+    },
+    {
+        'inputs':[],
+        'name':'getCurrentBlockDifficulty',
+        'outputs':[
+            {
+                'internalType':'uint256',
+                'name':'difficulty',
+                'type':'uint256',
+            },
+        ],
+        'stateMutability':'view',
+        'type':'function',
+    },
+    {
+        'inputs':[],
+        'name':'getCurrentBlockGasLimit',
+        'outputs':[
+            {
+                'internalType':'uint256',
+                'name':'gaslimit',
+                'type':'uint256',
+            },
+        ],
+        'stateMutability':'view',
+        'type':'function',
+    },
+    {
+        'inputs':[],
+        'name':'getCurrentBlockTimestamp',
+        'outputs':[
+            {
+                'internalType':'uint256',
+                'name':'timestamp',
+                'type':'uint256',
+            },
+        ],
+        'stateMutability':'view',
+        'type':'function',
+    },
+    {
+        'inputs':[
+            {
+                'internalType':'address',
+                'name':'addr',
+                'type':'address',
+            },
+        ],
+        'name':'getEthBalance',
+        'outputs':[
+            {
+                'internalType':'uint256',
+                'name':'balance',
+                'type':'uint256',
+            },
+        ],
+        'stateMutability':'view',
+        'type':'function',
+    },
+    {
+        'inputs':[],
+        'name':'getLastBlockHash',
+        'outputs':[
+            {
+                'internalType':'bytes32',
+                'name':'blockHash',
+                'type':'bytes32',
+            },
+        ],
+        'stateMutability':'view',
+        'type':'function',
+    },
+    {
+        'inputs':[
+            {
+                'internalType':'bool',
+                'name':'requireSuccess',
+                'type':'bool',
+            },
+            {
+                'components':[
+                    {
+                        'internalType':'address',
+                        'name':'target',
+                        'type':'address',
+                    },
+                    {
+                        'internalType':'bytes',
+                        'name':'callData',
+                        'type':'bytes',
+                    },
+                ],
+                'internalType':'struct Multicall2.Call[]',
+                'name':'calls',
+                'type':'tuple[]',
+            },
+        ],
+        'name':'tryAggregate',
+        'outputs':[
+            {
+                'components':[
+                    {
+                        'internalType':'bool',
+                        'name':'success',
+                        'type':'bool',
+                    },
+                    {
+                        'internalType':'bytes',
+                        'name':'returnData',
+                        'type':'bytes',
+                    },
+                ],
+                'internalType':'struct Multicall2.Result[]',
+                'name':'returnData',
+                'type':'tuple[]',
+            },
+        ],
+        'stateMutability':'nonpayable',
+        'type':'function',
+    },
+    {
+        'inputs':[
+            {
+                'internalType':'bool',
+                'name':'requireSuccess',
+                'type':'bool',
+            },
+            {
+                'components':[
+                    {
+                        'internalType':'address',
+                        'name':'target',
+                        'type':'address',
+                    },
+                    {
+                        'internalType':'bytes',
+                        'name':'callData',
+                        'type':'bytes',
+                    },
+                ],
+                'internalType':'struct Multicall2.Call[]',
+                'name':'calls',
+                'type':'tuple[]',
+            },
+        ],
+        'name':'tryBlockAndAggregate',
+        'outputs':[
+            {
+                'internalType':'uint256',
+                'name':'blockNumber',
+                'type':'uint256',
+            },
+            {
+                'internalType':'bytes32',
+                'name':'blockHash',
+                'type':'bytes32',
+            },
+            {
+                'components':[
+                    {
+                        'internalType':'bool',
+                        'name':'success',
+                        'type':'bool',
+                    },
+                    {
+                        'internalType':'bytes',
+                        'name':'returnData',
+                        'type':'bytes',
+                    },
+                ],
+                'internalType':'struct Multicall2.Result[]',
+                'name':'returnData',
+                'type':'tuple[]',
+            },
+        ],
+        'stateMutability':'nonpayable',
+        'type':'function',
+    },
+];
diff --git a/src/lib/abi/signature/approval_signatures.js b/src/lib/abi/signature/approval_signatures.js
new file mode 100644
index 000000000..64672df90
--- /dev/null
+++ b/src/lib/abi/signature/approval_signatures.js
@@ -0,0 +1,5 @@
+export const ERC_APPROVAL_SIGNATURE = '0x8c5be1e5';
+export const ERC_APPROVAL_ALL_SIGNATURE = '0x17307eab';
+export const APPROVAL_SIGNATURES = [
+    ERC_APPROVAL_SIGNATURE, ERC_APPROVAL_ALL_SIGNATURE,
+];
diff --git a/src/lib/abi/signature/events_signatures_overrides.json b/src/lib/abi/signature/events_signatures_overrides.json
index 968a9755a..7d7640dfc 100644
--- a/src/lib/abi/signature/events_signatures_overrides.json
+++ b/src/lib/abi/signature/events_signatures_overrides.json
@@ -1,24 +1,143 @@
 {
-  "0xddf252ad": "event Transfer(address indexed from, address indexed to, uint256 value)",
-  "0x8c5be1e5": "event Approval(address indexed owner, address indexed spender, uint256 value)",
-  "0x71bab65c": "event Harvest(address indexed sender, uint256 performanceFee, uint256 callFee)",
-  "0x884edad9": "event Withdraw(address indexed user, uint256 amount)",
-  "0xf279e6a1": "event Withdraw(address indexed user, uint256 indexed pid, uint256 amount)",
-  "0x90890809": "event Deposit(address indexed user, uint256 indexed pid, uint256 amount)",
-  "0xe1fffcc4": "event Deposit(address indexed sender, uint256 value)",
-  "0x4c209b5f": "event Mint(address indexed sender, uint256 amount0, uint256 amount1)",
-  "0xd78ad95f": "event Swap(address indexed sender, uint256 amount0In, uint256 amount1In, uint256 amount0Out, uint256 amount1Out, address indexed to)",
-  "0xa2c38e2d": "event Claim(address indexed account, uint256 amount, bool indexed automatic)",
-  "0xee503bee": "event DividendWithdrawn(address indexed to, uint256 weiAmount)",
-  "0x38567aa9": "event NewTransmission(uint32 indexed aggregatorRoundId, int192 answer, address transmitter, uint32 observationsTimestamp)",
-  "0x0109fc6f": "event NewRound(uint256 indexed roundId, address indexed startedBy, uint256 startedAt)",
-  "0x0559884f": "event AnswerUpdated(int256 indexed current, uint256 indexed roundId, uint256 updatedAt)",
-  "0x1c411e9a": "event Sync(uint112 reserve0, uint112 reserve1)",
-  "0x5beea7b3": "event EvInventoryUpdate(uint256 indexed id, tuple(address,address,address,uint256,uint256,uint256,uint8,uint8) inventory)",
-  "0x8be0079c": "event OwnershipTransferred(address previousOwner, address newOwner)",
-  "0x34fcbac0": "event Claim(address indexed user, uint256 indexed pid, uint256 amount)",
-  "0xda919360": "event BorrowAllowanceDelegated(address indexed fromUser, address indexed toUser, address asset, uint256 amount)",
-  "0xdccd412f": "event Burn(address indexed sender, uint256 amount0, uint256 amount1, address indexed to)",
-  "0x4a39dc06": "event TransferBatch(address indexed operator, address indexed from, address indexed to, uint256[] ids,uint256[] amounts)",
-  "0xc3d58168": "event TransferSingle(address indexed operator, address indexed from, address indexed to, uint256 id, uint256 amount)"
+  "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef": "event Transfer(address indexed from, address indexed to, uint256 value)",
+  "0x44bd20a79e993bdcc7cbedf54a3b4d19fb78490124b6b90d04fe3242eea579e8": "event Burn(address indexed user, uint256 amount, uint256 currentBalance, uint256 balanceIncrease, uint256 avgStableRate, uint256 newTotalSupply)",
+  "0x8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925": "event Approval(address indexed owner, address indexed spender, uint256 value)",
+  "0x71bab65ced2e5750775a0613be067df48ef06cf92a496ebf7663ae0660924954": "event Harvest(address indexed sender, uint256 performanceFee, uint256 callFee)",
+  "0x04afd2ce457d973046bd54f5d7d36368546da08b88be1bca8ae50e32b451da17": "event Multisended(uint256 total, address tokenAddress)",
+  "0x884edad9ce6fa2440d8a54cc123490eb96d2768479d49ff9c7366125a9424364": "event Withdraw(address indexed user, uint256 amount)",
+  "0x9d9af8e38d66c62e2c12f0225249fd9d721c54b83f48d9352c97c6cacdcb6f31": "event OrderFulfilled(bytes32 orderHash, address indexed offerer, address indexed zone, address recipient, (uint8,address,uint256,uint256)[] offer, (uint8,address,uint256,uint256,address)[] consideration)",
+  "0x97116cf6cd4f6412bb47914d6db18da9e16ab2142f543b86e207c24fbd16b23a": "event LogAnySwapOut(address indexed token, address indexed from, address indexed to, uint256 amount, uint256 fromChainID, uint256 toChainID)",
+  "0x409e0ad946b19f77602d6cf11d59e1796ddaa4828159a0b4fb7fa2ff6b161b79": "event LogAnySwapOut(address indexed token, address indexed from, string to, uint256 amount, uint256 fromChainID, uint256 toChainID)",
+  "0xaac9ce45fe3adf5143598c4f18a369591a20a3384aedaf1b525d29127e1fcd55": "event LogAnySwapIn(bytes32 indexed txhash, address indexed token, address indexed to, uint256 amount, uint256 fromChainID, uint256 toChainID)",
+  "0xa9f3ca5f8a9e1580edb2741e0ba560084ec72e0067ba3423f9e9327a176882db": "event Abstained (uint256 tokenId, uint256 weight)",
+  "0x257b6e0c207001c05b4f0f88a5bc913e2c47513ab9989881a48ceea263b2a721": "event CreateRound(uint256 roundId)",
+  "0x939f42374aa9bf1d8d8cd56d8a9110cb040cd8dfeae44080c6fcf2645e51b452": "event StartRound(uint256 roundId)",
+  "0x2c46d8d5cabadbc3b7c8644a09e45c97988bd5ee29b298d282a7ef8c1833d912": "event EndRound(uint256 roundId)",
+  "0x7084f5476618d8e60b11ef0d7d3f06914655adb8793e28ff7f018d4c76d505d5": "event Withdrawn(address indexed user, uint256 amount)",
+  "0xf279e6a1f5e320cca91135676d9cb6e44ca8a08c0b88342bcdb1144f6511b568": "event Withdraw(address indexed user, uint256 amount0, uint256 amount1)",
+  "0x40d0efd1a53d60ecbf40971b9daf7dc90178c3aadc7aab1765632738fa8b8f01": "event Collect(uint256 indexed tokenId, address recipient, uint256 amount0, uint256 amount1)",
+  "0x70935338e69775456a85ddef226c395fb668b63fa0115f5f20610b388e6ca9c0": "event Collect(address indexed owner, address recipient, index_topic_2 int24 tickLower, index_topic_3 int24 tickUpper, uint128 amount0, uint128 amount1)",
+  "0x0c396cd989a39f4459b5fa1aed6a9a8dcdbc45908acfd67e028cd568da98982c": "event Burn(address indexed owner, int24 indexed tickLower, int24 indexed tickUpper, uint128 amount, uint256 amount0, uint256 amount1)",
+  "0x26f6a048ee9138f2c0ce266f322cb99228e8d619ae2bff30c67f8dcf9d2377b4": "event DecreaseLiquidity(uint256 indexed tokenId, uint128 liquidity, uint256 amount0, uint256 amount1)",
+  "0xb9ed0243fdf00f0545c63a0af8850c090d86bb46682baec4bf3c496814fe4f02": "event OrderFilled(address indexed maker, bytes32 orderHash, uint256 remaining)",
+  "0xb3d084820fb1a9decffb176436bd02558d15fac9b0ddfed8c465bc7359d7dce0": "event Borrow(address indexed reserve, address user, address indexed onBehalfOf, uint256 amount, uint8 interestRateMode, uint256 borrowRate, index_topic_3 uint16 referralCode)",
+  "0x7fb1c74d1ea6aa1c9c585e17ce8274c8ff98745e85e7459b73f87d784494f58e": "event ExecuteIncreaseOrder(address indexed account, uint256 orderIndex, address purchaseToken, uint256 purchaseTokenAmount, address collateralToken, address indexToken, uint256 sizeDelta, bool isLong, uint256 triggerPrice, bool triggerAboveThreshold, uint256 executionFee, uint256 executionPrice)",
+  "0x1be316b94d38c07bd41cdb4913772d0a0a82802786a2f8b657b6e85dbcdfc641": "event ExecuteIncreasePosition(address indexed account, address[] path, address indexToken, uint256 amountIn, uint256 minOut, uint256 sizeDelta, bool isLong, uint256 acceptablePrice, uint256 executionFee, uint256 blockGap, uint256 timeGap)",
+  "0xc2414023ce7002ee98557d1e7be21e5559073336f2217ee5f9b2e50fd85f71ee": "event IncreasePositionReferral(address account, uint256 sizeDelta, uint256 marginFeeBasisPoints, bytes32 referralCode, address referrer)",
+  "0x20853733b590dce729d9f4628682ebd9a34d2354e72679e66f43a008fc03b773": "event UpdatePosition(bytes32 key, uint256 size, uint256 collateral, uint256 averagePrice, uint256 entryFundingRate, uint256 reserveAmount, int256 realisedPnl, uint256 markPrice)",
+  "0x2fe68525253654c21998f35787a8d0f361905ef647c854092430ab65f2f15022": "event IncreasePosition(bytes32 key, address account, address collateralToken, address indexToken, uint256 collateralDelta, uint256 sizeDelta, bool isLong, uint256 price, uint256 fee)",
+  "0xd9d4761f75e0d0103b5cbeab941eeb443d7a56a35b5baf2a0787c03f03f4e474": "event IncreaseGuaranteedUsd(address token, uint256 amount)",
+  "0x34e07158b9db50df5613e591c44ea2ebc82834eff4a4dc3a46e000e608261d68": "event DecreaseGuaranteedUsd(address token, uint256 amount)",
+  "0xaa5649d82f5462be9d19b0f2b31a59b2259950a6076550bac9f3a1c07db9f66d": "event IncreaseReservedAmount(address token, uint256 amount)",
+  "0x976177fbe09a15e5e43f848844963a42b41ef919ef17ff21a17a5421de8f4737": "event IncreasePoolAmount(address token, uint256 amount)",
+  "0x112726233fbeaeed0f5b1dba5cb0b2b81883dee49fb35ff99fd98ed9f6d31eb0": "event DecreasePoolAmount(address token, uint256 amount)",
+  "0x64243679a443432e2293343b77d411ff6144370404618f00ca0d2025d9ca9882": "event IncreaseUsdgAmount(address token, uint256 amount)",
+  "0xe1e812596aac93a06ecc4ca627014d18e30f5c33b825160cc9d5c0ba61e45227": "event DecreaseUsdgAmount(address token, uint256 amount)",
+  "0xc6c1e0630dbe9130cc068028486c0d118ddcea348550819defd5cb8c257f8a38": "event TokenSwap(address indexed buyer, uint256 tokensSold, uint256 tokensBought, uint128 soldId, uint128 boughtId)",
+  "0x47cd9dda0e50ce30bcaaacd0488452b596221c07ac402a581cfae4d3933cac2b": "event CollectSwapFees(address token, uint256 feeUsd, uint256 feeTokens)",
+  "0x5d0c0019d3d45fadeb74eff9d2c9924d146d000ac6bcf3c28bf0ac3c9baa011a": "event CollectMarginFees(address token, uint256 feeUsd, uint256 feeTokens)",
+  "0x93d75d64d1f84fc6f430a64fc578bdd4c1e090e90ea2d51773e626d19de56d30": "event DecreasePosition(bytes32 key, address account, address collateralToken, address indexToken, uint256 collateralDelta, uint256 sizeDelta, bool isLong, uint256 price, uint256 fee)",
+  "0x73af1d417d82c240fdb6d319b34ad884487c6bf2845d98980cc52ad9171cb455": "event ClosePosition(bytes32 key, uint256 size, uint256 collateral, uint256 averagePrice, uint256 entryFundingRate, uint256 reserveAmount, int256 realisedPnl)",
+  "0xe24c39186e9137521953beaa8446e71f55b8f12296984f9d4273ceb1af728d90": "event UpdateGov(address gov)",
+  "0xd6137be44db128ffcf1ea1821dbe8f889f67f949be7656c2d8acba2a4a891a02": "event GlobalShortDataUpdated(address indexed token, uint256 globalShortSize, uint256 globalShortAveragePrice)",
+  "0x0874b2d545cb271cdbda4e093020c452328b24af12382ed62c4d00f5c26709db": "event Swap(address account, address tokenIn, address tokenOut, uint256 amountIn, uint256 amountOut, uint256 amountOutAfterFees, uint256 feeBasisPoints)",
+  "0x47cee97cb7acd717b3c0aa1435d004cd5b3c8c57d70dbceb4e4458bbd60e39d4": "event Claim(address receiver, uint256 amount)",
+  "0x7fcf532c15f0a6db0bd6d0e038bea71d30d808c7d98cb3bf7268a95bf5081b65": "event Withdrawal(address indexed src, uint256 wad)",
+  "0xae32d569b058895b9620d6552b09aaffedc9a6f396be4d595a224ad09f8b2139": "event CreateISetMaxGlobalSizes(address[] tokens, uint256[] longSizes, uint256[] shortSizes)",
+  "0x52a8358457e20bbb36e4086b83fb0749599f1893fe4c35a876c46dc4886d12db": "event SetMinExecutionFee(uint256 _minExecutionFee)",
+  "0x5265bc4952da402633b3fc35f67ab4245493a0ab94dd8ab123667c8d45a4485c": "event CreateIncreasePosition(address indexed account, address[] path, address indexToken, uint256 amountIn, uint256 minOut, uint256 sizeDelta, bool isLong, uint256 acceptablePrice, uint256 executionFee, uint256 index, uint256 queueIndex, uint256 blockNumber, uint256 blockTime, uint256 gasPrice)",
+  "0x81ed0476a7e785a9e4728fffd679ea97176ca1ac85e1003462558bb5677da57b": "event CreateDecreasePosition( address indexed account, address[] path, address indexToken, uint256 collateralDelta, uint256 sizeDelta, bool isLong, address receiver, uint256 acceptablePrice, uint256 minOut, uint256 executionFee, uint256 index, uint256 queueIndex, uint256 blockNumber, uint256 blockTime)",
+  "0x90890809c654f11d6e72a28fa60149770a0d11ec6c92319d6ceb2bb0a4ea1a15": "event Deposit(address indexed user, uint256 indexed pid, uint256 amount)",
+  "0xe1fffcc4923d04b559f4d29a8bfc6cda04eb5b0d3c460751c2402c5c5cc9109c": "event Deposit(address indexed sender, uint256 value)",
+  "0xdec2bacdd2f05b59de34da9b523dff8be42e5e38e818c82fdb0bae774387a724": "event DelegateVotesChanged(address indexed delegate, uint256 previousBalance, uint256 newBalance)",
+  "0xdf06bb56ffc4029dc0b62b68bb5bbadea93a38b530cefc9b81afb742a6555d88": "event CreateSwapOrder(address indexed account, uint256 orderIndex, address[] path, uint256 amountIn, uint256 minOut,uint256 triggerRatio, bool triggerAboveThreshold, bool shouldUnwrap, uint256 executionFee)",
+  "0x48ee333d2a65cc45fdb83bc012920d89181c3377390cd239d2b63f2bef67a02d": "event CreateDecreaseOrder(address indexed account, uint256 orderIndex, address collateralToken, uint256 collateralDelta, address indexToken, uint256 sizeDelta, bool isLong, uint256 triggerPrice, bool triggerAboveThreshold, uint256 executionFee)",
+  "0xb27b9afe3043b93788c40cfc3cc73f5d928a2e40f3ba01820b246426de8fa1b9": "event CreateIncreaseOrder(address indexed account, uint256 orderIndex, address purchaseToken, uint256 purchaseTokenAmount, address collateralToken, address indexToken, uint256 sizeDelta, bool isLong, uint256 triggerPrice, bool triggerAboveThreshold, uint256 executionFee)",
+  "0x1154174c82984656b028c8021671988f60a346497e56fe02554761184f82a075": "event CancelDecreaseOrder(address indexed account, uint256 orderIndex, address collateralToken, uint256 collateralDelta, address indexToken, uint256 sizeDelta, bool isLong, uint256 triggerPrice, bool triggerAboveThreshold, uint256 executionFee)",
+  "0xd500f34e0ec655b7614ae42e1d9c666d5e4dde909a1297829f8c5ecf00805d32": "event CancelIncreaseOrder(address indexed account, uint256 orderIndex, address purchaseToken, uint256 purchaseTokenAmount, address collateralToken, address indexToken, uint256 sizeDelta, bool isLong, uint256 triggerPrice, bool triggerAboveThreshold, uint256 executionFee)",
+  "0x0a0360dd5c354235bbf8d386ba3b24ef8134088e0785677de1504df219d9149a": "event UpdateIncreaseOrder(address indexed account, uint256 orderIndex, address collateralToken, address indexToken, bool isLong, uint256 sizeDelta, uint256 triggerPrice, bool triggerAboveThreshold)",
+  "0x75781255bc71c83f89f29e5a2599f2c174a562d2cd8f2e818a47f132e7280498": "event UpdateDecreaseOrder (address indexed account, uint256 orderIndex, address collateralToken, uint256 collateralDelta, address indexToken, uint256 sizeDelta, bool isLong, uint256 triggerPrice, bool triggerAboveThreshold)",
+  "0x4c209b5fc8ad50758f13e2e1088ba56a560dff690a1c6fef26394f4c03821c4f": "event Mint(address indexed sender, uint256 value, uint256 index)",
+  "0xd78ad95fa46c994b6551d0da85fc275fe613ce37657fb8d5e3d130840159d822": "event Swap(address indexed sender, uint256 amount0In, uint256 amount1In, uint256 amount0Out, uint256 amount1Out, address indexed to)",
+  "0xa078c4190abe07940190effc1846be0ccf03ad6007bc9e93f9697d0b460befbb": "event Swapped (address fromAsset, address toAsset, uint256 fromAmount, uint256 receivedAmount)",
+  "0xa2c38e2d2fb7e3e1912d937fd1ca11ed6d51864dee4cfa7a7bf02becd7acf092": "event Claim(address indexed account, uint256 amount, bool indexed automatic)",
+  "0x7a53080ba414158be7ec69b987b5fb7d07dee101fe85488f0853ae16239d0bde": "event Mint(address sender, address indexed owner, int24 indexed tickLower, int24 indexed tickUpper, uint128 amount, uint256 amount0, uint256 amount1)",
+  "0xee503bee2bb6a87e57bc57db795f98137327401a0e7b7ce42e37926cc1a9ca4d": "event DividendWithdrawn(address indexed to, uint256 weiAmount)",
+  "0x36af321ec8d3c75236829c5317affd40ddb308863a1236d2d277a4025cccee1e": "event Deposit(address indexed sender, uint256 liquidity, uint256 amount0, uint256 amount1)",
+  "0x38567aa999bdbf56a2a0e536f6d3420a6befcc0d5a443f686e3bded71d09157e": "event NewTransmission(uint32 indexed aggregatorRoundId, int192 answer, address transmitter, uint32 observationsTimestamp)",
+  "0x0109fc6f55cf40689f02fbaad7af7fe7bbac8a3d2186600afc7d3e10cac60271": "event NewRound(uint256 indexed roundId, address indexed startedBy, uint256 startedAt)",
+  "0x0559884fd3a460db3073b7fc896cc77986f16e378210ded43186175bf646fc5f": "event AnswerUpdated(int256 indexed current, uint256 indexed roundId, uint256 updatedAt)",
+  "0x1c411e9a96e071241c2f21f7726b17ae89e3cab4c78be50e062b03a9fffbbad1": "event Sync(uint112 reserve0, uint112 reserve1)",
+  "0x3ed4ee04a905a278b050a856bbe7ddaaf327a30514373e65aa6103beeae488c3": "event Withdraw(address indexed user, address indexed reserve, uint256 amount, address indexed to)",
+  "0x5beea7b3b87c573953fec05007114d17712e5775d364acc106d8da9e74849033": "event EvInventoryUpdate(uint256 indexed id, tuple(address,address,address,uint256,uint256,uint256,uint8,uint8) inventory)",
+  "0x7f26b83ff96e1f2b6a682f133852f6798a09c465da95921460cefb3847402498": "event Initialized(uint8 version)",
+  "0x3ff41bdde87755b687ae83d0221a232b6be51a803330ed9661c1b5d0105e0d8a": "event UpdatePnl(bytes32 key, bool hasProfit, uint256 delta)",
+  "0x4fa9693cae526341d334e2862ca2413b2e503f1266255f9e0869fb36e6d89b17": "event DistributeReward(address indexed sender, address indexed gauge, uint256 amount)",
+  "0x865ca08d59f5cb456e85cd2f7ef63664ea4f73327414e9d8152c4158b0e94645": "event Claim(address indexed sender, address indexed recipient, uint256 amount0, uint256 amount1)",
+  "0xbc567d6cbad26368064baa0ab5a757be46aae4d70f707f9203d9d9b6c8ccbfa3": "event ClaimFees(address indexed from, uint256 claimed0, uint256 claimed1)",
+  "0x00907ea823316edea3d23b35d0ee740ae390c2e5efc929d75c12b66a96cc6b40": "event Deposit(bool nft, address indexed depositor, address indexed receiver, address resolver, address token, uint256 value, uint256 indexed registration, string details)",
+  "0x002d79d30d9a290b4aa306dc3542d81c243b1f679b4083044b9723d2378600be": "event ValidatorProposed(address indexed validator)",
+  "0x014f4edb46826c5e74e23ca091de2d3fdfe2cc9d62b5eebf7f5a63eff16d55be": "event EmergencyUpgrade()",
+  "0x0183f97f139a109da7953ccd9464ba33347b0124a4357e83ebe2fe81046381c3": "event TotalUnstaked(uint256 _total)",
+  "0x0488fc5a0e346a47f90cfa4d25262d1a430445fa176c4b7000f005bc2f474b73": "event HashPublished(string hash)",
+  "0x04719fa2f4e8205ff1369b5c7d2b3eb66c25570e7bf668ae7ccecb8fbd7ed52e": "event DistributionEndChanged(uint256 distributionEnd)",
+  "0x0516911bcc3a0a7412a44601057c0a0a1ec628bde049a84284bc428866534488": "event Repaid(address indexed payer, uint256 amount)",
+  "0x03d7415a8b5c901ab0451507bd934f2971b04632563374d49a1cfef4c8666e5a": "event RoundReset()",
+  "0x0220a0e551b24b3a7db6e626408b6e2217a3893bf25d0bc5c973eee354a8ad0b": "event Lock(address indexed token, address indexed locker, uint256 amount, uint256 date, uint256 delay, uint256 id)",
+  "0x020f4b532e50c21e70f84cf5b279d8b67380fe88a156bc883d11cbd3c9064608": "event CustomHarvestWindowUpdated(address indexed vault, uint256 newCustomHarvestWindow)",
+  "0xf70d5c697de7ea828df48e5c4573cb2194c659f1901f70110c52b066dcf50826": "event NotifyReward(address indexed from, address indexed reward, uint256 amount)",
+  "0x52977ea98a2220a03ee9ba5cb003ada08d394ea10155483c95dc2dc77a7eb24b": "event NotifyReward(address indexed from, address indexed reward, uint256 indexed epoch, uint256 amount)",
+  "0xb3f27c1805319c01731f5717816fcfc579c3452c5ff4ffadc41284a7288f24ef": "event DepositPairNft(address indexed user, uint256 amount, uint256 mainTypePoolId, uint256 mainTokenId, uint256 bakcTokenId)",
+  "0x112c256902bf554b6ed882d2936687aaeb4225e8cd5b51303c90ca6cf43a8602": "event Fees(address indexed, uint256, uint256)",
+  "0xe314e23175856b9484e39ab0547753cf1b5cd0cbe3b0d7018c953d31f23fc767": "event UserBurnLogger(bytes32 indexed smgID, uint indexed tokenPairID, address indexed tokenAccount, uint value, uint serviceFee, uint fee, bytes userAccount)",
+  "0x4419a30cc235fa47055246d53f2629b5687ca327b92dcde015fcebe0cc17ffab": "event SmgMintLogger(bytes32 indexed uniqueID, bytes32 indexed smgID, uint indexed tokenPairID, uint value, address tokenAccount, address userAccount)",
+  "0xa0c24741ddac735f5a6c1e1ef4f075407189d185a06db3329d022e99e9784a60": "event ProtocolFeePaid(address indexed proxy, address indexed payer, address indexed feeRecipient, uint256 apeCoinAmount)",
+  "0xc42079f94a6350d7e6235f29174924f928cc2ac818eb64fed8004e115fbcca67": "event Swap(address indexed sender, address indexed recipient, int256 amount0, int256 amount1, uint160 sqrtPriceX96, uint128 liquidity, int24 tick)",
+  "0x9310ccfcb8de723f578a9e4282ea9f521f05ae40dc08f3068dfad528a65ee3c7": "event RewardsClaimed(address indexed proxy, address indexed staker, uint256 apeCoinAmount)",
+  "0xd334b3114fc25cbd72389ff9c361d5f8b0924e35fa237c65ac209a2cdcf4ba13": "event ClaimRewardsNft(address indexed user, uint256 indexed poolId, uint256 amount, uint256 tokenId)",
+  "0x8be0079c531659141344cd1fd0a4f28419497f9722a3daafe3b4186f6b6457e0": "event OwnershipTransferred(address indexed previousOwner, address indexed newOwner)",
+  "0x34fcbac0073d7c3d388e51312faf357774904998eeb8fca628b9e6f65ee1cbf7": "event Claim(address indexed user, uint256 indexed pid, uint256 amount)",
+  "0xda919360433220e13b51e8c211e490d148e61a3bd53de8c097194e458b97f3e1": "event BorrowAllowanceDelegated(address indexed fromUser, address indexed toUser, address asset, uint256 amount)",
+  "0x9cdcf2f7714cca3508c7f0110b04a90a80a3a8dd0e35de99689db74d28c5383e": "event Claimed(address indexed recipient, uint256 amount, uint256 claimEpoch, uint256 maxEpoch)",
+  "0xdccd412f0b1252819cb1fd330b93224ca42612892bb3f4f789976e6d81936496": "event Burn(address indexed sender, uint256 amount0, uint256 amount1, address indexed to)",
+  "0x367be65505e5aff90e7e646744b5f75280ec6d79a0e78690f6020b875a03bc12": "event RemoveCollateral(address from, address to, uint256 amount)",
+  "0xfac41e7685ab9cb815cdf1647bba235f2a16546a068670f12d3a7cc650723099": "event ItemGroupCreated(uint256 itemGroupId, uint256 itemGroupSize, address indexed creator)",
+  "0x4a39dc06d4c0dbc64b70af90fd698a233a518aa5d07e595d983b8c0526c8f7fb": "event TransferBatch(address indexed operator, address indexed from, address indexed to, uint256[] ids,uint256[] amounts)",
+  "0xc3d58168c5ae7397731d063d5bbf3d657854427343f4c083240f7aacaa2d0f62": "event TransferSingle(address indexed operator, address indexed from, address indexed to, uint256 id, uint256 amount)",
+  "0x89d57e873af45054d40b801ca64ca06a1627c5682ab9be494a9f2846ef157d8a": "event ClaimRewardsPairNft(address indexed user, uint256 amount, uint256 mainTypePoolId, uint256 mainTokenId, uint256 bakcTokenId)",
+  "0x3d0ce9bfc3ed7d6862dbb28b2dea94561fe714a1b4d019aa8af39730d1ad7c3d": "event SafeReceived(address indexed sender, uint256 value)",
+  "0xc4109843e0b7d514e4c093114b863f8e7d8d9a458c372cd51bfe526b588006c9": "event OrdersMatched(bytes32 buyHash, bytes32 sellHash, address maker, address taker, uint256 price, bytes32 metadata)",
+  "0x9aa05b3d70a9e3e2f004f039648839560576334fb45c81f91b6db03ad9e2efc9": "event ClaimRewards(address indexed from, address indexed reward, uint256 amount)",
+  "0x49995e5dd6158cf69ad3e9777c46755a1a826a446c6416992167462dad033b2a": "event Burn(address indexed user, uint256 amount, uint256 index)",
+  "0x9376b38c1b00dca4d6734cc68a93fc19fdc91dc0c12be35938b668258e5a01dd": "event TransferDeposit(address indexed pool, address indexed from, address indexed to, uint256 amount)",
+  "0x00058a56ea94653cdf4f152d227ace22d4c00ad99e2a43f58cb7d9e3feb295f2": "event ReserveUsedAsCollateralEnabled (address indexed reserve, address indexed user)",
+  "0x4beccb90f994c31aced7a23b5611020728a23d8ec5cddd1a3e9d97b96fda8666": "event BalanceTransfer(address indexed from, address indexed to, uint256 value, uint256 index)",
+  "0xefefaba5e921573100900a3ad9cf29f222d995fb3b6045797eaea7521bd8d6f0": "event FlashLoan(address indexed target, address initiator, address indexed asset, uint256 amount, uint8 interestRateMode, uint256 premium, uint16 indexed referralCode)",
+  "0x2b627736bca15cd5381dcf80b0bf11fd197d01a037c52b927a881a10fb73ba61": "event Supply(address indexed reserve, address user, address indexed onBehalfOf, uint256 amount, index_topic_3 uint16 referralCode)",
+  "0xa146fc154e1913322e9817d49f0d5c37466c24326e15de10e739a948be815eab": "event UpdateFundingRate(address token, uint256 fundingRate)",
+  "0x9e96dd3b997a2a257eec4df9bb6eaf626e206df5f543bd963682d143300be310": "event RemoveLiquidityOne(address indexed provider, uint256 token_amount, uint256 coin_amount)",
+  "0xb2e76ae99761dc136e598d4a629bb347eccb9532a5f8bbd72e18467c3c34cc98": "event TokenExchange(address indexed buyer, uint256 sold_id, uint256 tokens_sold, uint256 bought_id, uint256 tokens_bought)",
+  "0x44c58d81365b66dd4b1a7f36c25aa97b8c71c361ee4937adc1a00000227db5dd": "event ReserveUsedAsCollateralDisabled (address indexed reserve, address indexed user)",
+  "0x3115d1449a7b732c986cba18244e897a450f61e1bb8d589cd2e69e6c8924f9f7": "event Withdraw (address indexed reserve, address indexed user, address indexed to, uint256 amount)",
+  "0xbb123b5c06d5408bbea3c4fef481578175cfb432e3b482c6186f02ed9086585b": "event UserIndexUpdated(address indexed user, address indexed asset, uint256 index)",
+  "0x5777ca300dfe5bead41006fbce4389794dbc0ed8d6cccebfaf94630aa04184bc": "event AssetIndexUpdated(address indexed _asset, uint256 _index)",
+  "0xcfb3a669117d9dc90f0d3521228dc9fe67c5102dde205ef16fe9a1f81be698d5": "event Borrow(address user, address indexed reserve, uint256 amount, address nftAsset, uint256 nftTokenId, address indexed onBehalfOf, uint256 borrowRate, uint256 loanId, uint16 indexed referral)",
+  "0x4cdde6e09bb755c9a5589ebaec640bbfedff1362d4b255ebf8339782b9942faa": "event Repay(address indexed reserve, address indexed user, address indexed repayer, uint256 amount)",
+  "0x804c9b842b2748a22bb64b345453a3de7ca54a6ca45ce00d415894979e22897a": "event ReserveDataUpdated(address indexed reserve, uint256 liquidityRate, uint256 stableBorrowRate, uint256 variableBorrowRate, uint256 liquidityIndex, uint256 variableBorrowIndex)",
+  "0xa2cad6ae2699ea86ba233a96ca0e57d895983eeed04f6bd0a770187c58b820dd": "event NewContractAddresses(address _consumer, address _verifier, address _sportsManager)",
+  "0xde6857219544bb5b7746f48ed30be6386fefc61b2f864cacf559893bf50fd951": "event Deposit(address indexed reserve, address user, address indexed onBehalfOf, uint256 amount, uint16 indexed referral)",
+  "0x4def474aca53bf221d07d9ab0f675b3f6d8d2494b8427271bcf43c018ef1eead": "event Distribute(uint256 amount)",
+  "0x23b9387f81fca646aac1dc4487ede045c65f5f7445482906565f01e05afdb3a8": "event PriceData(address token, uint256 refPrice, uint256 fastPrice, uint256 cumulativeRefDelta, uint256 cumulativeFastDelta)",
+  "0xc37a77b91cc3fc2d0e4b43fd2f347ec67adda10e39215de4742836cc3e42c97a": "event PriceUpdate(address token, uint256 price, address priceFeed)",
+  "0xa4725d47fa458d9222498e4d63f34527cf7318c1506f89d9092b35fdbcb64f3a": "event StakeGlp(address account, uint256 amount)",
+  "0x1cb6202519b6b6c72ba5ed11e2c3f53af3cea010f96bfc705584e53e75cf034c": "event UnstakeGlp(address account, uint256 amount)",
+  "0xd732b7828fa6cee72c285eac756fc66a7477e3dc22e22e7c432f1c265d40b483": "event SellUSDG(address account, address token, uint256 usdgAmount, uint256 tokenAmount, uint256 feeBasisPoints)",
+  "0xab4c77c74cd32c85f35416cf03e7ce9e2d4387f7b7f2c1f4bf53daaecf8ea72d": "event BuyUSDG(address account, address token, uint256 tokenAmount, uint256 usdgAmount, uint256 feeBasisPoints)",
+  "0x87b9679bb9a4944bafa98c267e7cd4a00ab29fed48afdefae25f0fca5da27940": "event RemoveLiquidity(address account, address token, uint256 glpAmount, uint256 aumInUsdg, uint256 glpSupply, uint256 usdgAmount, uint256 amountOut)",
+  "0x6059a38198b1dc42b3791087d1ff0fbd72b3179553c25f678cd246f52ffaaf59": "event ClaimAdminFee(address indexed admin, uint256 tokens)",
+  "0x423f6495a08fc652425cf4ed0d1f9e37e571d9b9529b1c1c23cce780b2e7df0d": "event AddLiquidity(address indexed provider, uint256[3] token_amounts, uint256[3] fees, uint256 invariant, uint256 token_supply)",
+  "0x5d624aa9c148153ab3446c1b154f660ee7701e549fe9b62dab7171b1c80e6fa2": "event Burn(address indexed from, address indexed target, uint256 value, uint256 index)",
+  "0x631042c832b07452973831137f2d73e395028b44b250dedc5abb0ee766e168ac": "event FlashLoan(address indexed target, address indexed initiator, address indexed asset, uint256 amount, uint256 premium, uint16 referralCode)",
+  "0x69be227a0f861d92245592f172e9f035838b1e7fe03192b3b1dde80c9b104d8d": "event LoanUpdated(address indexed user, uint256 indexed loanId, address nftAsset, uint256 nftTokenId, address reserveAsset, uint256 amountAdded, uint256 amountTaken, uint256 borrowIndex)",
+  "0x2468f9268c60ad90e2d49edb0032c8a001e733ae888b3ab8e982edf535be1a76": "event RewardsAccrued (address indexed _user, uint256 _amount)"
 }
\ No newline at end of file
diff --git a/src/lib/abi/signature/functions_signatures_overrides.json b/src/lib/abi/signature/functions_signatures_overrides.json
index 109c4ac9c..01a957f44 100644
--- a/src/lib/abi/signature/functions_signatures_overrides.json
+++ b/src/lib/abi/signature/functions_signatures_overrides.json
@@ -3,10 +3,111 @@
   "0xaac48653": "function mint(address account, uint256 id, uint256 amount, uint256 maximum, string tokenUri, bytes data)",
   "0xf5298aca": "function burn(address account,uint256 id,uint256 value)",
   "0x18cbafe5": "function swapExactTokensForETH(uint amountIn, uint amountOutMin, address[] calldata path, address to, uint deadline)",
+  "0x156e29f6": "function mint(address, uint256, uint256)",
+  "0x62f11797": "function initMISOFarmFactory(address _accessControls, address _misoDev, uint256 _minimumFee, uint256 _tokenFee)",
+  "0x274a2258": "function initMISOMarket(address _accessControls, address _bentoBox, address[] _templates)",
+  "0xe9bb4b6b": "function initListFactory(address _accessControls, address _pointListTemplate, uint256 _minimumFee)",
+  "0x7b7fb153": "function addLiquidityLauncherTemplate(address _template)",
+  "0x7b20bccf": "function addTokenTemplate(address _template)",
+  "0x698d640c": "function createRandomLip(string _name)",
+  "0x0ce90ec2": "function levelUp(uint256 _lipId)",
+  "0xd0c73d26": "function addFarmTemplate(address _template)",
+  "0xe43252d7": "function addToWhitelist(address account)",
+  "0xd1ac3535": "function approveToStargateRouter(address token)",
+  "0x8a7c195f": "function enableFeeAmount(uint24 fee, int24 tickSpacing)",
+  "0x8206a4d1": "function setFeeProtocol(uint8 feeProtocol0, uint8 feeProtocol1)",
+  "0x9870d7fe": "function addOperator(address operator)",
+  "0xd1058e59": "function claimAll()",
+  "0x0b102d1a": "function setNftAddress(address _nftAddress)",
+  "0x704b6c02": "function setAdmin(address _admin)",
+  "0x6faf15ca": "function stake(uint256 amount)",
+  "0x8ba14562": "function withdraw(uint _amount)",
+  "0x4f1ef286": "function upgradeToAndCall(address newImplementation, bytes data)",
+  "0x3d18b912": "function getReward()",
+  "0xca5eb5e1": "function setDelegate(address _new)",
+  "0x715018a6": "function renounceOwnership()",
+  "0x03761a9a": "function addSignedBlocks(Block[] blocks)",
+  "0x67064084": "function parseRLPBlockNumber(bytes rlpHeader, uint256 chainId)",
+  "0xdc20fa89": "function addBlockchain(uint256 chainId, string rpc)",
+  "0xf2fde38b": "function transferOwnership(address _newOwner)",
+  "0x3659cfe6": "function upgradeTo(address newImplementation)",
+  "0xd9ffad47": "function stakeByIds(uint256[] tokenIds)",
+  "0x48aa1936": "function unstakeByIds(uint256[] tokenIds)",
+  "0x362a3fad": "function getAllRewards(address staker)",
+  "0xabe7f1ab": "function remove(address staker, uint256 index)",
+  "0xe2fc2519": "function removeTokenIdFromStaker(address staker, uint256 tokenId)",
+  "0xbfab3db9": "function withdrawContractBalance()",
+  "0x724cf5b8": "function setRate(string eventCode, uint256, uint256)",
+  "0xfbfded6d": "function updateCumulativeFundingRate(address _token, address _token)",
+  "0xd112625a": "function addDBTokenReference(address token, string eventCode, string teamName)",
+  "0x7078a424": "function buyTokens(string eventCode, string teamName, uint256 amount)",
+  "0x16114acd": "function recoverTokens(address tokenAddress)",
+  "0xba847759": "function run((address,(address,uint256,uint256,uint8,bytes)[],address,uint256,uint256,bytes32,uint8) intent, (bytes32,address,uint256,bytes32,uint256,uint8,address,address,uint256,uint256,(uint256[],uint256,uint256,uint256,address,address),(address,uint256,uint256,uint8,bytes)[],uint256) detail, bytes sigIntent, bytes sigDetail)",
+  "0x7200b829": "function confirmOwnershipTransfer()",
+  "0x310bd74b": "function reset(uint256 _tokenId)",
+  "0x24f010db": "function setOracleAddr(address)",
+  "0x04ea97b0": "function setLatestAnswer(int256)",
+  "0xa15ab08d": "function create(address _id, string _location)",
+  "0xe2bbb158": "function deposit(uint256 _pid, uint256 _amount)",
+  "0x573ade81": "function repay(address asset, uint256 amount, uint256 rateMode, address onBehalfOf)",
+  "0x825bb13c": "function anySwapIn(bytes32 txs, address token, address to, uint256 amount, uint256 fromChainID)",
+  "0xc604b0b8": "function anySwapOut(address token, string to, uint256 amount, uint256 toChainID)",
+  "0x241dc2df": "function anySwapOut(address token, address to, uint256 amount, uint256 toChainID)",
+  "0x69328dec": "function withdraw(address asset, uint256 amount, address to)",
+  "0x5a3b74b9": "function setUserUseReserveAsCollateral(address asset, bool useAsCollateral)",
+  "0xe8eda9df": "function deposit(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)",
+  "0x31279d3d": "function getReward(address account, address[] tokens)",
+  "0x94b918de": "function swap(uint256 _tokenId)",
+  "0xc73a2d60": "function disperseToken(address tokenAddress, address[] recipients, uint256[] values)",
+  "0x5ea2c91b": "function mintByTier(uint256 tierId, uint256 count, uint256 maxAllowance, bytes32[] proof)",
+  "0x8803dbee": "function swapTokensForExactTokens(uint256 amountOut, uint256 amountInMax, address[] path, address to, uint256 deadline)",
+  "0x825dc415": "function setIntegratorInfo(address _integrator, tuple _info)",
+  "0x0e0dc426": "function setTokenConfig(address _vault, address _token, uint256 _tokenWeight, uint256 _minProfitBps, uint256 _maxUsdgAmount, uint256 _bufferAmount, uint256 _usdgAmount)",
+  "0xe1b55fb4": "function rebalance(address[],uint256[],address,uint256)",
+  "0x19ff1cf5": "function drainToken(address _token, uint256 _amount, address _to)",
   "0x095ea7b3": "function approve(address spender, uint256 amount)",
   "0x7ff36ab5": "function swapExactETHForTokens(uint amountOutMin, address[] calldata path, address to, uint deadline)",
+  "0x269ae6c2": "function createSwapOrder(address[] memory _path, uint256 _amountIn, uint256 _minOut, uint256 _triggerRatio, bool _triggerAboveThreshold, uint256 _executionFee, bool _shouldWrap, bool _shouldUnwrap)",
   "0xfb3bdb41": "function swapETHForExactTokens(uint256 amountOut, address[] path, address to, uint256 deadline)",
+  "0xa5e56571": "function anySwapOutNative(address token, address to, uint256 toChainID)",
+  "0x0175b1c4": "function anySwapInAuto(bytes32 txs, address token, address to, uint256 amount, uint256 fromChainID)",
   "0x38ed1739": "function swapExactTokensForTokens(uint256 amountIn, uint256 amountOutMin, address[] path, address to, uint256 deadline)",
+  "0x31873e2e": "function handleAction(address asset, uint256 userBalance, uint256 totalSupply)",
+  "0x22de5b5a": "function setMintingInGameActive(bool _isMintingInGame)",
+  "0x711953ef": "function setGameAddress(address _gameContractAddress)",
+  "0xab834bab": "function atomicMatch_(address[14] addrs, uint256[18] uints, uint8[8] feeMethodsSidesKindsHowToCalls, bytes calldataBuy, bytes calldataSell, bytes replacementPatternBuy, bytes replacementPatternSell, bytes staticExtradataBuy, bytes staticExtradataSell, uint8[2] vs, bytes32[5] rssMetadata)",
+  "0xceaa3182": "function store(uint256, address)",
+  "0xb8c461cd": "function batchRedeem(uint256[] _billIds)",
+  "0x938e3d7b": "function setContractURI(string URI)",
+  "0x55f804b3": "function setBaseURI(string URI)",
+  "0x16a33000": "function mintItem(string, uint256)",
+  "0x1249c58b": "function mint()",
+  "0x4641257d": "function harvest()",
+  "0x6a761202": "function execTransaction(address to, uint256 value, bytes data, uint8 operation, uint256 safeTxGas, uint256 baseGas, uint256 gasPrice, address gasToken, address refundReceiver, bytes signatures)",
+  "0x47e7ef24": "function deposit(address _pair, uint256 _amount)",
+  "0xa075b7c7": "function setLimits(uint256 lDebtAmountMin, uint256 debtInterestMin, uint256 pledgePercentMin, uint256 lMinPledgeMax)",
+  "0xe97dcb62": "function enter()",
+  "0xd96a094a": "function buy(uint256 index)",
+  "0x40e58ee5": "function cancel(uint256 _id)",
+  "0x853828b6": "function withdrawAll()",
+  "0xb6b55f25": "function deposit(uint256 amount)",
+  "0x08c4934d": "function initAdmin(address admin)",
+  "0x2f54bf6e": "function isOwner(address owner)",
+  "0xb66503cf": "function notifyRewardAmount(address _rewardsToken, uint256 reward)",
+  "0xfe23245a": "function mint(address to, uint256 amount, uint256[] repeatStarts)",
+  "0xa415bcad": "function borrow(address asset,uint256 amount,uint256 interestRateMode,uint16 referralCode,address onBehalfOf)",
+  "0xbbbfa60c": "function matchOrders(tuple leftOrder,tuple rightOrder,bytes leftSignature,bytes rightSignature,tuple[] feeData,address paymentTokenAddress)",
+  "0x42966c68": "function burn(uint256 amount)",
+  "0x516c731c": "function setOwner(address owner,bool isOwner)",
+  "0x759c4bf3": "function cancelTrade(address photoNFT, uint256 _photoId)",
+  "0xb1bf962d": "function scaledTotalSupply()",
+  "0x4e71d92d": "function claim()",
+  "0xe9fad8ee": "function exit()",
+  "0xa694fc3a": "function stake(uint256 amount)",
+  "0xbb85c0bb": "function getMarketBorrowRate(address _asset)",
+  "0x3618abba": "function getLendingRateOracle()",
+  "0x29db497d": "function calculateInterestRates(address reserve, address aToken, uint256 liquidityAdded, uint256 liquidityTaken, uint256 totalStableDebt, uint256 totalVariableDebt, uint256 averageStableBorrowRate, uint256 reserveFactor)",
+  "0xf731e9be": "function getTotalSupplyAndAvgRate()",
   "0xded9382a": "function removeLiquidityETHWithPermit(address token, uint256 liquidity, uint256 amountTokenMin, uint256 amountETHMin, address to, uint256 deadline, bool approveMax, uint8 v, bytes32 r, bytes32 s)",
   "0xf305d719": "function addLiquidityETH(address token, uint256 amountTokenDesired, uint256 amountTokenMin, uint256 amountETHMin, address to, uint256 deadline)",
   "0xa22cb465": "function setApprovalForAll(address to, bool approved)",
@@ -22,5 +123,14 @@
   "0x2195995c": "function removeLiquidityWithPermit(address tokenA, address tokenB, uint256 liquidity, uint256 amountAMin, uint256 amountBMin, address to, uint256 deadline, bool approveMax, uint8 v, bytes32 r, bytes32 s)",
   "0x70a08231": "function balanceOf(address)",
   "0xf23a6e61": "function onERC1155Received(address operator, address from, uint256 id, uint256 value, bytes data)",
-  "0x3542aee2": "function mintByOwner(address to, uint256 tokenType)"
+  "0x02751cec": "function removeLiquidityETH(address token,uint256 liquidity,uint256 amountTokenMin,uint256 amountETHMin,address to,uint256 deadline)",
+  "0x3542aee2": "function mintByOwner(address to, uint256 tokenType)",
+  "0xbaa2abde": "function removeLiquidity(address tokenA, address tokenB, uint256 liquidity, uint256 amountAMin, uint256 amountBMin, address to, uint256 deadline)",
+  "0xb6f9de95": "function swapExactETHForTokensSupportingFeeOnTransferTokens(uint amountOutMin, address[] path, address to, uint deadline)",
+  "0xd0e30db0": "function deposit()",
+  "0x0902f1ac": "function getReserves()",
+  "0xee42b10b": "function act()",
+  "0xc09707a5": "function getIt()",
+  "0x2e1a7d4d": "function withdraw(uint256 amount)",
+  "0x6a627842": "function mint(address to)"
 }
\ No newline at end of file
diff --git a/src/lib/abi/signature/transfer_signatures.js b/src/lib/abi/signature/transfer_signatures.js
index ba5deb690..94167d8fb 100644
--- a/src/lib/abi/signature/transfer_signatures.js
+++ b/src/lib/abi/signature/transfer_signatures.js
@@ -1,2 +1,5 @@
-export const TRANSFER_SIGNATURES = ['0xddf252ad', '0xa9059cbb', '0xf242432a', '0xc3d58168'];
 export const ERC1155_TRANSFER_SIGNATURE = '0xc3d58168';
+export const ERC1155_BATCH_TRANSFER_SIGNATURE = '0x4a39dc06';
+export const TRANSFER_SIGNATURES = [
+    '0xddf252ad', '0xa9059cbb', '0xf242432a', ERC1155_TRANSFER_SIGNATURE, ERC1155_BATCH_TRANSFER_SIGNATURE,
+];
diff --git a/src/lib/chain-utils.ts b/src/lib/chain-utils.ts
new file mode 100644
index 000000000..fca6a1c17
--- /dev/null
+++ b/src/lib/chain-utils.ts
@@ -0,0 +1,11 @@
+export const TELOSCAN_MAINNET_URL = 'https://teloscan.io';
+export const TELOSCAN_TESTNET_URL = 'https://testnet.teloscan.io';
+export const BETA_TELOSCAN_MAINNET_URL = 'https://beta.teloscan.io';
+export const BETA_TELOSCAN_TESTNET_URL = 'https://beta.testnet.teloscan.io';
+
+export const TELOS_MAINNET_CHAIN_ID = 40;
+export const TELOS_TESTNET_CHAIN_ID = 41;
+
+const currentChainId = Number(process.env.NETWORK_EVM_CHAIN_ID);
+export const IS_MAINNET = currentChainId === TELOS_MAINNET_CHAIN_ID;
+export const IS_TESTNET = currentChainId === TELOS_TESTNET_CHAIN_ID;
diff --git a/src/lib/contract/Contract.ts b/src/lib/contract/Contract.ts
new file mode 100644
index 000000000..b6e25a6ce
--- /dev/null
+++ b/src/lib/contract/Contract.ts
@@ -0,0 +1,123 @@
+/* eslint-disable */
+import { ethers } from 'ethers';
+import { markRaw } from "vue";
+
+interface ContractCreationInfo {
+  block?: number;
+  transaction?: string;
+  creator?: string;
+}
+
+interface ContractProperties {
+  name?: string;
+  symbol?: string;
+  marketcap?: string;
+  price?: string;
+  supply?: string;
+  decimals?: number;
+  holders?: any[];
+}
+
+export default class Contract {
+  [key: string]: any;
+  autoloadedAbi: boolean;
+  address: string;
+  name?: string;
+  nfts: { [key: string]: any };
+  abi: any[];
+  supportedInterfaces: string[];
+  properties: ContractProperties;
+  iface?: ethers.utils.Interface;
+  verified: boolean;
+  sources: any[];
+  creationInfo?: ContractCreationInfo;
+  logoURI: string;
+
+  constructor({ address, creationInfo, name, abi, supportedInterfaces = [], properties = {}, verified = false, nfts = {}, autoloadedAbi }: { address: string; creationInfo?: ContractCreationInfo; name?: string; abi: any[]; supportedInterfaces?: string[]; properties?: ContractProperties; verified?: boolean; nfts?: { [key: string]: any }; autoloadedAbi: boolean; }) {
+    this.autoloadedAbi = autoloadedAbi;
+    this.address = address;
+    this.name = name || properties?.name;
+    this.nfts = nfts;
+    this.abi = abi;
+    this.supportedInterfaces = [];
+    if (supportedInterfaces?.length > 0) {
+      const index = supportedInterfaces?.indexOf('none');
+      for (let i = 0; i < supportedInterfaces.length; i++) {
+        if (i !== index) {
+          this.supportedInterfaces.push(supportedInterfaces[i]);
+        }
+      }
+    }
+    this.properties = properties;
+    if (abi) {
+      this.iface = markRaw(new ethers.utils.Interface(abi));
+    }
+    this.verified = verified;
+    this.sources = [];
+    this.creationInfo = creationInfo;
+    this.logoURI = '';
+  }
+
+  isVerified(): boolean {
+    return this.verified;
+  }
+
+  setVerified(verified: boolean): this {
+    this.verified = verified;
+    return this;
+  }
+
+  isNonFungible(): boolean {
+    return this.supportedInterfaces.includes('erc721');
+  }
+
+  isToken(): boolean | undefined {
+    if (this.supportedInterfaces === null) return;
+    return this.supportedInterfaces.includes('erc721') || this.supportedInterfaces.includes('erc1155') || this.supportedInterfaces.includes('erc20');
+  }
+
+  isAutoloadedAbi(): boolean {
+    return this.autoloadedAbi;
+  }
+
+  getNfts(): { [key: string]: any } {
+    return this.nfts;
+  }
+
+  getInterface(): ethers.utils.Interface | undefined {
+    return this.iface;
+  }
+
+  getAddress(): string {
+    return this.address;
+  }
+
+  getAbi(): any[] {
+    return this.abi;
+  }
+
+  getSupportedInterfaces(): string[] {
+    return this.supportedInterfaces;
+  }
+
+  getProperties(): ContractProperties {
+    return this.properties;
+  }
+
+  getName(): string | undefined {
+    return this.name;
+  }
+
+  getCreationBlock(): number | undefined {
+    return this.creationInfo?.block;
+  }
+
+  getCreationTrx(): string | undefined {
+    return this.creationInfo?.transaction;
+  }
+
+  getCreator(): string | undefined {
+    return this.creationInfo?.creator;
+  }
+
+}
diff --git a/src/lib/contract/ContractFactory.js b/src/lib/contract/ContractFactory.js
new file mode 100644
index 000000000..adc949399
--- /dev/null
+++ b/src/lib/contract/ContractFactory.js
@@ -0,0 +1,76 @@
+import Contract from 'src/lib/contract/Contract';
+import erc20Abi from 'erc-20-abi';
+import { erc721Abi, erc1155Abi } from 'src/lib/abi';
+
+export default class ContractFactory {
+    buildContract(data) {
+        if(!data || !data.address){
+            return;
+        }
+        let verified = false;
+        if(typeof data.abi !== 'undefined' && data.abi.length > 0) {
+            data.abi = (typeof data.abi === 'string') ? JSON.parse(data.abi) : data.abi;
+        } else if(typeof data.metadata !== 'undefined' && data.metadata !== null && data.metadata?.length > 0) {
+            let metadata = JSON.parse(data.metadata);
+            data.abi = metadata.output.abi;
+        }
+        if(data.abi && !data.autoloadedAbi){
+            verified = true;
+        }
+        data.autoloadedAbi = false;
+        if(!data.abi && !verified && data.supportedInterfaces?.length > 0) {
+            if(data.supportedInterfaces.includes('erc20')){
+                data.abi = erc20Abi;
+                data.autoloadedAbi = true;
+            } else if (data.supportedInterfaces.includes('erc721')) {
+                data.abi = erc721Abi;
+                data.autoloadedAbi = true;
+            } else if (data.supportedInterfaces.includes('erc1155')) {
+                data.abi = erc1155Abi;
+                data.autoloadedAbi = true;
+            }
+        }
+        let properties = (data.calldata) ? JSON.parse(data.calldata) : {};
+        if(!data.name){
+            if(properties?.name){
+                data.name = properties.name;
+            } else if(data.metadata) {
+                let metadata = JSON.parse(data.metadata);
+                if(metadata?.settings?.compilationTarget){
+                    data.name = Object.values(metadata?.settings?.compilationTarget)[0];
+                }
+            }
+        }
+        return  new Contract({
+            address: data.address,
+            name: data.name,
+            verified: verified,
+            creationInfo: {
+                creator: data.creator,
+                transaction: data.transaction,
+                block: data.block,
+            },
+            supportedInterfaces: data.supportedInterfaces,
+            properties: properties,
+            nfts: {},
+            abi: data.abi,
+            autoloadedAbi: data.autoloadedAbi,
+        });
+    }
+    buildEmptyContract(address) {
+        const contract = new Contract({
+            address: address,
+            name: `0x${address.slice(0, 16)}...`,
+            verified: false,
+            creationInfo: {
+                creator: null,
+                transaction: null,
+                block: null,
+            },
+            properties: {},
+            nfts: {},
+            abi: undefined,
+        });
+        return contract;
+    }
+}
diff --git a/src/lib/contract/ContractManager.js b/src/lib/contract/ContractManager.js
new file mode 100644
index 000000000..e1c8f0f2d
--- /dev/null
+++ b/src/lib/contract/ContractManager.js
@@ -0,0 +1,272 @@
+import ContractFactory from 'src/lib/contract/ContractFactory';
+import { ethers } from 'ethers';
+import axios from 'axios';
+import { getTopicHash } from 'src/lib/utils';
+import { ERC1155_TRANSFER_SIGNATURE, TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures.js';
+import { erc1155Abi, erc721MetadataAbi } from 'src/lib/abi';
+const tokenList = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/telosevm.tokenlist.json';
+const systemContractList =
+    'https://raw.githubusercontent.com/telosnetwork/token-list/main/telosevm.systemcontractlist.json';
+
+export default class ContractManager {
+    constructor(indexerApi, parser) {
+        this.contracts = {};
+        this.processing = [];
+        this.parser = parser;
+        this.factory = new ContractFactory();
+        this.indexerApi = indexerApi;
+        this.systemContractList = false;
+        this.tokenList = false;
+        this.ethersProvider = new ethers.providers.JsonRpcProvider(process.env.NETWORK_EVM_RPC);
+    }
+
+    getEthersProvider() {
+        return this.ethersProvider;
+    }
+    async getTransfers(raw) {
+        if(!raw.logs || raw.logs?.length === 0){
+            return [];
+        }
+        const logs = (typeof raw.logs === 'string') ? JSON.parse(raw.logs) : raw.logs;
+        let transfers = [];
+        for(let i = 0;i < logs.length; i++){
+            const log = logs[i];
+            const sig = log.topics[0].slice(0, 10);
+            if(TRANSFER_SIGNATURES.includes(sig)){
+                const contract = await this.getContract(log.address);
+                if(contract && contract.supportedInterfaces.includes('erc20')){
+                    transfers.push({
+                        'index': log.logIndex,
+                        'address': contract.address,
+                        'value': log.data,
+                        'decimal': contract.properties?.decimals,
+                        'to': getTopicHash(log.topics[1]),
+                        'from': getTopicHash(log.topics[2]),
+                        'symbol': contract.properties?.symbol,
+                    });
+                }
+            }
+        }
+        transfers.sort((a, b) => a.index - b.index);
+        return transfers;
+    }
+    async parseContractTransaction(raw, data, contract, transfers) {
+        if (data === '0x' || data === null || typeof contract === 'undefined') {
+            return false;
+        }
+        if (contract.getInterface()) {
+            try {
+                let transaction = await contract.getInterface().parseTransaction({ data });
+                if(!transfers){
+                    return transaction;
+                }
+                transaction.transfers = await this.getTransfers(raw);
+                return transaction;
+            } catch (e) {
+                console.warn(`Unable to parse transaction data ${data} using abi for ${contract.address}: ${e}`);
+            }
+        }
+        try {
+            const functionIface = await this.parser.getFunctionInterface(data);
+            if (functionIface) {
+                let transaction = functionIface.parseTransaction({ data });
+                if(!transfers){
+                    return transaction;
+                }
+                transaction.transfers = await this.getTransfers(raw);
+                return transaction;
+            }
+        } catch (e) {
+            console.warn(`Unable to parse transaction data using abi for ${contract.address}: ${e}`);
+        }
+    }
+
+    async loadNFTs(contract){
+        let address = contract.address.toLowerCase();
+        try {
+            let response = await this.indexerApi.get(`/contract/${address}/nfts`);
+            if(response.data.results?.length > 0){
+                for(var i = 0; i < response.data.results.length; i++){
+                    let nft = response.data.results[i];
+                    this.contracts[address].nfts[nft['tokenId']] = nft;
+                }
+                return response.data.results;
+            }
+        } catch (e) {
+            console.info(`Could load NFTs for ${address} from indexer: ${e.message}`);
+        }
+    }
+    async loadNFT(contract, tokenId){
+        let address = contract.address.toLowerCase();
+        if(!this.contracts[address]) {
+            this.contracts[address] = { 'nfts': [] };
+        } else if(this.contracts[address].nfts[tokenId]){
+            return this.contracts[address].nfts[tokenId];
+        }
+        try {
+            // TODO: change endpoint based on contract interfaces
+            let response = await this.indexerApi.get(`/contract/${address}/nfts?tokenId=${tokenId}`);
+            if(response.data.results?.length > 0){
+                this.contracts[address].nfts[tokenId] = response.data.results[0];
+                return response.data.results[0];
+            }
+            console.info(`Could load NFT #${tokenId} for ${address} from indexer: no NFT found. Trying fallback...`);
+        } catch (e) {
+            console.info(`Could load NFT #${tokenId} for ${address} from indexer: ${e.message}, trying fallback...`);
+        }
+
+        // If indexer call failed, try a direct RPC call
+        // This is to account for possible lag in indexing NFTs
+        try {
+            let contractInstance = await this.getContractFromAbi(contract.address, erc721MetadataAbi);
+            let tokenURI = await contractInstance.tokenURI(tokenId);
+            this.contracts[address].nfts[tokenId] = {
+                'id': tokenId,
+                'tokenUri': tokenURI,
+                'metadata': null,
+                'imageCache': null,
+            };
+            return this.contracts[address].nfts[tokenId];
+        } catch (e) {
+            console.error(`Could load NFT #${tokenId} for ${address} from fallback RPC calls: ${e.message}`);
+        }
+    }
+
+    async loadTokenMetadata(address, token, tokenId){
+        if(token.type === 'erc1155'){
+            const contract = await this.getContractFromAbi(address, erc1155Abi);
+            token.metadata = await contract.uri(tokenId);
+        } else {
+            const contract = await this.getContractFromAbi(address, erc721MetadataAbi);
+            token.metadata = await contract.tokenURI(tokenId);
+        }
+        token.metadata = token.metadata.replace('ipfs://', 'https://cloudflare-ipfs.com/ipfs/');
+
+        return token;
+    }
+
+    getTokenTypeFromLog(log){
+        let sig = log.topics[0].substr(0, 10);
+        let type = (log.topics.length === 4) ? 'erc721' : 'erc20';
+        return (sig === ERC1155_TRANSFER_SIGNATURE) ? 'erc1155' : type;
+    }
+
+    addContractToCache(address, contractData){
+        if(!address){
+            return;
+        }
+        let index = address.toString().toLowerCase();
+        let contract = this.factory.buildContract(contractData);
+        if(
+            typeof this.contracts[index] === 'undefined'
+            || contract.abi?.length > 0 && !this.contracts[index].abi
+            || contract.abi?.length > 0 && contract.abi.length > this.contracts[index].abi?.length
+        ){
+            this.contracts[index] = contract;
+        }
+    }
+
+    addContractsToCache(contracts){
+        for(const index in contracts){
+            this.addContractToCache(index, contracts[index]);
+        }
+    }
+
+    async loadTokenList() {
+        const results = await axios.get(tokenList);
+        const { tokens } = results.data;
+        results.data.tokens = (tokens ?? []).filter(({ chainId }) => chainId === process.env.NETWORK_EVM_CHAIN_ID);
+
+        this.tokenList = results.data || false;
+    }
+
+    async getSystemContractsList() {
+        if (!this.systemContractList) {
+            if (!this.processing['systemcontractlist']) {
+                this.processing['systemcontractlist'] = true;
+                const results = await axios.get(systemContractList);
+                const { contracts } = results.data;
+                results.data.contracts = (contracts ?? []).filter(
+                    ({ chainId }) => chainId === process.env.NETWORK_EVM_CHAIN_ID)
+                ;
+                this.systemContractList = results.data || false;
+                this.processing['systemcontractlist'] = false;
+            } else {
+                await new Promise(resolve => setTimeout(resolve, 300));
+                return await this.getSystemContractsList();
+            }
+        }
+        return this.systemContractList;
+    }
+
+    async getTokenList() {
+        if (!this.tokenList) {
+            if (!this.processing['tokenlist']) {
+                this.processing['tokenlist'] = true;
+                await this.loadTokenList();
+                this.processing['tokenlist'] = false;
+            } else {
+                await new Promise(resolve => setTimeout(resolve, 300));
+                return await this.getTokenList();
+            }
+        }
+        return this.tokenList;
+    }
+
+    getContractInstance(contract, provider) {
+        if (!contract.abi){
+            console.error('Cannot create contract instance without ABI !');
+            return false;
+        }
+
+        return new ethers.Contract(contract.address, contract.abi, provider ? provider : this.getEthersProvider());
+    }
+    async getCachedContract(address) {
+        if (address === null || typeof address !== 'string') {
+            return;
+        }
+        const addressLower = address.toLowerCase();
+        if (this.contracts[addressLower]) {
+            return this.contracts[addressLower];
+        }
+        return null;
+    }
+    async getContract(address, cacheEmpty) {
+        if (address === null || typeof address !== 'string') {
+            return;
+        }
+        const addressLower = address.toLowerCase();
+
+        if (typeof this.contracts[addressLower] !== 'undefined') {
+            return this.contracts[addressLower];
+        }
+
+        if (this.processing.includes(addressLower)) {
+            await new Promise(resolve => setTimeout(resolve, 300));
+            return await this.getContract(address);
+        }
+
+        this.processing.push(addressLower);
+        let contract = (cacheEmpty) ? { address : address } : null;
+        try {
+            let response = await this.indexerApi.get(`/contract/${address}?full=true&includeAbi=true`);
+            if(response.data?.success && response.data.results.length > 0){
+                contract = response.data.results[0];
+            }
+        } catch (e) {
+            console.error(`Could not retrieve contract ${address}: ${e.message}`);
+        }
+        if(contract === null){
+            return;
+        }
+        this.addContractToCache(address, contract);
+        let index = this.processing.indexOf(addressLower);
+        if(index > -1){
+            this.processing.splice(index, 1);
+        }
+        return this.factory.buildContract(contract);
+    }
+    async getContractFromAbi(address, abi){
+        return new ethers.Contract(address, abi, this.getEthersProvider());
+    }
+}
diff --git a/src/lib/contractVerification.js b/src/lib/contract/ContractVerification.js
similarity index 100%
rename from src/lib/contractVerification.js
rename to src/lib/contract/ContractVerification.js
diff --git a/src/lib/contract/FragmentParser.js b/src/lib/contract/FragmentParser.js
new file mode 100644
index 000000000..74bebfde9
--- /dev/null
+++ b/src/lib/contract/FragmentParser.js
@@ -0,0 +1,128 @@
+import functions_overrides from 'src/lib/abi/signature/functions_signatures_overrides.json';
+import events_overrides from 'src/lib/abi/signature/events_signatures_overrides.json';
+import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
+import { ethers } from 'ethers';
+import axios from 'axios';
+
+export default class FragmentParser {
+    constructor(evmEndpoint) {
+        this.functionInterfaces = functions_overrides;
+        this.eventInterfaces = events_overrides;
+        this.processing = [];
+        this.evmEndpoint = evmEndpoint;
+    }
+
+    async addEventInterface(hex, signature){
+        if (Object.prototype.hasOwnProperty.call(this.eventInterfaces, hex)) {
+            return;
+        }
+        this.eventInterfaces[hex] = signature;
+    }
+    async addFunctionInterface(hex, signature){
+        if (Object.prototype.hasOwnProperty.call(this.functionInterfaces, hex)) {
+            return;
+        }
+        this.functionInterfaces[hex] = signature;
+    }
+
+    async getFunctionInterface(data) {
+        let prefix = data.toLowerCase().slice(0, 10);
+        if(prefix === '0x'){
+            return;
+        }
+        if (Object.prototype.hasOwnProperty.call(this.functionInterfaces, prefix)) {
+            return new ethers.utils.Interface([this.functionInterfaces[prefix]]);
+        }
+        if(this.processing.includes(data)){
+            await new Promise(resolve => setTimeout(resolve, 300));
+            let result = await this.getFunctionInterface(data);
+            return result;
+        }
+        this.processing.push(data);
+
+        this.functionInterfaces[prefix] = '';
+        return false;
+    }
+    async getEventInterface(data) {
+        if(data === '0x'){
+            return false;
+        }
+        if (Object.prototype.hasOwnProperty.call(this.eventInterfaces, data) && this.eventInterfaces[data]) {
+            return new ethers.utils.Interface([this.eventInterfaces[data]]);
+        }
+        if(this.processing.includes(data)){
+            await new Promise(resolve => setTimeout(resolve, 300));
+            return await this.getEventInterface(data);
+        }
+        this.processing.push(data);
+
+        try {
+            const url = `https://cdn.statically.io/gh/telosnetwork/topic0/main/with_parameter_names/${data.substr(2)}`;
+            const response = await axios.get(url);
+            if(response.data){
+                this.eventInterfaces[data] = `event ${response.data}`;
+                this.processing = this.processing.filter(item => item !== data);
+                return new ethers.utils.Interface([this.eventInterfaces[data]]);
+            }
+        } catch (e) {
+            console.debug(e);
+        }
+
+        this.eventInterfaces[data] = '';
+        this.processing = this.processing.filter(item => item !== data);
+        return false;
+    }
+
+    formatLog(contract, log, parsedLog){
+        if(!parsedLog.signature){
+            return log;
+        }
+        parsedLog.function_signature = log.topics[0].slice(0, 10);
+        parsedLog.isTransfer = TRANSFER_SIGNATURES.includes(parsedLog.function_signature);
+        parsedLog.address = log.address;
+        parsedLog.logIndex = log.logIndex;
+        parsedLog.contract = contract;
+        parsedLog.value = log.action?.value;
+        parsedLog.name = parsedLog.signature;
+        return parsedLog;
+    }
+
+    async parseLog(log, contract) {
+        log.transactionHash = log.transaction_hash;
+        let parsedLog = {};
+        parsedLog.sig = log.topics[0].substr(0, 10);
+        if (contract.getInterface()) {
+            try {
+                parsedLog = contract.getInterface().parseLog(log);
+            } catch (e) {
+                parsedLog = await this.parseEvent(contract, log);
+            }
+            parsedLog = this.formatLog(contract, log, parsedLog);
+            if(parsedLog.name && parsedLog.eventFragment?.inputs){
+                parsedLog.inputs = parsedLog.eventFragment.inputs;
+            }
+            return parsedLog;
+        }
+        parsedLog = await this.parseEvent(contract, log);
+        parsedLog = this.formatLog(contract, log, parsedLog);
+        if(parsedLog.name && parsedLog.eventFragment?.inputs){
+            parsedLog.inputs = parsedLog.eventFragment.inputs;
+        }
+        parsedLog = this.formatLog(contract, log, parsedLog);
+        return parsedLog;
+    }
+
+    async parseEvent(contract, log){
+        const eventInterface = await this.getEventInterface(log.topics[0]);
+        if (eventInterface) {
+            try {
+                let parsedLog = eventInterface.parseLog(log);
+                return parsedLog;
+            } catch(e) {
+                console.error(`Failed to parse log #${log.logIndex} from event interface. Please check the ABI.`);
+            }
+        }
+        log.function_signature = log.topics[0]?.slice(0, 10);
+        return log;
+    }
+}
diff --git a/src/lib/date-utils.ts b/src/lib/date-utils.ts
new file mode 100644
index 000000000..3721e8ec0
--- /dev/null
+++ b/src/lib/date-utils.ts
@@ -0,0 +1,29 @@
+import { DAY_SECONDS, HOUR_SECONDS } from 'src/antelope/wallets/utils/date-utils';
+
+/**
+ * Translates a number of seconds to a natural language time period using the given translation function.
+ *
+ * @param {number} seconds number of seconds since epoch representing the date to check
+ * @param {function} $t translation function. Should accept a string (just the keyname without a path) and return a translated string
+ * @returns {string} plain language time period
+ */
+export function formatTimePeriod(seconds: number, $t: (key: string) => string) {
+    let quantity: number;
+    let unit: string;
+
+    if (seconds < 60) {
+        quantity = Math.round(seconds);
+        unit = quantity === 1 ? $t('antelope.words.second') : $t('antelope.words.seconds');
+    } else if (seconds < HOUR_SECONDS) {
+        quantity = Math.round(seconds / 60);
+        unit = quantity === 1 ? $t('antelope.words.minute') : $t('antelope.words.minutes');
+    } else if (seconds < DAY_SECONDS) {
+        quantity = Math.round(seconds / HOUR_SECONDS);
+        unit = quantity === 1 ? $t('antelope.words.hour') : $t('antelope.words.hours');
+    } else {
+        quantity = Math.round(seconds / DAY_SECONDS);
+        unit = quantity === 1 ? $t('antelope.words.day') : $t('antelope.words.days');
+    }
+
+    return `${quantity} ${unit}`;
+}
diff --git a/src/components/ContractTab/function-interface-utils.js b/src/lib/function-interface-utils.js
similarity index 100%
rename from src/components/ContractTab/function-interface-utils.js
rename to src/lib/function-interface-utils.js
diff --git a/src/lib/token-utils.js b/src/lib/token-utils.js
index a8bc6aa97..bf1ec7ef0 100644
--- a/src/lib/token-utils.js
+++ b/src/lib/token-utils.js
@@ -1,10 +1,11 @@
 import { WEI_PRECISION } from 'src/lib/utils';
+import DEFAULT_TOKEN_LOGO from 'assets/logo--teloscan.png';
 
 /**
  * Launches a prompt in MetaMask to add a given token as a tracked token, allowing the user to view their balance of
  * that token at a glance from MetaMask
  *
- * @param {object}    $q - a quasar instance, given from within a component at this.$q
+ * @param {object}    $q - a quasar instance, given from within a component by  useQuasar()
  * @param {string}    address - the address of the token contract
  * @param {string}    symbol - the token's ticker symbol, e.g. 'STLOS'
  * @param {string}    image - permalink url of the token's icon
@@ -40,3 +41,13 @@ export async function promptAddToMetamask(
         });
     });
 }
+export function getIcon(logoURI) {
+    if (logoURI && logoURI !== '') {
+        if (logoURI.startsWith('ipfs://')) {
+            return logoURI.replace(/ipfs:\/\//, 'https://ipfs.io/ipfs/');
+        }
+        return logoURI;
+    } else {
+        return DEFAULT_TOKEN_LOGO;
+    }
+}
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 84391d872..73be988e7 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -1,10 +1,24 @@
 import { BigNumber, ethers } from 'ethers';
 import moment from 'moment';
+
+export const REVERT_FUNCTION_SELECTOR = '0x08c379a0';
+export const REVERT_PANIC_SELECTOR = '0x4e487b71';
+export const ZERO_ADDRESSES = '0x0000000000000000000000000000000000000000';
+export const DEAD_ADDRESSES = [
+    ZERO_ADDRESSES,
+    '0x00000000000000000000000000000000000xdead',
+];
+
+export const ALLOWED_IMAGE_EXTENSIONS = [
+    'svg', 'jpg', 'jpeg', 'gif', 'png', 'webp',
+];
+export const ALLOWED_VIDEO_EXTENSIONS = [
+    'mp4', 'webm', 'ogg',
+];
 import keccak from 'keccak';
-const REVERT_FUNCTION_SELECTOR = '0x08c379a0';
-const REVERT_PANIC_SELECTOR = '0x4e487b71';
 
 export const WEI_PRECISION = 18;
+export const GAS_PRECISION = 9;
 export const DISPLAY_DECIMALS = 4;
 export const LOGIN_EVM = 'evm';
 export const LOGIN_NATIVE = 'native';
@@ -21,13 +35,14 @@ 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();
-    // Use string, do not convert to number so we never loose precision
+    str = str.padEnd(str.length + displayDecimals, '0');
     if(displayDecimals > 0 && str.includes('.')) {
         const parts = str.split('.');
         return parts[0] + '.' + parts[1].slice(0, displayDecimals);
     }
     return str;
 }
+
 export function isValidAddressFormat(ethAddressString) {
     const pattern = /^0x[a-fA-F0-9]{40}$/;
     return pattern.test(ethAddressString);
@@ -196,3 +211,48 @@ export function getFormattedUtcOffset(date) {
     const minutes = pad(offset % 60);
     return sign + hours + ':' + minutes;
 }
+
+/**
+ * This functions returns the name of the browser
+ */
+export function getBrowserName() {
+    const userAgent = window.navigator.userAgent;
+    const browsers = {
+        chrome: /chrome/i,
+        safari: /safari/i,
+        firefox: /firefox/i,
+        ie: /internet explorer/i,
+        edge: /edge/i,
+        opera: /opera/i,
+        ios_saf: /version\/(\d).*safari/i,
+    };
+
+    for (const key in browsers) {
+        if (browsers[key].test(userAgent)) {
+            return key;
+        }
+    }
+
+    return 'unknown';
+}
+
+/**
+ * This functions returns true if we are using Firefox
+ */
+export function isFirefox() {
+    return getBrowserName() === 'firefox';
+}
+
+/**
+ * This functions returns true if we are using Safari
+ */
+export function isSafari() {
+    return getBrowserName() === 'safari';
+}
+
+/**
+ * This functions returns true if we are using Chrome
+ */
+export function isChrome() {
+    return getBrowserName() === 'chrome';
+}
diff --git a/src/pages/AccountAddress.vue b/src/pages/AccountAddress.vue
deleted file mode 100644
index b6eb6fd28..000000000
--- a/src/pages/AccountAddress.vue
+++ /dev/null
@@ -1,405 +0,0 @@
-<!-- eslint-disable vue/no-unused-components -->
-<script>
-import { toChecksumAddress } from 'src/lib/utils';
-import { Web3 } from 'web3';
-import TransactionTable from 'components/TransactionTable';
-import InternalTransactionTable from 'components/InternalTransactionTable';
-import TransferTable from 'components/TransferTable';
-import TokenList from 'components/TokenList';
-import ConfirmationDialog from 'components/ConfirmationDialog';
-import ContractTab from 'components/ContractTab/ContractTab';
-import TransactionField from 'components/TransactionField';
-import AddressField from 'components/AddressField';
-import CopyButton from 'components/CopyButton';
-import GenericContractInterface from 'components/ContractTab/GenericContractInterface.vue';
-
-const web3 = new Web3();
-
-const tabs = {
-    transactions: '#transactions',
-    int_transactions: '#int_transactions',
-    erc20_transfers: '#erc20',
-    erc721_transfers: '#erc721',
-    erc1155_transfers: '#erc1155',
-    tokens: '#tokens',
-    contract: '#contract',
-};
-
-export default {
-    name: 'AccountAddress',
-    components: {
-        AddressField,
-        ConfirmationDialog,
-        ContractTab,
-        CopyButton,
-        GenericContractInterface,
-        TokenList,
-        TransactionField,
-        TransactionTable,
-        InternalTransactionTable,
-        TransferTable,
-    },
-    data() {
-        return {
-            accountLoading: false,
-            title: '',
-            telosAccount: null,
-            balance: null,
-            nonce: null,
-            isContract: false,
-            isVerified: null,
-            contract: null,
-            verificationDate: '',
-            tab: '#transactions',
-            tokens: null,
-            confirmationDialog: false,
-        };
-    },
-    computed: {
-        address() {
-            return this.$route.params?.address ?? '';
-        },
-    },
-    watch: {
-        address: {
-            handler(newValue, oldValue) {
-                if (newValue !== oldValue) {
-                    const newAsChecksum = toChecksumAddress(newValue);
-                    if (newAsChecksum !== newValue) {
-                        this.$router.replace({ params: { address: newAsChecksum } });
-                    }
-                    this.loadAccount();
-                }
-            },
-            immediate: true,
-        },
-        $route: {
-            immediate: true,
-            deep: true,
-            async handler(newRoute, oldRoute = {}) {
-                if (newRoute !== oldRoute) {
-                    const { hash: newHash } = newRoute;
-
-                    if (newRoute.name !== 'address' || !newHash) {
-                        return;
-                    }
-
-                    if (this.accountLoading && newHash === tabs.contract) {
-                        // wait for account to load; this.isContract will not be set immediately on first load
-                        await new Promise(resolve => setTimeout(resolve, 750));
-                    }
-
-                    const tabHashes = Object.values(tabs);
-                    const newHashIsInvalid =
-                        !tabHashes.includes(newHash) ||
-                        (newHash === tabs.contract && !this.isContract);
-
-                    if (newHashIsInvalid) {
-                        this.$router.replace({ hash: tabs.transactions });
-                    }
-                }
-            },
-        },
-    },
-    mounted() {
-        this.loadAccount();
-    },
-    methods: {
-        async loadAccount() {
-            if (!this.address) {
-                return;
-            }
-            this.accountLoading = true;
-
-            const account = await this.$evm.telos.getEthAccount(this.address);
-            if (account.code.length > 0){
-                this.isContract = true;
-                this.contract = await this.$contractManager.getContract(this.address);
-                this.isVerified = this.contract.verified;
-            }
-
-            this.balance = this.getBalanceDisplay(account.balance);
-            this.telosAccount = account.account;
-            this.isContract = account.code.length > 0;
-
-            if (this.isContract === false){
-                this.contract = null;
-                this.nonce = account.nonce;
-            }
-
-            const isVerifiedContract = this.isContract && this.isVerified;
-            const knownToken = this.$contractManager.tokenList.tokens
-                .find(({ address }) => address.toLowerCase() === this.address.toLowerCase());
-
-            if (knownToken?.name) {
-                this.title = knownToken.name;
-            } else if (isVerifiedContract) {
-                this.title = this.contract.getName();
-            } else if (this.isContract) {
-                this.title = this.$t('pages.contract');
-            } else {
-                this.title = this.$t('pages.account');
-            }
-
-            this.accountLoading = false;
-        },
-        getBalanceDisplay(balance) {
-            let strBalance = web3.utils.fromWei(balance, 'ether');
-            const decimalIndex = strBalance.indexOf('.');
-            if (decimalIndex > 0) {
-                strBalance = `${strBalance.substring(
-                    0,
-                    decimalIndex + 5,
-                )}`;
-            }
-            return this.$t('pages.tlos_balance', { balance: strBalance });
-        },
-        getAddressNativeExplorerURL() {
-            if (!this.telosAccount) {
-                return '';
-            }
-
-            return this.$t('pages.account_url', { domain: process.env.NETWORK_EXPLORER, account: this.telosAccount });
-        },
-        disableConfirmation(){
-            this.confirmationDialog = false;
-        },
-    },
-};
-</script>
-
-<template>
-<div class="pageContainer q-pt-xl">
-    <div>
-        <div class="row tableWrapper justify-between q-mb-lg">
-            <div class="homeInfo">
-                <div class="text-primary text-h4 q-pr-xs">
-                    {{ title }}
-                </div>
-                <q-icon
-                    v-if="isContract && isVerified !== null"
-                    class="cursor"
-                    :name="isVerified ? 'verified' : 'warning'"
-                    :class="isVerified ? 'text-positive' : 'text-negative'"
-                    size="1.25rem"
-                    @click="confirmationDialog = true"
-                />
-                <ConfirmationDialog
-                    class="text-secondary"
-                    :flag="confirmationDialog"
-                    :address="address"
-                    :status="isVerified"
-                    @dialog="disableConfirmation"
-                />
-                <CopyButton
-                    class="text-secondary"
-                    :text="address"
-                    :accompanyingText="address"
-                    description="address"
-                />
-                <template v-if="contract">
-                    <div class="text-white">
-                        {{ $t('pages.created_at_trx' )}} &nbsp;
-                        <TransactionField :transaction-hash="contract.getCreationTrx()"/>
-                    </div>
-                    <div class="text-white">{{ $t('pages.by_address') }}
-                        &nbsp;
-                        <AddressField :address="contract.getCreator()"/>
-                    </div>
-                </template>
-                <small v-else>
-                    <div class="text-white">
-                        {{ $t('pages.number_used_once') }}: &nbsp;
-                        <span class="q-pl-xs">{{ nonce }}</span>
-                    </div>
-                </small>
-            </div>
-            <div class="dataCardsContainer">
-                <div v-if="!!telosAccount" class="dataCardItem">
-                    <div class="dataCardTile">
-                        {{ $t('pages.native_account') }}
-                    </div>
-                    <div class="dataCardData">
-                        <a :href="getAddressNativeExplorerURL()" target="_blank">{{ telosAccount }}</a>
-                    </div>
-                </div>
-                <div v-if="!!balance" class="dataCardItem balance ">
-                    <div class="dataCardTile">
-                        {{ $t('pages.balance') }}
-                    </div>
-                    <div class="dataCardData">
-                        {{balance}}
-                    </div>
-                </div>
-            </div>
-        </div>
-        <q-tabs
-            v-model="tab"
-            class="tabs-header tabsBar topRounded text-white tableWrapper"
-            dense
-            active-color="secondary"
-            align="justify"
-            narrow-indicator
-            :class="{ 'q-dark': $q.dark.isActive}"
-        >
-            <q-route-tab
-                name="transactions"
-                :to="{ hash: '#transactions' }"
-                exact
-                replace
-                :label="$t('pages.transactions')"
-            />
-            <q-route-tab
-                name="int_transactions"
-                :to="{ hash: '#int_transactions' }"
-                exact
-                replace
-                :label="$t('pages.internal_txns')"
-            />
-            <q-route-tab
-                name="erc20_transfers"
-                :to="{ hash: '#erc20' }"
-                exact
-                replace
-                :label="$t('pages.erc20_transfers')"
-            />
-            <q-route-tab
-                name="erc721_transfers"
-                :to="{ hash: '#erc721' }"
-                exact
-                replace
-                :label="$t('pages.erc721_transfers')"
-            />
-            <q-route-tab
-                name="erc1155_transfers"
-                :to="{ hash: '#erc1155' }"
-                exact
-                replace
-                :label="$t('pages.erc1155_transfers')"
-            />
-            <q-route-tab
-                name="tokens"
-                :to="{ hash: '#tokens' }"
-                exact
-                replace
-                :label="$t('pages.tokens')"
-            />
-            <q-route-tab
-                v-if="isContract"
-                name="contract"
-                :to="{ hash: '#contract' }"
-                exact
-                replace
-                :label="$t('pages.contract')"
-            />
-        </q-tabs>
-        <div class="q-mb-md tableWrapper">
-            <q-tab-panels
-                :key="address"
-                v-model="tab"
-                class="shadow-2"
-                animated
-                keep-alive="keep-alive"
-            >
-                <q-tab-panel name="transactions">
-                    <TransactionTable :title="address" :filter="{address}"/>
-                </q-tab-panel>
-                <q-tab-panel name="int_transactions">
-                    <InternalTransactionTable :title="address" :filter="{address}"/>
-                </q-tab-panel>
-                <q-tab-panel name="erc20_transfers">
-                    <TransferTable
-                        title="ERC-20 Transfers"
-                        token-type="erc20"
-                        :initialPageSize="10"
-                        :address="address"
-                    />
-                </q-tab-panel>
-                <q-tab-panel name="erc1155_transfers">
-                    <TransferTable
-                        title="ERC-1155 Transfers"
-                        token-type="erc1155"
-                        :initialPageSize="10"
-                        :address="address"
-                    />
-                </q-tab-panel>
-                <q-tab-panel name="erc721_transfers">
-                    <TransferTable
-                        title="ERC-721 Transfers"
-                        token-type="erc721"
-                        :initialPageSize="10"
-                        :address="address"
-                    />
-                </q-tab-panel>
-                <q-tab-panel name="tokens">
-                    <TokenList :address="address"/>
-                </q-tab-panel>
-                <q-tab-panel v-if="isContract" name="contract">
-                    <ContractTab v-if="isVerified" :contract="contract"/>
-                    <GenericContractInterface v-else/>
-                </q-tab-panel>
-            </q-tab-panels>
-        </div>
-    </div>
-</div>
-</template>
-
-<style scoped lang="sass">
-.shadow-2
-    box-shadow: none !important
-
-.dataCardsContainer .dataCardItem
-  width: fit-content
-  height: 5rem
-
-.homeInfo .text-secondary .q-icon
-  color: white !important
-
-.q-tab-panel
-  padding: 0
-
-.q-icon
-  padding-bottom: .75rem
-
-.cursor
-  cursor: pointer
-
-.tabs-header
-  background: white
-  color: black !important
-  &.q-dark
-    background: $dark
-    color: white !important
-
-.text-primary
-  display: inline-block
-
-@media only screen and (max-width: 1200px)
-    .pageContainer
-        div
-            .tableWrapper
-                &:first-child
-                    padding: 20px
-@media only screen and (max-width: 768px)
-    .dataCardsContainer
-        width: 100%
-        justify-content: center
-        .dataCardItem
-            width: 100%
-    .pageContainer
-        padding-top: 30px
-        background: linear-gradient(#252a5e 17.19%, #2d4684 45.83%, transparent 65.83%)
-    .tableWrapper
-        justify-content: center
-    .homeInfo
-        padding: 20px
-        text-align: center
-        margin-bottom: 30px
-        .c-copy-button
-            width: 100%
-        .text-h4
-            margin-bottom: 10px
-            word-break: break-word
-            line-height: 1.3em
-            font-size: 2.4em
-</style>
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
new file mode 100644
index 000000000..5947aa844
--- /dev/null
+++ b/src/pages/AccountPage.vue
@@ -0,0 +1,439 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { contractManager } from 'src/boot/telosApi';
+import { indexerApi } from 'src/boot/telosApi';
+import { evm } from 'src/boot/evm';
+import { toChecksumAddress } from 'src/lib/utils';
+import { getIcon } from 'src/lib/token-utils';
+import Contract from 'src/lib/contract/Contract';
+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 NftTransfersTable from 'components/NftTransfersTable.vue';
+import TokenList from 'components/Token/TokenList.vue';
+import ApprovalList from 'components/Token/ApprovalList.vue';
+import HolderList from 'components/Token/HolderList.vue';
+import NFTList from 'components/Token/NFTList.vue';
+import ContractTab from 'components/ContractTab/ContractTab.vue';
+import CopyButton from 'components/CopyButton.vue';
+import GenericContractInterface from 'components/ContractTab/GenericContractInterface.vue';
+import AddressQR from 'src/components/AddressQR.vue';
+import AddressOverview from 'src/components/AddressOverview.vue';
+import AddressMoreInfo from 'src/components/AddressMoreInfo.vue';
+import ContractMoreInfo from 'src/components/ContractMoreInfo.vue';
+
+
+const { t: $t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+
+const tabs = ['transactions', 'collection', 'holders', 'internaltx', 'tokens', 'nfts', 'approvals', 'tokentxns', 'erc721txns', 'erc1155txns', 'contract'];
+
+const accountLoading = ref(false);
+const title = ref('');
+const fullTitle = ref('');
+const telosAccount = ref('');
+const balance = ref('0');
+const nonce = ref<number | null>(null);
+const contract = ref<Contract | null>(null);
+const tab = ref(tabs[0]);
+const initialLoadComplete = ref(false);
+
+const accountAddress = computed(() => route.params.address as string ?? '');
+const isLoggedIn = computed(() => store.getters['login/isLoggedIn']);
+const address = computed(() => store.getters['login/address']);
+
+watch(accountAddress, (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+        const newAsChecksum = toChecksumAddress(newVal);
+        if (newAsChecksum !== newVal) {
+            router.replace({ params: { address: newAsChecksum } });
+        }
+        loadAccount().then(() => {
+            initialLoadComplete.value = true;
+        });
+    }
+}, { deep: true, immediate: true });
+
+watch(() => route.query.tab, (newTab) => {
+    const str = newTab as string;
+    tab.value = tabs.includes(str) ? str : tabs[0];
+});
+
+watch(tab, (newTab) => {
+    router.push({ query: { tab: newTab } });
+});
+
+watch(isLoggedIn, (value) => {
+    // if user logs out while on approvals tab return to transactions
+    if (!value && tab.value === 'approvals'){
+        router.push({ query: { tab: 'transactions' } });
+    }
+});
+
+onMounted(() => {
+    const tabQueryParam = route.query.tab as string;
+    tab.value = tabs.includes(tabQueryParam) ? tabQueryParam : tabs[0];
+});
+
+async function loadAccount() {
+    if(!accountAddress.value || accountLoading.value){
+        return;
+    }
+    accountLoading.value = true;
+    const tokenList = await contractManager.getTokenList();
+    try {
+        const response: BalanceQueryResponse = await indexerApi.get(
+            `/account/${accountAddress.value}/balances?includeAbi=true`,
+            // `/account/${accountAddress.value}/balances?contract=___NATIVE_CURRENCY___&includeAbi=true`,
+        );
+        //TODO restore original api query when contract param query is fixed
+        const systemTokenResult = response.data.results.find((r : BalanceResult) => r.contract === '___NATIVE_CURRENCY___') as BalanceResult;
+
+        // balance.value = (response.data?.results?.length > 0) ? response.data.results[0].balance : '0';
+        balance.value = systemTokenResult ? systemTokenResult.balance : '0';
+    } catch (e) {
+        console.error('Could not get balance: ', e);
+    }
+    contract.value = null;
+    fullTitle.value = '';
+    nonce.value = 0;
+    title.value = $t('pages.account');
+    const cachedContract = await contractManager.getContract(accountAddress.value);
+    if (cachedContract?.creationInfo?.transaction || cachedContract?.supportedInterfaces?.length > 0){
+        contract.value = cachedContract;
+        if(contract.value && contract.value.supportedInterfaces?.includes('erc20')){
+            tokenList.tokens.forEach((token: Token) => {
+                if(token.address.toLowerCase() ===  contract.value?.address.toLowerCase()){
+                    contract.value.issuer = token.issuer;
+                    contract.value.issuer_link = token.issuer_link;
+                    contract.value.logoURI = token.logoURI;
+                    contract.value.setVerified(true);
+                }
+            });
+        }
+        title.value = $t('pages.contract');
+    } else {
+        contractManager.addContractToCache(accountAddress.value, { address: accountAddress.value });
+        try {
+            const account = await evm.telos.getEthAccount(accountAddress.value);
+            telosAccount.value = account?.account;
+            nonce.value = account?.nonce;
+        } catch (e) {
+            console.info(e);
+        }
+    }
+
+    accountLoading.value = false;
+}
+
+</script>
+
+<template>
+<div v-if="accountAddress && !accountLoading" :key="accountAddress" class="c-address q-pt-xl">
+    <div class="row justify-between q-mb-lg">
+        <div class="col-12">
+            <div class="c-address__header">
+                <div class="c-address__header-text-container">
+                    <q-img
+                        v-if="contract && contract.supportedInterfaces?.includes('erc20')"
+                        class="c-address__coin-icon"
+                        :alt="contract.getName() + ' ERC20 token'"
+                        :src="getIcon(contract.logoURI)"
+                    />
+                    <q-icon
+                        v-else-if="!contract"
+                        name="account_circle"
+                        size="sm"
+                    />
+                    <q-icon
+                        v-else
+                        :name="(contract.supportedInterfaces?.includes('erc721')) ? 'perm_media' : 'source'"
+                        size="sm"
+                    />
+                    <span class="c-address__title">{{ title }}</span>
+                    <span class="c-address__hex">{{ accountAddress }}</span>
+                    <q-tooltip v-if="fullTitle">{{ fullTitle }} </q-tooltip>
+                </div>
+                <div class="flex align-center">
+                    <CopyButton
+                        :text="accountAddress"
+                        accompanyingText=""
+                        description="address"
+                        class="q-mr-sm"
+                    />
+                    <AddressQR
+                        v-if="accountAddress"
+                        :address="accountAddress"
+                    />
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <div class="c-address__info-container row q-mb-lg q-col-gutter-md">
+        <div class="col-12 col-md-6">
+            <AddressOverview
+                :balance="balance"
+                :loadingComplete="initialLoadComplete"
+            />
+        </div>
+        <div class="col-12 col-md-6">
+            <ContractMoreInfo
+                v-if="contract"
+                :address="contract?.getCreator() ?? ''"
+                :transaction="contract?.getCreationTrx() ?? ''"
+                :loadingComplete="initialLoadComplete"
+            />
+            <AddressMoreInfo
+                v-else
+                :address="accountAddress"
+                :loadingComplete="initialLoadComplete"
+            />
+        </div>
+    </div>
+    <q-tabs
+        v-model="tab"
+        dense
+        class="c-address__tabs"
+        active-class="c-address__tabs-tab--active"
+        content-class="c-address__tabs-content"
+        indicator-color="transparent"
+    >
+        <q-tab
+            name="transactions"
+            class="c-address__tabs-tab"
+            :label="$t('pages.transactions.transactions')"
+        />
+        <q-tab
+            v-if="contract && contract.supportedInterfaces.includes('erc721')"
+            name="collection"
+            class="c-address__tabs-tab"
+            :label="$t('components.nfts.collection')"
+        />
+        <q-tab
+            v-if="contract && contract.isToken()"
+            name="holders"
+            class="c-address__tabs-tab"
+            :to="{ query: {tab: 'holders' }}"
+            :label="$t('pages.holders')"
+        />
+        <q-tab
+            v-else
+            name="internaltx"
+            class="c-address__tabs-tab"
+            :label="$t('pages.internal_txns')"
+        />
+        <q-tab
+            name="tokens"
+            class="c-address__tabs-tab"
+            :label="$t('pages.tokens')"
+        />
+        <q-tab
+            v-if="!contract"
+            name="nfts"
+            class="c-address__tabs-tab"
+            :label="$t('components.nfts.nfts')"
+        />
+        <q-tab
+            v-if="
+                !contract
+                    && isLoggedIn
+                    && toChecksumAddress(accountAddress) === toChecksumAddress(address)
+            "
+            name="approvals"
+            class="c-address__tabs-tab"
+            :label="$t('pages.approvals')"
+        />
+        <q-tab
+            name="tokentxns"
+            class="c-address__tabs-tab"
+            :label="$t('pages.erc20_transfers')"
+        />
+        <q-tab
+            name="erc721txns"
+            class="c-address__tabs-tab"
+            :label="$t('pages.erc721_transfers')"
+        />
+        <q-tab
+            name="erc1155txns"
+            class="c-address__tabs-tab"
+            :label="$t('pages.erc1155_transfers')"
+        />
+        <q-tab
+            v-if="contract"
+            name="contract"
+            class="c-address__tabs-tab c-address__tabs-tab--with-icon"
+            :label="$t('pages.contract')"
+        >
+            <q-icon
+                :class="{
+                    'c-address__tabs-tab-icon': true,
+                    'c-address__tabs-tab-icon--selected': tab === 'contract',
+                    'c-address__tabs-tab-icon--verified fas fa-check-circle': contract?.isVerified(),
+                    'c-address__tabs-tab-icon--unverified fa fa-exclamation-triangle': !contract?.isVerified(),
+                }"
+            />
+        </q-tab>
+    </q-tabs>
+    <div class="q-mb-md">
+        <q-tab-panels
+            ref="panels"
+            :key="address"
+            v-model="tab"
+            class="c-address__panels"
+            animated
+            transition-next="fade"
+            transition-prev="fade"
+            keep-alive
+        >
+            <q-tab-panel name="transactions">
+                <TransactionTable
+                    v-if="accountAddress"
+                    :title="accountAddress"
+                    :account-address="accountAddress"
+                />
+            </q-tab-panel>
+            <q-tab-panel
+                v-if="contract && contract.supportedInterfaces?.includes('erc721')"
+                name="collection"
+            >
+                <NFTList :address="contract.address" filter="contract" />
+            </q-tab-panel>
+            <q-tab-panel v-if="contract && contract.isToken()" name="holders">
+                <HolderList :contract="contract" />
+            </q-tab-panel>
+            <q-tab-panel v-else name="internaltx">
+                <InternalTransactionTable :title="accountAddress" :filter="{accountAddress}"/>
+            </q-tab-panel>
+            <q-tab-panel
+                v-if="
+                    !contract
+                        && isLoggedIn
+                        && toChecksumAddress(accountAddress) === toChecksumAddress(address)
+                "
+                name="approvals"
+            >
+                <ApprovalList type="erc20" :accountAddress="accountAddress" />
+            </q-tab-panel>
+            <q-tab-panel name="nfts">
+                <NFTList :address="accountAddress" filter="account" />
+            </q-tab-panel>
+            <q-tab-panel name="tokens">
+                <TokenList :address="accountAddress"/>
+            </q-tab-panel>
+            <q-tab-panel name="tokentxns">
+                <NftTransfersTable
+                    title="ERC-20 Transfers"
+                    token-type="erc20"
+                    :initialPageSize="10"
+                    :address="accountAddress"
+                />
+            </q-tab-panel>
+            <q-tab-panel name="erc721txns">
+                <NftTransfersTable
+                    title="ERC-721 Transfers"
+                    token-type="erc721"
+                    :initialPageSize="10"
+                    :address="accountAddress"
+                />
+            </q-tab-panel>
+            <q-tab-panel name="erc1155txns">
+                <NftTransfersTable
+                    title="ERC-1155 Transfers"
+                    token-type="erc1155"
+                    :initialPageSize="10"
+                    :address="accountAddress"
+                />
+            </q-tab-panel>
+            <q-tab-panel v-if="contract" name="contract">
+                <ContractTab v-if="contract.isVerified()" :contract="contract"/>
+                <GenericContractInterface v-else  :contract="contract" />
+            </q-tab-panel>
+        </q-tab-panels>
+    </div>
+</div>
+</template>
+
+<style lang="scss">
+.c-address {
+    @include page-container;
+
+    &__info-container{
+        margin-bottom: 2.5rem;
+    }
+
+    &__tabs {
+        @include tabs-container;
+
+        &-tab {
+            $tab: &;
+            height: 32px;
+            margin-top: auto;
+            margin-bottom: auto;
+
+            &-icon {
+                margin-left: 6px;
+                &--verified {
+                    color: var(--q-positive);
+                }
+
+                &--unverified {
+                    color: var(--q-warning);
+                }
+            }
+        }
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
+
+    &__header-text-container {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: wrap;
+        max-width: 100%;
+    }
+
+    &__title {
+        font-size: 1.4rem;
+        font-weight: bold;
+    }
+
+    &__hex {
+        font-size: 0.85rem;
+        word-break: break-all;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            font-size: 1rem;
+        }
+    }
+
+    &__coin-icon {
+        width: 24px;
+        height: 24px;
+    }
+
+    &__panels {
+        background: transparent;
+        --v-overflow: visible;
+        overflow: visible !important;
+    }
+
+    // quasar overrides
+    .q-tab-panel {
+        padding: 0;
+    }
+}
+</style>
diff --git a/src/pages/Block.vue b/src/pages/Block.vue
deleted file mode 100644
index c6c84d640..000000000
--- a/src/pages/Block.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script>
-import TransactionTable from 'components/TransactionTable';
-import DateField from 'components/DateField';
-import { mapActions } from 'vuex';
-
-export default {
-    name: 'BlockPage',
-    components: { DateField, TransactionTable },
-    data() {
-        return {
-            block: this.$route.params.block,
-            blockData: null,
-        };
-    },
-    mounted() {
-        this.loadBlock();
-    },
-    watch: {
-        '$route.params.block': {
-            handler(newBlock) {
-                if (this.block === newBlock) {
-                    return;
-                }
-                this.block = newBlock;
-                this.loadBlock();
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        ...mapActions('evm', ['doRPC']),
-        async loadBlock() {
-            const blockResponse = await this.doRPC({
-                method: 'eth_getBlockByNumber',
-                params: [`0x${parseInt(this.block).toString(16)}`, false],
-            });
-            this.blockData = blockResponse.result;
-        },
-        prevBlock() {
-            this.resetBlockData();
-            this.$router.push({ name: 'block', params: { block: parseInt(this.block) - 1 } });
-        },
-        nextBlock() {
-            this.resetBlockData();
-            this.$router.push({ name: 'block', params: { block: parseInt(this.block) + 1 } });
-        },
-        resetBlockData() {
-            this.blockData = null;
-        },
-    },
-};
-</script>
-<template>
-<div class="pageContainer q-pt-xl">
-    <div>
-        <div class="row justify-between q-mb-lg">
-            <div class="block-container">
-                <div class="text-primary text-h4">
-                    <div>Block</div>
-                </div>
-                <div class="block-container__block-navigation inline ">
-                    <span class="block-container__block-number inline text-white">{{block}}</span>
-                    <div class="block-container__block-navigation--box inline" @click="prevBlock">
-                        <q-icon class="fas fa-arrow-left" size="8px"/>
-                    </div>
-                    <div class="block-container__block-navigation--box inline" @click="nextBlock">
-                        <q-icon class="fas fa-arrow-right" size="8px"/>
-                    </div>
-                </div>
-            </div>
-            <div class="dataCardsContainer">
-                <div class="dataCardItem">
-                    <div class="dataCardTile">
-                        {{ $t('pages.gas_used') }}
-                    </div>
-                    <div v-if="blockData" class="dataCardData">
-                        {{ parseInt(blockData.gasUsed, 16) }}
-                    </div>
-                    <div v-else class="dataCardData">0</div>
-                </div>
-                <div class="dataCardItem">
-                    <div class="dataCardTile">
-                        {{ $t('pages.transactions') }}
-                    </div>
-                    <div v-if="blockData" class="dataCardData">
-                        {{ blockData.transactions.length }}
-                    </div>
-                    <div v-else class="dataCardData">0</div>
-                </div>
-                <div v-if="blockData" class="dataCardItem time-stamp">
-                    <DateField :epoch="parseInt(blockData.timestamp, 16)"/>
-                </div>
-                <div v-else class="dataCardItem time-stamp"></div>
-            </div>
-        </div>
-    </div>
-    <div class="tableWrapper shadow-2 content-container q-mt-lg">
-        <TransactionTable :title="block" :filter="{block}"/>
-    </div>
-</div>
-</template>
-
-<style scoped lang="sass">
-.dataCardData
-    height: 40px
-
-.dataCardItem
-    color: $white
-
-.inline
-    display: inline-flex
-    align-items: center
-    justify-content: center
-
-.block-container
-    &__block-number
-        width: 100px
-        font-size: 16px
-        margin-right: 6px
-    &__block-navigation
-        height: 24px
-        margin-top: 8px
-        color: $white
-        &--box
-            height: 16px
-            width: 16px
-            margin: 0 2px 0 2px
-            border: 1px solid $white
-            border-radius: 2px
-            cursor: pointer
-.shadow-2
-    box-shadow: none !important
-
-@media only screen and (max-width: 1200px)
-    .row.justify-between.q-mb-lg
-        padding: 5px 15px
-@media only screen and (max-width: 768px)
-    .pageContainer
-        background: linear-gradient(#252a5e 17.19%, #2d4684 65.83%, transparent 100%)
-    .time-stamp
-        text-align: center
-        width: 100%
-        min-height: 38px
-    .dataCardsContainer
-        width: 100%
-        margin-top: 30px
-</style>
diff --git a/src/pages/BlockListPage.vue b/src/pages/BlockListPage.vue
new file mode 100644
index 000000000..fcf74b8d4
--- /dev/null
+++ b/src/pages/BlockListPage.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import BlockTable from 'components/BlockTable.vue';
+
+const { t: $t } = useI18n();
+
+const showEmptyBlocks = ref(false);
+
+</script>
+
+<template>
+<q-page class="c-blocks">
+
+    <div class="c-blocks__header">
+        <span class="c-blocks__header-title">{{ $t('pages.blocklist.title') }}</span>
+    </div>
+
+    <div class="c-blocks__body">
+        <q-card>
+            <q-toggle
+                v-model="showEmptyBlocks"
+                class="c-blocks__toggle"
+                label="display empty blocks"
+                color="primary"
+                checked-icon="visibility"
+                unchecked-icon="visibility_off"
+            />
+            <BlockTable :showEmptyBlocks='showEmptyBlocks' class="c-blocks__block-table" :title="'Block List'"/>
+        </q-card>
+    </div>
+
+</q-page>
+</template>
+
+<style lang="scss">
+.c-blocks {
+    @include page-container;
+
+    &__header {
+        @include page-header;
+        &-nav-btn {
+            @include page-header-nav-btn;
+        }
+    }
+
+    &__tabs {
+        @include tabs-container;
+    }
+
+    &__body {
+        @include page-body;
+    }
+
+    &__toggle {
+        margin: .5rem;
+        text-transform: capitalize;
+        font-size: 0.8rem;
+        display: flex !important;
+        flex-flow: row-reverse;
+    }
+}
+
+</style>
diff --git a/src/pages/BlockPage.vue b/src/pages/BlockPage.vue
new file mode 100644
index 000000000..729dc4ea6
--- /dev/null
+++ b/src/pages/BlockPage.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+
+import { ref, watch, onMounted, computed, toRaw } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { indexerApi } from 'src/boot/telosApi';
+import TransactionTable from 'components/TransactionTable.vue';
+import BlockOverview from 'components/BlockOverview.vue';
+import { BlockData } from 'src/types';
+
+const router = useRouter();
+const route = useRoute();
+const { t: $t } = useI18n();
+
+const defaultTab = 'overview';
+const tabs = ['overview', 'transactions'];
+
+const tab = ref(defaultTab);
+const block = ref(0);
+const blockNumber = computed(() => block.value ?? 0);
+const blockData = ref<BlockData | null>(null);
+
+const transactionsCount = computed(() => blockData.value ? blockData.value.transactionsCount : 0);
+
+// Methods
+
+function prevBlock() {
+    router.push({ name: 'block', params: { block: block.value - 1 } });
+}
+
+function nextBlock() {
+    router.push({ name: 'block', params: { block: block.value + 1 } });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function visitNativeBlockExplorer(extraData: any) {
+    const explorerLink = process.env.NETWORK_EXPLORER;
+    window.open(`${explorerLink}/block/${extraData}`, '_blank');
+}
+
+const loadBlockData = async () => {
+    try {
+        if (blockNumber.value <= 0) {
+            return;
+        }
+        const response = await indexerApi.get(`/block/${blockNumber.value}`);
+        blockData.value = toRaw(response.data?.results?.[0]) as BlockData;
+    } catch (error) {
+        console.error('Failed to fetch block data:', error);
+        blockData.value = null;
+    }
+};
+
+// update url on block change
+watch(block, (newBlock) => {
+    router.push({ params: { block: newBlock } });
+    loadBlockData();
+});
+
+watch(() => route.params.block, (newBlock) => {
+    const blockNumber = parseInt(newBlock as string);
+    if (block.value === blockNumber) {
+        return;
+    }
+    block.value = blockNumber;
+}, { immediate: true });
+
+watch(() => route.query.tab, (newTab) => {
+    const str = newTab as string;
+    tab.value = tabs.includes(str) ? str : defaultTab;
+});
+
+watch(tab, (newTab) => {
+    router.push({ query: { tab: newTab } });
+});
+
+onMounted(() => {
+    const tabQueryParam = route.query.tab as string;
+    tab.value = tabs.includes(tabQueryParam) ? tabQueryParam : defaultTab;
+});
+</script>
+
+<template>
+<q-page class="c-block">
+    <div class="c-block__header">
+        <span class="c-block__header-title">{{ $t('pages.blockpage.block') }}</span>
+        <span class="c-block__header-block-num">#{{ block }}</span>
+    </div>
+
+    <q-tabs
+        v-model="tab"
+        dense
+        active-class="c-block__tabs-tab--active"
+        content-class="c-block__tabs-content"
+        indicator-color="transparent"
+        class="c-block__tabs"
+    >
+        <q-tab class="c-block__tabs-tab" name="overview" :label="$t('pages.blockpage.overview')" />
+        <q-tab
+            v-if="transactionsCount > 0"
+            class="c-block__tabs-tab"
+            name="transactions"
+            :label="$t('pages.blockpage.transactions')"
+        />
+    </q-tabs>
+
+    <div class="c-block__main-container">
+        <div class="c-block__main-content">
+            <q-tab-panels
+                v-model="tab"
+                class="c-block__panels"
+                animated
+                transition-next="fade"
+                transition-prev="fade"
+            >
+                <q-tab-panel class="c-block__panel" name="overview">
+                    <BlockOverview
+                        :data="blockData"
+                        @prev-block="prevBlock"
+                        @next-block="nextBlock"
+                        @trx-table="tab = 'transactions'"
+                        @extra-data="visitNativeBlockExplorer"
+                    />
+                </q-tab-panel>
+                <q-tab-panel class="c-block__panel" name="transactions">
+                    <TransactionTable :title="block.toString()" :block="block"/>
+                </q-tab-panel>
+            </q-tab-panels>
+        </div>
+    </div>
+
+</q-page>
+</template>
+<style lang="scss">
+
+.c-block {
+    @include page-container;
+
+    &__header {
+        @include page-header;
+        &-block-num {
+            font-size: 1.5rem;
+            margin-left: 10px;
+        }
+    }
+
+    &__tabs {
+        @include tabs-container;
+    }
+
+    &__main-container {
+        background: transparent !important;
+    }
+    &__main-content {
+        padding: 0px;
+    }
+    &__panels {
+        background: transparent;
+        --v-overflow: visible;
+        overflow: visible !important;
+    }
+    &__panel {
+        padding: 0px;
+    }
+}
+
+</style>
+
diff --git a/src/pages/ContractVerification.vue b/src/pages/ContractVerification.vue
new file mode 100644
index 000000000..289f4d4cb
--- /dev/null
+++ b/src/pages/ContractVerification.vue
@@ -0,0 +1,353 @@
+<script>
+import { getCompilerOptions } from 'src/lib/contract/ContractVerification';
+import { isValidAddressFormat } from 'src/lib/utils';
+
+export default {
+    name: 'ContractVerification',
+    data() {
+        return {
+            tab: 'options',
+            compilerOptions: [],
+            compilerVersion: '',
+            contractAddress: '',
+            rawInput: false,
+            optimizer: false,
+            runs: 200,
+            constructorArgs: '',
+            evmOptions: [
+                'default',
+                'homestead',
+                'tangerineWhistle',
+                'spuriousDragon',
+                'byzantium',
+                'constantinople',
+                'petersburg',
+                'istanbul',
+                'berlin',
+                'london',
+            ],
+            targetEvm: 'default',
+            inputMethod: true,
+            sourcePath: '',
+            contractInput: '',
+            fileType: true,
+            TIME_DELAY: 6000,
+            sourcePathRules: [
+                val => ((val.length === 0) ||
+                (val.length && val.charAt(val.length - 1) === '/')) ||
+                this.$t('pages.invalid_path_format'),
+            ],
+            constructorArgsRules: [
+                val => ((val.length === 0) ||
+                (val.length && val.charAt(val.length - 1) !== ',' && val.charAt(0) !== ',')) ||
+                this.$t('pages.no_trailing_commas'),
+            ],
+        };
+    },
+    computed: {
+        pathInput() {
+            return !this.inputMethod || (this.inputMethod && this.fileType);
+        },
+        uploaderLabel() {
+            const solFile = this.$t('pages.select_sol_file');
+            const jsonFile = this.$t('pages.select_json_file');
+            return  this.fileType ? solFile : jsonFile;
+        },
+    },
+    async mounted() {
+        this.compilerOptions = await getCompilerOptions();
+        if (this.$route.params.address) {
+            this.contractAddress = this.$route.params.address;
+        }
+    },
+    methods: {
+        isValidAddressFormat,
+        setCompiler(option){
+            this.compilerVersion = option;
+        },
+        setEvm(option){
+            this.targetEvm = option;
+        },
+        uploaded(uploadedObj){
+            const verifyResponse = JSON.parse(uploadedObj.xhr.response);
+            this.onNotify(verifyResponse);
+            if (verifyResponse.type === 'positive'){
+                this.navToAddress();
+            }
+        },
+        onNotify(notification){
+            let noti = { ...notification };
+
+            if (typeof notification !== 'object' || !Object.prototype.hasOwnProperty.call(notification, 'message')){
+                noti = { message: JSON.stringify(notification), type: 'negative' };
+            }
+            this.$q.notify({
+                type: noti.type,
+                position: 'top',
+                message: noti.message,
+                timeout: this.TIME_DELAY,
+            });
+        },
+        navToAddress(){
+            setTimeout(() => {
+                this.$router.push({ name: 'address', params: { address: this.contractAddress } });
+            }, this.TIME_DELAY);
+        },
+        getUrl() {
+            return `${process.env.TELOS_API_ENDPOINT}/contracts/verify`;
+        },
+        async submitFormHandler() {
+            if (this.$refs.uploader){
+                if (this.$refs.uploader.files.length === 0){
+                    this.onNotify({ type: 'info', message: this.$t('pages.paste_contract_contents') });
+                    return;
+                }
+                await this.$refs.uploader.upload();
+            }else{
+                await this.uploadForm();
+            }
+        },
+
+        async uploadForm(){
+            const formData = this.getFormData();
+            formData.append('files', this.contractInput);
+            try{
+                const result = await this.$telosApi.general.post('contracts/verify', formData);
+                this.onNotify(result.data);
+                if (result.data.type === 'positive'){
+                    this.navToAddress();
+                }
+            }catch(e){
+                this.onNotify({ message: e, type: 'negative' });
+            }
+        },
+
+        getFormData(){
+            let formFields = this.getFormFields();
+            const formData = new FormData();
+            for (let i in formFields){
+                formData.append(formFields[i].name, formFields[i].value);
+            }
+            return formData;
+        },
+
+        getFormFields(){
+            return [
+                { name: 'sourcePath', value: this.sourcePath },
+                { name: 'contractAddress', value: this.contractAddress },
+                { name: 'compilerVersion', value: this.compilerVersion },
+                { name: 'optimizer', value: this.optimizer },
+                { name: 'runs', value: this.runs },
+                { name: 'constructorArgs', value: this.constructorArgs },
+                { name: 'targetEvm', value: this.targetEvm },
+                { name: 'fileType', value: this.fileType },
+            ];
+        },
+
+        resetForm(){
+            this.contractAddress = '';
+            this.compilerVersion = '';
+            this.sourcePath = '';
+            this.contractInput = '';
+            this.rawInput = false;
+            this.optimizer = false;
+            this.runs = 200;
+            this.fileType = true;
+            if (this.$refs.uploader){
+                this.$refs.uploader.files = [];
+            }
+        },
+    },
+};
+</script>
+
+<template>
+<div class="pageContainer">
+    <div class="bg-white q-pa-xl  q-mt-xl">
+        <div class="text-h4 text-primary">{{ $t('pages.verify_contract') }}</div>
+        <div class="col-12">
+            <div class="content-container">
+                <q-form @submit="submitFormHandler" @reset="resetForm">
+                    <div class="inputs-container-row">
+                        <div class="inputs-container-col inputs-container-padding-right">
+                            <q-input
+                                v-model="contractAddress"
+                                name="contractAddress"
+                                :label="$t('pages.contract_address')+' *'"
+                                :placeholder="$t('pages.enter_contract_address')"
+                                debounce="500"
+                                :rules="[val => isValidAddressFormat(val) || $t('pages.invalid_address_format')]"
+                            />
+                            <q-select
+                                v-model="compilerVersion"
+                                :options="compilerOptions"
+                                :label="$t('pages.compiler_version')+' *'"
+                                :rules="[val => val.length || $t('pages.select_compiler_version')]"
+                            />
+                            <q-input
+                                v-model="sourcePath"
+                                :disable="!pathInput"
+                                :label="$t('pages.contract_file_directory_path')"
+                                :placeholder="$t('pages.eg_contracts')"
+                                debounce="750"
+                                :rules="sourcePathRules"
+                            />
+                            <div class="radio-container">
+                                <q-radio
+                                    v-model="inputMethod"
+                                    :label="$t('pages.upload_file')"
+                                    :val="true"
+                                    color="primary"
+                                />
+                                <q-radio
+                                    v-model="inputMethod"
+                                    :label="$t('pages.text_input')"
+                                    :val="false"
+                                    color="primary"
+                                />
+                            </div>
+                        </div>
+                        <div class="inputs-container-col">
+                            <q-input
+                                v-model="runs"
+                                class="q-field--with-bottom"
+                                type="number"
+                                :label="$t('pages.runs_value_for_optimization')"
+                                :class="!optimizer ? 'disabled-input' : ''"
+                            >
+                                <q-toggle v-model="optimizer" label="Optimization"/>
+                            </q-input>
+                            <q-select v-model="targetEvm" :options="evmOptions" label="Target EVM"/>
+                            <q-input
+                                v-model="constructorArgs"
+                                :label="$t('pages.constructor_arguments')"
+                                :placeholder="$t('pages.comma_seperated_values')"
+                                debounce="750"
+                                :rules="constructorArgsRules"
+                                class="q-pb-sm"
+                            />
+                            <div class="radio-container">
+                                <q-radio
+                                    v-if="inputMethod"
+                                    v-model="fileType"
+                                    label=".sol"
+                                    :val="true"
+                                    color="primary"
+                                />
+                                <q-radio
+                                    v-if="inputMethod"
+                                    v-model="fileType"
+                                    label=".json"
+                                    :val="false"
+                                    color="primary"
+                                />
+                            </div>
+                        </div>
+                        <q-input
+                            v-if="!inputMethod"
+                            v-model="contractInput"
+                            class="border-radius"
+                            type="textarea"
+                            name="contractInput"
+                            rows="5"
+                            square
+                            outlined
+                            :placeholder="$t('pages.paste_contract_code_here')"
+                            :rules="[val => val.length || $t('pages.enter_contract_text')]"
+                        />
+                        <q-uploader
+                            v-else
+                            ref="uploader"
+                            :url="getUrl"
+                            multiple
+                            batch="batch"
+                            :label="uploaderLabel"
+                            :form-fields="getFormFields"
+                            field-name="files"
+                            no-thumbnails
+                            class="uploader"
+                            accept=".sol, .json"
+                            hide-upload-btn
+                            @uploaded="uploaded"
+                            @rejected="onNotify"
+                        />
+                        <div class="button-container">
+                            <q-btn :label="$t('pages.verify_contract')" type="submit" color="primary"/>
+                            <q-btn :label="$t('pages.reset')" type="reset" color="primary"/>
+                        </div>
+                    </div>
+                </q-form>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<style scoped lang="sass">
+.pageContainer
+    flex: 0 1 1200px
+    margin: auto
+    max-width: 1200px
+
+.uploader
+  max-width: 300px
+
+span
+  word-wrap: break-word
+
+.q-btn
+  width: 40%
+  margin: auto
+
+.q-uploader
+  margin-top: 1rem
+  max-width: unset !important
+  width: 100%
+
+.q-form
+  width: 60rem
+  margin: auto
+
+.q-select
+  height: 3rem
+  margin-bottom: 2rem
+
+.q-textarea, .q-uploader
+  -webkit-border-radius: 6px
+  -moz-border-radius: 6px
+  border-radius: 6px
+  margin-top: 10rem
+
+.q-toggle
+  margin-left: 1rem
+
+.q-tab-panel
+  margin-bottom: 1.5rem
+  margin-top: 1.5rem
+
+.content-container
+  margin-top: 8rem
+
+.button-container
+  display: flex
+  margin: 1rem
+  padding-top: 1rem
+  justify-content: space-around
+
+.inputs-container-padding-right
+  padding-right: 2rem
+
+.inputs-container-col
+  display: inline-flex
+  flex-direction: column
+  width: 48%
+  height: 10rem
+  margin: auto
+
+.inputs-container-row
+  margin: auto
+  justify-content: space-around
+
+.radio-container
+  margin-top: 1rem
+</style>
diff --git a/src/pages/Error404.vue b/src/pages/Error404.vue
deleted file mode 100644
index f99a00b63..000000000
--- a/src/pages/Error404.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-export default {
-    name: 'Error404Page',
-};
-</script>
-
-<template>
-<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
-    <div>
-        <div class="c-404__404">404</div>
-        <div class="text-h2 c-404__oops">{{ $t('pages.oops') }}</div>
-        <q-btn
-            class="q-mt-xl"
-            color="white"
-            text-color="blue"
-            unelevated
-            to="/"
-            :label="$t('pages.go_home')"
-            no-caps="no-caps"
-        />
-    </div>
-</div>
-</template>
-
-<style lang="scss">
-.c-404 {
-    &__404 {
-        font-size: 30vh;
-    }
-
-    &__oops {
-        opacity: .4;
-    }
-}
-</style>
diff --git a/src/pages/ErrorNotFoundPage.vue b/src/pages/ErrorNotFoundPage.vue
new file mode 100644
index 000000000..380b21f31
--- /dev/null
+++ b/src/pages/ErrorNotFoundPage.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import OutlineButton from 'src/components/OutlineButton.vue';
+
+const $router = useRouter();
+const { t: $t } = useI18n();
+
+function goHome() {
+    $router.push({ name: 'home' });
+}
+</script>
+
+<template>
+<div class="c-404">
+    <div class="row q-mb-sm">
+        <div class="col-12 text-center">
+            <h1 class="c-404__title">
+                {{ $t('pages.error.title') }}
+            </h1>
+        </div>
+    </div>
+
+    <div class="row q-mb-lg">
+        <div class="col-12 text-center">
+            {{ $t('pages.error.subtitle') }}
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12">
+            <OutlineButton
+                text-color="default"
+                role="link"
+                @click="goHome"
+            >
+                {{ $t('pages.go_home') }}
+            </OutlineButton>
+        </div>
+    </div>
+</div>
+</template>
+
+<style lang="scss">
+.c-404 {
+    height: 70vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &__title {
+        font-size: 1.4rem;
+        font-weight: bold;
+        margin: 0;
+        line-height: 1.2;
+    }
+}
+</style>
diff --git a/src/pages/HealthPage.vue b/src/pages/HealthPage.vue
index 0d6cca5a2..dde17e26f 100644
--- a/src/pages/HealthPage.vue
+++ b/src/pages/HealthPage.vue
@@ -5,18 +5,22 @@ import Monitor from 'components/Health/Monitor.vue';
 </script>
 
 <template>
-<div class="pageContainer q-pt-xl">
+<div class="c-health-page q-pt-xl">
     <div class="homeInfo q-mb-lg">
-        <div class="text-primary text-h6">{{ $t('pages.rpc_endpoints') }}</div>
+        <div class="text-h6">{{ $t('pages.rpc_endpoints') }}</div>
     </div>
     <Endpoints/>
     <div class="homeInfo q-mb-lg">
-        <div class="text-primary text-h6">{{ $t('pages.monitor') }}</div>
+        <div class="text-h6">{{ $t('pages.monitor') }}</div>
     </div>
     <Monitor/>
 </div>
 </template>
 
-<style scoped lang='sass'>
-
+<style lang="scss">
+.c-health-page {
+    flex: 0 1 1200px;
+    margin: auto;
+    max-width: 1200px;
+}
 </style>
diff --git a/src/pages/Holders.vue b/src/pages/Holders.vue
new file mode 100644
index 000000000..19e55414b
--- /dev/null
+++ b/src/pages/Holders.vue
@@ -0,0 +1,15 @@
+<script>
+export default {
+    name: 'HoldersPage',
+    components: {},
+    data() {
+        return {};
+    },
+};
+</script>
+
+<template>
+<div></div>
+</template>
+
+<style lang="sass" scoped></style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
deleted file mode 100644
index 1c8232ffd..000000000
--- a/src/pages/Home.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-    name: 'HomePage',
-    components: {
-    },
-    setup() {
-        function onChainSelected(chain: string) {
-            console.log(chain);
-        }
-
-        return {
-            onChainSelected,
-        };
-    },
-});
-</script>
-
-<template>
-<div class="row home-container">
-    <div class="col-12 col-sm-8 q-pa-md header-support home-banner">
-        <img class="antelope-logo" src="icons/antelope-logo.png">
-        <h2>Open Block Explorer</h2>
-    </div>
-    <div class="col-12 col-sm-4">
-        test page
-    </div>
-</div>
-</template>
-
-<style lang="sass" scoped>
-.home-container
-    height: 100vh
-
-.home-banner
-    background-image: url("/backgrounds/home.png")
-    background-repeat: no-repeat
-    background-position: center
-    background-size: cover
-    display: flex
-    align-items: center
-    flex-direction: column
-    justify-content: center
-    color: white
-    text-align: center
-    > h2
-        font-weight: 400
-
-.antelope-logo
-    max-height: 100px
-
-</style>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
deleted file mode 100644
index 4b4f672b7..000000000
--- a/src/pages/Index.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-import TransactionTable from 'components/TransactionTable';
-import HomeInfo from 'components/HomeInfo.vue';
-export default {
-    name: 'IndexPage',
-    components: {
-        HomeInfo,
-        TransactionTable,
-    },
-};
-</script>
-
-<template>
-<q-page class="pageContainer">
-    <div class="row justify-center q-py-lg">
-        <div class="text-h4 text-primary title q-mt-xl bold">{{ $t('pages.telos_evm_explorer') }}</div>
-    </div>
-    <div class="row q-pt-xl q-pb-md tableWrapper">
-        <div class="col-12">
-            <HomeInfo/>
-        </div>
-    </div>
-    <div class="row tableWrapper">
-        <div class="col-12 q-pb-lg">
-            <q-card>
-                <TransactionTable title="$t('pages.recent_transactions')"/>
-            </q-card>
-        </div>
-    </div>
-</q-page>
-</template>
diff --git a/src/pages/Transaction.vue b/src/pages/Transaction.vue
deleted file mode 100644
index cdbc39b9a..000000000
--- a/src/pages/Transaction.vue
+++ /dev/null
@@ -1,568 +0,0 @@
-<script>
-import { mapGetters, mapActions } from 'vuex';
-import DateField from 'components/DateField';
-import BlockField from 'components/BlockField';
-import AddressField from 'components/AddressField';
-import LogsViewer from 'components/Transaction/LogsViewer';
-import InternalTxns from 'components/Transaction/InternalTxns';
-import CopyButton from 'components/CopyButton';
-import MethodField from 'components/MethodField';
-import ERCTransferList from 'components/Transaction/ERCTransferList';
-import ParameterList from 'components/Transaction/ParameterList';
-
-import { BigNumber } from 'ethers';
-import { WEI_PRECISION, formatWei, parseErrorMessage, getRouteWatcherForTabs } from 'src/lib/utils';
-import { TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures';
-
-const tabs = {
-    general: '#general',
-    details: '#details',
-    eventLog: '#eventlog',
-    internal: '#internal',
-};
-
-// TODO: The get_transactions API doesn't format the internal transactions properly,
-//  need to fix that before we try to decode them
-export default {
-    name: 'TransactionPage',
-    components: {
-        LogsViewer,
-        InternalTxns,
-        AddressField,
-        BlockField,
-        CopyButton,
-        DateField,
-        MethodField,
-        ERCTransferList,
-        ParameterList,
-    },
-    data() {
-        return {
-            hash: this.$route.params.hash,
-            blockData: null,
-            trxNotFound: false,
-            errorMessage: null,
-            trx: null,
-            erc20_transfers: [],
-            erc721_transfers: [],
-            erc1155_transfers: [],
-            params: [],
-            tab: '#general',
-            isContract: false,
-            contract: null,
-            parsedTransaction: null,
-            methodTrx: null,
-            showAge: true,
-            showWei: false,
-        };
-    },
-    computed: {
-        ...mapGetters('evm', ['tlosPrice']),
-    },
-    watch: {
-        '$route.params': {
-            handler(newValue) {
-                const { hash } = newValue;
-                if (this.hash === hash) {
-                    return;
-                }
-
-                this.resetTransaction();
-                this.hash = hash;
-                this.loadTransaction();
-            },
-            immediate: true,
-        },
-        $route: getRouteWatcherForTabs('transaction', tabs, tabs.general),
-    },
-    async mounted() {
-        await this.loadTransaction();
-    },
-    async created() {
-        this.fetchTlosPrice();
-    },
-    methods: {
-        ...mapActions('evm', ['fetchTlosPrice']),
-        formatWei,
-        resetTransaction() {
-            this.blockData = null;
-            this.trx = null;
-            this.tab = '#general';
-            this.isContract = false;
-            this.contract = null;
-            this.parsedTransaction = null;
-            this.methodTrx = null;
-            this.erc20_transfers = [];
-            this.erc721_transfers = [];
-            this.erc1155_transfers = [];
-            this.params = [];
-        },
-        async loadTransaction() {
-            const trxResponse = await this.$evmEndpoint.get(
-                `/v2/evm/get_transactions?hash=${this.hash}`,
-            );
-            if (trxResponse.data.transactions.length === 0) {
-                this.trxNotFound = true;
-                return;
-            }
-            this.trx = trxResponse.data.transactions[0];
-            this.trx.value = BigNumber.from(this.trx.value.toLocaleString('fullwide', { useGrouping:false }));
-            await this.loadContract();
-            await this.loadTransfers();
-            this.setErrorMessage();
-        },
-        async loadTransfers() {
-            this.transfers = [];
-            for (const log of this.trx.logs) {
-                // ERC20, ERC721 & ERC1155 transfers (ERC721 & ERC20 have same first topic but ERC20 has 4 topics for
-                // transfers, ERC20 has 3 log topics, ERC1155 has a different first topic)
-                let sig = log.topics[0].substr(0, 10);
-                if (TRANSFER_SIGNATURES.includes(sig)) {
-                    let type = this.$contractManager.getTokenTypeFromLog(log);
-                    let contract = await this.$contractManager.getContract(log.address, type);
-                    if (typeof contract.token !== 'undefined' && contract.token !== null) {
-                        let token = {
-                            'symbol': contract.token.symbol,
-                            'address': log.address,
-                            name: contract.token.name,
-                            'decimals': contract.token.decimals,
-                        };
-                        if (contract.token.type === 'erc721') {
-                            let tokenId = BigNumber.from(log.topics[3]).toString();
-                            if (contract.token.extensions?.metadata) {
-                                try {
-                                    token = await this.$contractManager.loadTokenMetadata(
-                                        log.address,
-                                        contract.token,
-                                        tokenId,
-                                    );
-                                } catch (e) {
-                                    console.error(`Could not retreive metadata for ${contract.address}: ${e.message}`);
-                                    // notify the user
-                                    this.$q.notify({
-                                        message: this.$t(
-                                            'pages.couldnt_retreive_metadata_for_address',
-                                            { address: contract.address, message: e.message },
-                                        ),
-                                        color: 'negative',
-                                        position: 'top',
-                                        timeout: 5000,
-                                    });
-                                }
-                            }
-                            this.erc721_transfers.push({
-                                'tokenId': tokenId,
-                                'to': '0x' + log.topics[2].substr(log.topics[2].length - 40, 40),
-                                'from': '0x' + log.topics[1].substr(log.topics[1].length - 40, 40),
-                                'token': token,
-                            });
-                        } else if (contract.token.type === 'erc1155') {
-                            let tokenId = BigNumber.from(log.data.substr(0, 66)).toString();
-                            if (contract.token.extensions?.metadata) {
-                                try {
-                                    token = await this.$contractManager.loadTokenMetadata(
-                                        log.address,
-                                        contract.token,
-                                        tokenId,
-                                    );
-                                } catch (e) {
-                                    console.error(`Could not retreive metadata for ${contract.address}: ${e.message}`);
-                                    // notify the user
-                                    this.$q.notify({
-                                        message: this.$t(
-                                            'pages.couldnt_retreive_metadata_for_address',
-                                            { address: contract.address, message: e.message },
-                                        ),
-                                        color: 'negative',
-                                        position: 'top',
-                                        timeout: 5000,
-                                    });
-                                }
-                            }
-                            this.erc1155_transfers.push({
-                                'tokenId': tokenId,
-                                'amount': BigNumber.from(log.data).toString(),
-                                'to': '0x' + log.topics[3].substr(log.topics[3].length - 40, 40),
-                                'from': '0x' + log.topics[2].substr(log.topics[2].length - 40, 40),
-                                'token': token,
-                            });
-                        } else {
-                            this.erc20_transfers.push({
-                                'value': log.data,
-                                'wei': BigNumber.from(log.data).toString(),
-                                'to': '0x' + log.topics[2].substr(log.topics[2].length - 40, 40),
-                                'from': '0x' + log.topics[1].substr(log.topics[1].length - 40, 40),
-                                'token': token,
-                            });
-                        }
-                    }
-                }
-            }
-        },
-        async loadContract() {
-            if (this.trx.input_data === '0x') {
-                return;
-            }
-
-            const contract = await this.$contractManager.getContract(this.trx.to);
-            if (!contract) {
-                return;
-            }
-
-            this.contract = contract;
-            this.parsedTransaction = await this.contract.parseTransaction(this.trx.input_data);
-            this.params = this.getFunctionParams();
-            this.methodTrx = Object.assign(
-                { parsedTransaction: this.parsedTransaction },
-                this.trx,
-            );
-            this.isContract = true;
-        },
-        setErrorMessage() {
-            if (this.trx.status !== 0) {
-                return;
-            }
-
-            this.errorMessage = parseErrorMessage(this.trx.output);
-        },
-        getFunctionName() {
-            if (this.parsedTransaction) {
-                return this.parsedTransaction.name;
-            }
-        },
-        getFunctionParams() {
-            if (!this.parsedTransaction) {
-                return [];
-            }
-            let args = [];
-            this.parsedTransaction.functionFragment.inputs.forEach((input, i) => {
-                args.push({
-                    name: input.name,
-                    type: input.type,
-                    arrayChildren: (input.arrayChildren !== null) ? input.arrayChildren.type : false,
-                    value:  this.parsedTransaction.args[i],
-                });
-            });
-            return args;
-        },
-        getGasFee() {
-            return formatWei(
-                BigNumber.from(this.trx.charged_gas_price)
-                    .mul(this.trx.gasused).toLocaleString('fullwide', { useGrouping:false }),
-                WEI_PRECISION,
-                5,
-            );
-        },
-        getGasChargedGWEI() {
-            return formatWei(this.trx.charged_gas_price, 9, 2);
-        },
-    },
-};
-</script>
-
-<template>
-<div class="pageContainer">
-    <div class="row">
-        <div class="col-12 q-px-md">
-            <div class="text-h4 text-primary q-mb-lg title q-pt-xl">
-                {{ $t('pages.transaction_details') }}
-            </div>
-            <div v-if="trxNotFound" class="text-h6 q-mb-lg text-white">
-                {{ $t('pages.transaction_not_found', { hash }) }}
-            </div>
-        </div>
-    </div>
-    <div class="row tableWrapper">
-        <div class="col-12 q-py-lg">
-            <div v-if="trx" :key="erc20_transfers.length + isContract" class="content-container">
-                <q-tabs
-                    v-model="tab"
-                    class="text-white topRounded"
-                    dense="dense"
-                    active-color="secondary"
-                    align="justify"
-                    narrow-indicator="narrow-indicator"
-                    :class="$q.dark.isActive ? 'q-dark' : 'q-light'"
-                >
-                    <q-route-tab
-                        class="topLeftRounded"
-                        name="general"
-                        :to="{ hash: '#general' }"
-                        exact="exact"
-                        replace="replace"
-                        :label="$t('pages.general')"
-                    />
-                    <q-route-tab
-                        name="details"
-                        :to="{ hash: '#details' }"
-                        exact="exact"
-                        replace="replace"
-                        :label="$t('pages.details')"
-                    />
-                    <q-route-tab
-                        name="logs"
-                        :to="{ hash: '#eventlog' }"
-                        exact="exact"
-                        replace="replace"
-                        :label="$t('pages.logs')"
-                    />
-                    <q-route-tab
-                        class="topRightRounded"
-                        name="internal"
-                        :to="{ hash: '#internal' }"
-                        exact="exact"
-                        replace="replace"
-                        :label="$t('pages.internal_txns')"
-                    />
-                </q-tabs>
-                <q-tab-panels
-                    v-model="tab"
-                    class="column shadow-2"
-                    animated="animated"
-                    keep-alive="keep-alive"
-                >
-                    <q-tab-panel id="transaction-page" name="general"><br><br>
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3">
-                                <strong class="wrapStrong">{{ $t('pages.transaction_hash') }}:&nbsp;</strong>
-                            </div>
-                            <div class="col-9">
-                                <span>{{ hash }}</span>
-                                <CopyButton :text="hash"/>
-                            </div>
-                        </div><br>
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3">
-                                <strong>{{ $t('pages.block_number') }}:&nbsp;</strong>
-                            </div>
-                            <div class="col-9">
-                                <BlockField :block="trx.block"/>
-                            </div>
-                        </div><br>
-                        <div
-                            class="fit row wrap justify-start items-start content-start date"
-                            @click="showAge = !showAge"
-                        >
-                            <div class="col-3">
-                                <strong>{{ $t('pages.date') }}:&nbsp;</strong>
-                            </div>
-                            <div class="u-flex--left">
-                                <DateField :epoch="trx.epoch"/>
-                            </div>
-                        </div><br>
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3">
-                                <strong>{{ $t('pages.status') }}:&nbsp;</strong>
-                            </div>
-                            <div class="col-9 q-py-xs">
-                                <span v-if="trx.status == 1" class="positive">
-                                    <q-icon name="check"/>
-                                    <span>{{ $t('pages.success') }}</span>
-                                </span>
-                                <span v-else class="negative">
-                                    <q-icon name="warning"/><span>{{ $t('pages.failure') }}</span>
-                                </span>
-                            </div>
-                        </div><br>
-                        <div v-if="errorMessage" class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3">
-                                <strong>{{ $t('pages.error_message') }}:&nbsp;</strong>
-                            </div>
-                            <div class="col-9">
-                                <span class="text-negative">{{ errorMessage }}</span>
-                            </div>
-                        </div><br v-if="errorMessage">
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3">
-                                <strong>{{ $t('pages.from') }}:&nbsp;</strong>
-                            </div>
-                            <div class="col-9 word-break">
-                                <AddressField
-                                    :address="trx.from"
-                                    :truncate="0"
-                                    :highlight="erc20_transfers.length + erc721_transfers.length > 1"
-                                    copy="copy"
-                                />
-                            </div>
-                        </div><br>
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3">
-                                <strong>{{ $t('pages.to') }}:&nbsp;</strong>
-                            </div>
-                            <div class="col-9 word-break">
-                                <AddressField
-                                    :address="trx.to"
-                                    :is-contract-trx="!!contract"
-                                    :truncate="0"
-                                    copy="copy"
-                                />
-                            </div>
-                        </div><br>
-                        <div v-if="isContract" class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3">
-                                <strong>{{ $t('pages.contract_function') }}:&nbsp;</strong>
-                            </div>
-                            <div class="col-9">
-                                <MethodField :contract="contract" :trx="methodTrx" shortenSignature="shortenSignature"/>
-                            </div>
-                        </div><br v-if="isContract">
-                        <div
-                            v-if="isContract && params.length > 0"
-                            class="fit row wrap justify-start items-start content-start"
-                        >
-                            <div class="col-3"><strong>{{ $t('pages.function_parameters') }}:&nbsp;</strong></div>
-                            <div id="function-parameters" class="col">
-                                <ParameterList :params="params" :contract="contract" :trxFrom="trx.from"/>
-                            </div>
-                        </div><br v-if="isContract && params.length > 0">
-                        <div v-if="trx.createdaddr" class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3"><strong>{{ $t('pages.deployed_contract') }}:&nbsp;</strong></div>
-                            <div class="col-9 word-break">
-                                <AddressField :address="trx.createdaddr"/>
-                            </div>
-                        </div><br v-if="trx.createdaddr">
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3"><strong>{{ $t('pages.value') }}:&nbsp;</strong></div>
-                            <div class="col-9 clickable" @click="showWei = !showWei">
-                                <div v-if="showWei">
-                                    <span>{{ trx.value }}</span>
-                                </div>
-                                <span v-else>
-                                    <span>{{ $t('pages.balance_tlos', { amount: formatWei(trx.value, 18) }) }}</span>
-                                    <q-tooltip>{{ $t('pages.click_to_show_in_wei') }}</q-tooltip>
-                                </span>
-                            </div>
-                        </div><br>
-                        <ERCTransferList
-                            v-if="erc20_transfers.length > 0"
-                            type="ERC20"
-                            :trxFrom="trx.from"
-                            :contract="contract"
-                            :transfers="erc20_transfers"
-                        />
-                        <ERCTransferList
-                            v-if="erc721_transfers.length > 0"
-                            type="ERC721"
-                            :trxFrom="trx.from"
-                            :contract="contract"
-                            :transfers="erc721_transfers"
-                        />
-                        <ERCTransferList
-                            v-if="erc1155_transfers.length > 0"
-                            type="ERC1155"
-                            :trxFrom="trx.from"
-                            :contract="contract"
-                            :transfers="erc1155_transfers"
-                        />
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3">
-                                <strong>{{ $t('pages.gas_price_charged') }}:&nbsp;</strong>
-                            </div>
-                            <span>{{ $t('pages.balance_gwei', { amount: getGasChargedGWEI() }) }}</span>
-                        </div><br>
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3">
-                                <strong>{{ $t('pages.gas_fee') }}:&nbsp;</strong>
-                            </div>
-                            <span>
-                                {{ $t('pages.balance_tlos', { amount: getGasFee() }) }}
-                                <small class="q-pl-sm">(~ ${{ (getGasFee() * tlosPrice).toFixed(5) }})</small>
-                            </span>
-                        </div><br>
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3"><strong>{{ $t('pages.gas_used') }}:&nbsp;</strong></div>
-                            <div class="col-9">{{ trx.gasused }}</div>
-                        </div><br>
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3"><strong>{{ $t('pages.gas_limit') }}:&nbsp;</strong></div>
-                            <div class="col-9">{{ trx.gas_limit }}</div>
-                        </div><br>
-                        <div class="fit row wrap justify-start items-start content-start">
-                            <div class="col-3"><strong>{{ $t('pages.nonce') }}:&nbsp;</strong></div>
-                            <div class="col-9">{{ trx.nonce }}</div>
-                        </div>
-                    </q-tab-panel>
-                    <q-tab-panel name="details">
-                        <div>
-                            <div class="col-3"><strong>{{ $t('pages.input') }}:&nbsp;</strong></div>
-                            <div class="col-9">{{ trx.input_data }}</div>
-                        </div><br>
-                        <div>
-                            <div class="col-3"><strong>{{ $t('pages.output') }}:&nbsp;</strong></div>
-                            <div class="col-9">{{ trx.output }}</div>
-                        </div>
-                    </q-tab-panel>
-                    <q-tab-panel name="logs">
-                        <div class="jsonViewer">
-                            <LogsViewer :logs="trx.logs" :contract="contract"/>
-                        </div>
-                    </q-tab-panel>
-                    <q-tab-panel name="internal">
-                        <InternalTxns :itxs="trx.itxs" :contract="contract"/>
-                    </q-tab-panel>
-                </q-tab-panels>
-            </div>
-        </div>
-    </div>
-</div>
-</template>
-
-<style scoped lang="sass">
-    @media screen and (max-width: 650px)
-        #function-parameters
-            width: 100%
-            flex: auto
-            margin-top: 20px
-
-        #transaction-page
-            .col-3
-                width: 100%
-            .col-9
-                width: 100%
-
-    @media only screen and (max-width: 900px)
-        #function-parameters
-            .row
-                .col-4
-                    width: 100%
-                    padding-left: 15px
-                .col-8
-                    padding-bottom: 10px
-                    padding-left: 30px
-                    width: 100%
-</style>
-
-<style lang="sass" scoped>
-.shadow-2
-    box-shadow: none !important
-
-span
-    word-break: break-word
-
-.col-9 .positive .q-icon, .col-9 .negative .q-icon
-    margin-top: -5px
-    margin-right: 5px
-
-.date .col-9 > div
-    display: inline-block
-
-.col-9 .positive, .col-9 .negative
-    border: 1px solid
-    border-radius: 5px
-    padding: 5px 10px
-
-.col-9 .jv-container .jv-code
-    padding: 0
-
-.col-9
-    word-break: break-word
-
-.q-tabs__content
-    margin-bottom: -1px
-
-@media only screen and (max-width: 550px)
-    .q-tab
-        padding: 0px 5px
-    .q-tab__label
-        font-size: 11px
-</style>
diff --git a/src/pages/TransactionPage.vue b/src/pages/TransactionPage.vue
new file mode 100644
index 000000000..b17597541
--- /dev/null
+++ b/src/pages/TransactionPage.vue
@@ -0,0 +1,323 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+
+import { useRoute } from 'vue-router';
+import { contractManager, indexerApi } from 'src/boot/telosApi';
+
+import LogsViewer from 'components/Transaction/LogsViewer';
+import InternalTxns from 'components/Transaction/InternalTxns';
+
+const route = useRoute();
+
+import {
+    REVERT_FUNCTION_SELECTOR,
+    REVERT_PANIC_SELECTOR,
+    parseErrorMessage,
+} from 'src/lib/utils';
+
+
+import TransactionOverview from 'src/components/TransactionOverview.vue';
+import { EvmContractFunctionParameter, EvmTransaction, EvmTransactionLog } from 'src/antelope/types';
+import { EvmTransactionExtended } from 'src/types';
+
+const { t: $t } = useI18n();
+
+const REVERT_SELECTORS = [REVERT_FUNCTION_SELECTOR, REVERT_PANIC_SELECTOR];
+
+const defaultTab = 'overview';
+const tab = ref(defaultTab);
+const trxNotFound = ref(false);
+const hash = ref('');
+const errorMessage = ref<string | undefined>(undefined);
+const isContract = ref(false);
+const trx = ref<EvmTransactionExtended | null>(null);
+
+// functions
+const loadTransaction = async () => {
+    try {
+        const trxResponse = await indexerApi.get(`/transaction/${hash.value}?full=true&includeAbi=true`);
+        if (trxResponse.data.results.length === 0) {
+            trxNotFound.value = true;
+            return;
+        }
+        const aux = trxResponse.data.results[0] as EvmTransaction;
+        let logsArray: EvmTransactionLog[] = [];
+        if(aux.logs){
+            const fixedStr = aux.logs.replace('transaction_hash', 'transactionHash');
+            try {
+                logsArray = JSON.parse(fixedStr) as EvmTransactionLog[];
+            } catch (e) {
+                console.error('Error parsing logs', e);
+            }
+        }
+        const _trx:EvmTransactionExtended = {
+            ...aux,
+            gasUsedBn: ethers.BigNumber.from(aux.gasUsed),
+            gasLimitBn: ethers.BigNumber.from(aux.gasLimit),
+            valueBn: ethers.BigNumber.from(aux.value),
+            gasPriceBn: ethers.BigNumber.from(aux.gasPrice),
+            contract: undefined,
+            parsedTransaction: undefined,
+            functionParams: [],
+            logsArray,
+        };
+        await loadContract(_trx);
+        setErrorMessage();
+    } catch (e) {
+        trxNotFound.value = true;
+        return;
+    }
+};
+
+const loadContract = async (_trx: EvmTransactionExtended) => {
+    if (!_trx || _trx.input === '0x') {
+        trx.value = _trx;
+        return;
+    }
+    _trx.contract = await contractManager.getContract(_trx.to?.toLowerCase());
+    if (!_trx.contract) {
+        trx.value = _trx;
+        return;
+    }
+
+    _trx.parsedTransaction = await contractManager.parseContractTransaction(
+        _trx,
+        _trx.input,
+        _trx.contract,
+    );
+
+    _trx.functionParams = getFunctionParams();
+
+    trx.value = _trx;
+    isContract.value = true;
+};
+
+const setErrorMessage = async () => {
+    if (!trx.value || trx.value.status === '0x1') {
+        return;
+    }
+    await loadErrorMessage();
+};
+
+const loadErrorMessage = async () => {
+    if (!trx.value) {
+        return;
+    }
+
+    if(trx.value.output && REVERT_SELECTORS.includes(trx.value.output.slice(0, 10))){
+        errorMessage.value = parseErrorMessage(trx.value.output);
+        return;
+    }
+    const response = await indexerApi.get(
+        `/transaction/${hash.value}/internal`,
+    );
+    const intrxs = response.data.results;
+    for(let i = 0; i < intrxs.length; i++){
+        const intrx = intrxs[i];
+
+        if (!intrx.result?.output) {
+            continue;
+        }
+
+        const output = (REVERT_SELECTORS.includes(intrx.result?.output.slice(0, 10)))
+            ? intrx.result?.output
+            : trx.value.output
+        ;
+        if(intrx.error !== null){
+            errorMessage.value = (REVERT_SELECTORS.includes(output?.slice(0, 10)))
+                ? parseErrorMessage(output)
+                : intrx.error
+            ;
+            return;
+        }
+    }
+};
+const getFunctionParams = () => {
+    if (!trx.value?.parsedTransaction) {
+        return [];
+    }
+    const args:EvmContractFunctionParameter[] = [];
+    trx.value?.parsedTransaction.functionFragment.inputs.forEach((input, i) => {
+        args.push({
+            name: input.name,
+            type: input.type,
+            arrayChildren: (input.arrayChildren !== null) ? input.arrayChildren.type : false,
+            value:  trx.value?.parsedTransaction?.args[i],
+        });
+    });
+    return args;
+};
+
+watch(() => route.params.hash, (newValue) => {
+    if (!newValue || hash.value === newValue) {
+        return;
+    }
+    hash.value = typeof newValue === 'string' ? newValue : newValue[0];
+    loadTransaction();
+}, { immediate: true });
+
+
+const prevTransaction = () => {
+    console.error('prevTransaction() NOT IMPLEMENTED');
+};
+
+const nextTransaction = () => {
+    console.error('nextTransaction() NOT IMPLEMENTED');
+};
+
+</script>
+
+<template>
+
+<q-page class="c-transactions">
+
+    <div class="c-transactions__header">
+        <span class="c-transactions__header-title">{{ $t('pages.transaction.page_title') }}</span>
+        <div class="c-transactions__header-nav-btn c-transactions__header-nav-btn--left" @click="prevTransaction">
+            <i class="fa fa-chevron-left small"></i>
+        </div>
+        <div class="c-transactions__header-nav-btn c-transactions__header-nav-btn--right" @click="nextTransaction">
+            <i class="fa fa-chevron-right small"></i>
+        </div>
+    </div>
+
+    <q-tabs
+        v-model="tab"
+        active-class="c-transactions__tabs-tab--active"
+        content-class="c-transactions__tabs-content"
+        indicator-color="transparent"
+
+        class="c-transactions__tabs"
+    >
+        <q-tab class="c-transactions__tabs-tab" name="overview" :label="$t('pages.transaction.overview')" />
+        <q-tab
+            v-if="trx?.logsArray && Array.isArray(trx?.logsArray) && trx?.logsArray.length > 0"
+            class="c-transactions__tabs-tab"
+            name="logs"
+            :label="$t('pages.transaction.logs')"
+        />
+        <q-tab
+            v-if="trx"
+            class="c-transactions__tabs-tab"
+            name="internal"
+            :label="$t('pages.transaction.internal')"
+        />
+    </q-tabs>
+
+    <div class="c-transactions__main-container">
+        <div class="c-transactions__main-content">
+            <q-tab-panels
+                v-model="tab"
+                class="c-transactions__panels"
+                animated
+                transition-next="fade"
+                transition-prev="fade"
+            >
+                <q-tab-panel class="c-transactions__panel c-transactions__panel--overview" name="overview">
+                    <!-- Transaction not found -->
+                    <q-card
+                        v-if="trxNotFound"
+                        class="c-transactions__panel-not-found"
+                    >
+                        <q-card-section>
+                            <q-item>
+                                <q-item-section avatar>
+                                    <q-avatar>
+                                        <i class="fa fa-exclamation-triangle"></i>
+                                    </q-avatar>
+                                </q-item-section>
+                                <q-item-section>
+                                    <q-item-label>{{ $t('pages.transaction.not_found') }}</q-item-label>
+                                    <q-item-label class="c-transactions__panel-not-found-hash" caption> {{ hash }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-card-section>
+                    </q-card>
+
+                    <!-- Transaction Overview -->
+                    <div v-else class="c-transactions__panel-content--overview c-transactions__panel-content">
+                        <TransactionOverview
+                            :trx="trx"
+                        />
+                    </div>
+                </q-tab-panel>
+                <q-tab-panel class="c-transactions__panel c-transactions__panel--logs" name="logs">
+                    <q-card class="c-transactions__panel-content--logs c-transactions__panel-content">
+                        <LogsViewer
+                            :trx="trx"
+                            :contract="trx?.contract"
+                            :logs="trx?.logsArray"
+                        />
+                    </q-card>
+                </q-tab-panel>
+                <q-tab-panel class="c-transactions__panel c-transactions__panel" name="internal">
+                    <q-card class="c-transactions__panel-content--internal c-transactions__panel-content">
+                        <InternalTxns
+                            :transaction="trx"
+                        />
+                    </q-card>
+                </q-tab-panel>
+            </q-tab-panels>
+        </div>
+    </div>
+
+</q-page>
+</template>
+
+<style lang="scss">
+.c-transactions {
+    @include page-container;
+
+    &__header {
+        @include page-header;
+        &-nav-btn {
+            @include page-header-nav-btn;
+            display: none; // remove this line to enable the buttons
+        }
+    }
+
+    &__tabs {
+        @include tabs-container;
+    }
+
+    &__main-container {
+        background: transparent !important;
+    }
+    &__main-content {
+        padding: 0px;
+    }
+    &__panels {
+        background: transparent;
+        --v-overflow: visible;
+        overflow: visible !important;
+    }
+    &__panel {
+        padding: 0px;
+    }
+    &__panel-content {
+        min-height: 250px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        &--logs, &--internal {
+            padding-top: 20px;
+        }
+    }
+    &__panel-not-found {
+        padding: 30px 0px;
+        &-hash {
+            padding-top: 4px;
+            word-break: break-all;
+        }
+        @media screen and (min-width: $breakpoint-md-min) {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            padding: 30px 0px;
+        }
+    }
+}
+</style>
diff --git a/src/pages/Transactions.vue b/src/pages/Transactions.vue
deleted file mode 100644
index 8729900ce..000000000
--- a/src/pages/Transactions.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-import TransactionTable from 'components/TransactionTable';
-export default {
-    name: 'TransactionsPage',
-    components: {
-        TransactionTable,
-    },
-};
-</script>
-
-<template>
-<q-page class="column justify-center items-center">
-    <div class="row q-pa-lg">
-        <div class="text-h4">{{ $t('pages.explore_transactions') }}</div>
-    </div>
-    <div class="row">
-        <div class="col-12 q-px-sm">
-            <TransactionTable title="$t('pages.recent_transactions')"/>
-        </div>
-    </div>
-</q-page>
-</template>
diff --git a/src/pages/TransactionsPage.vue b/src/pages/TransactionsPage.vue
new file mode 100644
index 000000000..f4ef73d89
--- /dev/null
+++ b/src/pages/TransactionsPage.vue
@@ -0,0 +1,66 @@
+<script setup lang='ts'>
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import TransactionTable from 'components/TransactionTable.vue';
+import BlockField from 'components/BlockField.vue';
+
+const $route = useRoute();
+const { t: $t } = useI18n();
+
+const block = ref(0);
+const address = ref('');
+
+watch(() => $route.query.block,
+    (blockNumber) => {
+        if (/\d+/g.test((blockNumber as string) ?? '')) {
+            block.value = Number(blockNumber);
+        }
+    },
+    { immediate: true },
+);
+
+watch(() => $route.query.a,
+    (addr) => {
+        address.value = addr as string;
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+<q-page class="c-transactions">
+
+    <div class="c-transactions__header">
+        <span class="c-transactions__header-title">{{ $t('pages.transactions.transactions') }}</span>
+        <div v-if="block">
+            {{ $t('pages.transactions.for_block') }}
+            <BlockField :block="block"/>
+        </div>
+
+        <div v-if="address">
+            {{ $t('pages.transactions.for') }}
+            <router-link :to="`/address/${address}`">{{ address }}</router-link>
+        </div>
+    </div>
+
+    <div class="c-transactions__body">
+        <TransactionTable :block="block || undefined" :account-address="address" />
+    </div>
+</q-page>
+</template>
+
+<style lang="scss">
+.c-transactions {
+    @include page-container;
+
+    &__header {
+        @include page-header;
+    }
+
+    &__body {
+        @include page-body;
+    }
+}
+</style>
diff --git a/src/pages/home/HomeInfo.vue b/src/pages/home/HomeInfo.vue
new file mode 100644
index 000000000..ff084b931
--- /dev/null
+++ b/src/pages/home/HomeInfo.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import {
+    computed,
+    onBeforeMount,
+    onBeforeUnmount,
+    ref,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useQuasar } from 'quasar';
+
+import BlockField from 'components/BlockField.vue';
+import { indexerApi, telosApi } from 'src/boot/telosApi';
+
+const $store = useStore();
+const $q = useQuasar();
+const { t: $t } = useI18n();
+const locale = useI18n().locale.value;
+
+let pollingInterval: null | ReturnType<typeof setInterval> = null;
+
+const marketCap = ref(0);
+const transactionsCount = ref(0);
+const initialLoadComplete = ref(false);
+
+const tlosPrice = computed(() => $store.getters['chain/tlosPrice']); // no need to fetch TLOS price, it is already fetched on a timer in AppHeaderTopBar.vue
+const latestBlock = computed(() => $store.getters['chain/latestBlock']);
+const tlosPriceText = computed(() =>
+    tlosPrice.value === 0 ? '--' : `$${tlosPrice.value.toLocaleString(locale, { minimumFractionDigits: 4, maximumFractionDigits: 4 })}`,
+);
+const marketCapText = computed(() =>
+    marketCap.value === 0 ? '--' : `$${marketCap.value.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
+);
+
+
+const transactionCountText = computed(() => transactionsCount.value.toLocaleString(locale));
+
+const fetchTlosPrice = () => $store.dispatch('chain/fetchTlosPrice');
+
+onBeforeMount(() => {
+    updateFigures();
+
+    if (pollingInterval) {
+        clearInterval(pollingInterval);
+    }
+
+    pollingInterval = setInterval(() => {
+        updateFigures();
+    }, 6000);
+});
+
+onBeforeUnmount(() => {
+    if (pollingInterval) {
+        clearInterval(pollingInterval);
+    }
+});
+
+function fetchLatestBlock() {
+    $store.dispatch('chain/fetchLatestBlock');
+}
+
+async function fetchTotalTransactions() {
+    const response = await indexerApi.get('/transactions?limit=0&next=-1&offset=0&includeAbi=false&includePagination=true&includeTransfers=false&full=false');
+    transactionsCount.value = response.data.total_count;
+}
+
+async function fetchMarketCap() {
+    try {
+        const response = await telosApi.get('/supply/total');
+        const totalSupply = response.data;
+        const usdMarketCap = totalSupply * tlosPrice.value;
+
+        marketCap.value = usdMarketCap;
+    } catch (e) {
+        console.error('Error fetching market cap', e);
+        marketCap.value = 0;
+    }
+}
+
+let milliseconds = 500;
+function updateFigures() {
+    fetchTlosPrice(); // This makes the Price to load before anything else
+    return Promise.all([
+        fetchMarketCap(),
+        fetchLatestBlock(),
+        fetchTotalTransactions(),
+    ]).then(() => {
+        if (tlosPrice.value > 0 && latestBlock.value > 0 && transactionsCount.value > 0) {
+            initialLoadComplete.value = true;
+        } else {
+            if (milliseconds > 10000) {
+                console.error('Failed to load all data after 10 seconds');
+                initialLoadComplete.value = true;
+                return;
+            }
+            milliseconds *= 2;
+            setTimeout(() => {
+                updateFigures();
+            }, milliseconds);
+        }
+    });
+}
+</script>
+
+<template>
+<q-card class="c-home-info">
+    <q-card-section class="c-home-info__section">
+        <div class="c-home-info__subsection">
+            <div class="c-home-info__label-container">
+                <img
+                    class="c-home-info__icon"
+                    src="branding/telos.png"
+                    height="14"
+                    width="14"
+                >
+                <span class="c-home-info__label">
+                    {{ $t('components.tlos_price') }}
+                </span>
+            </div>
+            <q-skeleton v-if="tlosPrice === 0 && !initialLoadComplete" type="text" class="c-home-info__skeleton" />
+            <template v-else>{{ tlosPriceText }}</template>
+        </div>
+
+        <q-separator class="q-my-md" />
+
+        <div class="c-home-info__subsection">
+            <span class="c-home-info__label">
+                {{ $t('pages.home.market_cap') }}
+            </span>
+            <br>
+            <q-skeleton v-if="marketCap === 0 && !initialLoadComplete" type="text" class="c-home-info__skeleton" />
+            <template v-else>{{ marketCapText }}</template>
+        </div>
+    </q-card-section>
+
+    <q-separator inset :vertical="$q.screen.gt.sm" />
+
+    <q-card-section class="c-home-info__section">
+        <div class="c-home-info__subsection">
+            <span class="c-home-info__label">
+                {{ $t('pages.home.last_finalized_block') }}
+            </span>
+            <br>
+            <q-skeleton v-if="latestBlock === 0" type="text" class="c-home-info__skeleton" />
+            <BlockField
+                v-else
+                class="c-home-info__number"
+                :block="latestBlock.toString()"
+            />
+        </div>
+
+        <q-separator class="q-my-md" />
+
+        <div class="c-home-info__subsection">
+            <span class="c-home-info__label">
+                {{ $t('pages.home.total_transactions') }}
+            </span>
+            <br>
+            <q-skeleton v-if="transactionsCount === 0" type="text" class="c-home-info__skeleton" />
+            <template v-else>{{ transactionCountText }}</template>
+        </div>
+    </q-card-section>
+</q-card>
+</template>
+
+<style lang="scss">
+.c-home-info {
+    max-width: 800px;
+    margin: 0 auto;
+    border-radius: 12px;
+
+    @media screen and (min-width: $breakpoint-md-min) {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    &__section {
+        flex: 1 1 100%;
+    }
+
+    &__subsection {
+        @media screen and (min-width: $breakpoint-md-min) {
+            height: 48px;
+        }
+    }
+
+    &__label-container {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    &__icon {
+        margin-bottom: 2px;
+    }
+
+    &__label {
+        font-weight: 600;
+        font-size: 0.8rem;
+    }
+
+    &__skeleton {
+        height: 2rem;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            width: 50%;
+        }
+    }
+}
+</style>
diff --git a/src/pages/home/HomeLatestBlocks.vue b/src/pages/home/HomeLatestBlocks.vue
new file mode 100644
index 000000000..19b9a40e8
--- /dev/null
+++ b/src/pages/home/HomeLatestBlocks.vue
@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import HomeLatestDataTableRow from 'src/pages/home/HomeLatestDataTableRow.vue';
+import BlockField from 'components/BlockField.vue';
+import DateField from 'components/DateField.vue';
+import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
+import { indexerApi } from 'src/boot/telosApi';
+import { onMounted, ref, toRaw } from 'vue';
+import { BlockData } from 'src/types';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { ethers } from 'ethers';
+import { WEI_PRECISION } from 'src/lib/utils';
+
+type BlockDataOrLoading = BlockData | null;
+
+const $q = useQuasar();
+const $i18n = useI18n();
+const { t: $t } = $i18n;
+const locale = $i18n.locale.value;
+const blocks = ref<BlockDataOrLoading[]>([null, null, null, null, null, null]);
+const gasPrice = '0x754d490126';
+const CACHE_KEY = 'latest-blocks';
+const blocksCache = ref<{
+    range: { start: number },
+    relevantBlocks: BlockData[],
+}>({
+    range: { start: 0 },
+    relevantBlocks: [],
+});
+
+function saveCache() {
+    try {
+        const relevantBlocks = toRaw(blocks.value);
+        // if the first block has no transactions, we need to remove it
+        if (relevantBlocks[0]?.transactionsCount === 0) {
+            relevantBlocks.shift();
+        }
+        blocksCache.value.relevantBlocks = relevantBlocks as BlockData[];
+        localStorage.setItem(CACHE_KEY, JSON.stringify(blocksCache.value));
+    } catch (e) {
+        console.error(e);
+    }
+}
+
+function loadCache() {
+    const cache = localStorage.getItem(CACHE_KEY);
+    if (cache) {
+        try {
+            blocksCache.value = JSON.parse(cache);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+}
+
+
+async function fetchBlocksWithTransactions(firstPage: BlockData[]) {
+    let currentPage = 1;
+    const maxBlocksToShow = 6;
+    const start = firstPage[0].blockNumber;
+    let end = firstPage[firstPage.length - 1].blockNumber;
+
+    // verify if we have enough blocks in the first page
+    let notEmptyBlocks = firstPage.filter(b => b.transactionsCount > 0);
+
+    // we need to overwrite the indexes from 1 to 5 of the blocks array
+    notEmptyBlocks.forEach((block, index) => {
+        if (index < maxBlocksToShow - 1) {
+            blocks.value[index + 1] = block;
+        }
+    });
+
+
+    while (blocks.value.filter(b => b !== null).length < maxBlocksToShow) {
+        let response = await fetchBlocksPage(currentPage);
+        end = response.data.results[response.data.results.length - 1].blockNumber;
+        notEmptyBlocks = response.data.results.filter((b: BlockData) => b.transactionsCount > 0);
+
+        // we need to overwrite the indexes from 1 to 5 of the blocks array
+        let index = blocks.value.filter(b => b !== null).length;
+        notEmptyBlocks.forEach((block) => {
+            if (index < maxBlocksToShow) {
+                blocks.value[index++] = block;
+            }
+        });
+
+        if (index === maxBlocksToShow) {
+            // we have enough blocks
+            break;
+        }
+
+        // Verify if next page is in cache
+        if (end <= blocksCache.value.range.start) {
+            // complete the blocks array with the cached blocks
+            blocksCache.value.relevantBlocks.forEach((block) => {
+                if (index < maxBlocksToShow) {
+                    blocks.value[index++] = block;
+                }
+            });
+            break;
+        }
+
+        currentPage++;
+    }
+
+    blocksCache.value.range.start = start;
+}
+
+async function fetchBlocksPage(page: number) {
+    const path = getPath(page);
+    const result = await indexerApi.get(path);
+
+    return result;
+}
+
+async function fetchBlocks() {
+    try {
+        let response = await fetchBlocksPage(0);
+        blocks.value[0] = response.data.results[0];
+        // remove the first block to avoid repeating it
+        response.data.results.shift();
+        await fetchBlocksWithTransactions(response.data.results).then(() => {
+            saveCache();
+        });
+    } catch (e: unknown) {
+        $q.notify({
+            type: 'negative',
+            message: $t('components.transaction.load_error'),
+            caption: (e as {message:string}).message,
+        });
+    }
+}
+
+function getPath(page = 0) {
+    const offset = page * 100;
+    let path = `blocks?limit=6&includePagination&noEmpty=true&offset=${offset}`;
+    return path;
+}
+
+const gasUsedFor = (block: BlockData) => {
+    if (block) {
+        try {
+            const wei = ethers.BigNumber.from(block.gasUsed).mul(gasPrice);
+            return prettyPrintCurrency(
+                ethers.BigNumber.from(wei.toHexString()),
+                wei.isZero() ? 0 : 2, // If it is Zero, then do not show decimals
+                locale,
+                false,
+                'TLOS',
+                false,
+                WEI_PRECISION,
+                false,
+            );
+        } catch (e) {
+            console.error(e);
+        }
+    }
+    return '0.00 TLOS';
+};
+
+
+// lifecycle
+onMounted(() => {
+    loadCache();
+    fetchBlocks();
+});
+
+</script>
+
+<template>
+<table class="c-latest-blocks">
+    <HomeLatestDataTableRow v-for="(block, index) in blocks" :key="index" :loading="block === null">
+        <template v-slot:column-one>
+            <q-icon name="view_in_ar" size="24px" />
+        </template>
+        <template v-slot:column-two>
+            <BlockField
+                class="c-latest-blocks__number"
+                :block="block?.blockNumber"
+            />
+            <DateField
+                class="c-latest-blocks__timestamp"
+                :epoch="(block?.timestamp ?? 0) / 1000"
+                :force-show-age="true"
+                :muted-text="true"
+            />
+        </template>
+        <template v-slot:column-three>
+
+            <template v-if="(block?.transactionsCount ?? 0) > 0">
+                <a :href="`/block/${block?.blockNumber}?tab=transactions`">
+                    {{
+                        block?.transactionsCount === 1
+                            ? $t('components.blocks.count_transaction')
+                            : $t('components.blocks.count_transactions', {
+                                count: block?.transactionsCount
+                            })
+                    }}
+                </a>
+            </template>
+            <template v-else>
+                {{
+                    $t('components.blocks.count_transactions', { count: block?.transactionsCount })
+                }}
+            </template>
+
+            <span class="c-latest-blocks__aux-text">{{ $t('components.blocks.in_this_block') }}</span>
+
+            <div v-if="block" class="c-latest-blocks__gas-used c-latest-blocks__gas-used--mobile">
+                {{ gasUsedFor(block) }}
+                <q-tooltip anchor="bottom right" self="top end">
+                    {{ $t('components.blocks.gas_used_tooltip') }}
+                </q-tooltip>
+            </div>
+
+        </template>
+        <template v-slot:column-four>
+            <div v-if="block" class="c-latest-blocks__gas-used c-latest-blocks__gas-used--desktop">
+                {{ gasUsedFor(block) }}
+                <q-tooltip anchor="bottom right" self="top end">
+                    {{ $t('components.blocks.gas_used_tooltip') }}
+                </q-tooltip>
+            </div>
+        </template>
+    </HomeLatestDataTableRow>
+</table>
+</template>
+
+<style lang="scss">
+.c-latest-blocks {
+    width: 100%;
+    border-collapse: collapse;
+    max-height: 100px;
+
+    &__number {
+        margin-right:5px;
+
+        @media screen and (min-width: $latest-data-breakpoint) {
+            margin-right: 0px;
+            &::after {
+                content: ' ';
+                display: block;
+            }
+        }
+    }
+
+    &__aux-text {
+        display: none;
+        @media screen and (min-width: $latest-data-breakpoint) {
+            display: block;
+        }
+    }
+
+    &__gas-used {
+        @include token-value;
+        display: none;
+        &--mobile {
+            display: inline-block;
+            margin-left: 10px;
+        }
+        @media screen and (min-width: $latest-data-breakpoint) {
+            &--desktop {
+                display: block;
+            }
+            &--mobile {
+                display: none;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/pages/home/HomeLatestDataContainer.vue b/src/pages/home/HomeLatestDataContainer.vue
new file mode 100644
index 000000000..be9af7851
--- /dev/null
+++ b/src/pages/home/HomeLatestDataContainer.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+
+import { LatestContainerOptions } from 'src/types';
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+  options: LatestContainerOptions
+}>();
+
+const selectedOption = ref<string>(Object.keys(props.options)[0]);
+
+const selectOption = (option: string) => {
+    selectedOption.value = option;
+};
+
+// only show the customize button if there are more than 1 options
+const showCustomize = computed(() => Object.keys(props.options).length > 1);
+
+</script>
+
+<template>
+<q-card class="c-latest-data">
+
+    <q-item class="c-latest-data__header">
+        <q-item-section class="c-latest-data__header-title">{{ props.options[selectedOption].title }}</q-item-section>
+        <q-item-section avatar class="c-latest-data__header-customize">
+            <q-btn
+                v-if="showCustomize"
+                no-caps
+                flat
+                bordered
+                dense
+                small
+                icon="dashboard"
+                label="Customize"
+            >
+                <q-menu
+                    auto-close
+                    class="c-latest-data__menu"
+                    anchor="bottom right"
+                    self="top right"
+                >
+                    <template v-for="(option, key) in props.options" :key="key">
+                        <q-item class="c-latest-data__menu-opt" clickable @click="selectOption(key.toString())">
+                            <q-item-section side>
+                                <q-icon
+                                    name="check"
+                                    :class="{
+                                        'c-latest-data__menu-opt-check': true,
+                                        'c-latest-data__menu-opt-check--active': selectedOption === key.toString()
+                                    }"
+                                />
+                            </q-item-section>
+                            <q-item-section no-wrap>{{ option.title }}</q-item-section>
+                        </q-item>
+                    </template>
+                </q-menu>
+            </q-btn>
+        </q-item-section>
+    </q-item>
+
+    <q-separator />
+
+    <q-card-section class="c-latest-data__content">
+        <template v-for="(name, key) in props.options" :key="key">
+            <slot v-if="selectedOption === key.toString()" :name="key"></slot>
+        </template>
+    </q-card-section>
+
+    <q-card-actions
+        align="center"
+        class="c-latest-data__footer"
+    >
+        <router-link class="c-latest-data__footer-container" :to="{ name: props.options[selectedOption].link }">
+            <span class="c-latest-data__footer-text"> {{ props.options[selectedOption].footer }} </span>
+            <q-icon name="arrow_forward" class="c-latest-data__footer-icon" />
+        </router-link>
+    </q-card-actions>
+
+</q-card>
+
+</template>
+
+<style lang="scss">
+.c-latest-data {
+
+    height: 528px;
+    overflow-y: hidden;
+
+    &__header {
+        &-title {
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+    }
+
+    &__content {
+        padding-bottom: 33px;
+        overflow-y: auto;
+        @include scroll-bar;
+    }
+
+    &__menu-opt-check {
+        opacity: 0;
+        &--active {
+            opacity: 1;
+        }
+    }
+
+    &__footer {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 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);
+        }
+    }
+}
+
+@media screen and (max-width: $latest-data-breakpoint) {
+    .c-latest-data {
+        height: fit-content;
+    }
+}
+</style>
diff --git a/src/pages/home/HomeLatestDataTableRow.vue b/src/pages/home/HomeLatestDataTableRow.vue
new file mode 100644
index 000000000..d218da7bd
--- /dev/null
+++ b/src/pages/home/HomeLatestDataTableRow.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+defineProps<{
+    loading: boolean;
+}>();
+</script>
+
+<template>
+<div
+    :class="{
+        'c-latest-data-row': true,
+        'c-latest-data-row--loading': loading
+    }"
+>
+    <div class="c-latest-data-row__column-one">
+        <div v-if="loading" class="c-latest-data-row__skeleton">
+            <q-skeleton type="rect" size="48px" />
+        </div>
+        <div v-else class="c-latest-data-row__icon-container">
+            <slot name="column-one">
+            </slot>
+        </div>
+    </div>
+    <div class="c-latest-data-row__column-two">
+        <div v-if="loading" class="c-latest-data-row__skeleton">
+            <q-skeleton type="rect" height="22px" class="q-mb-xs" />
+            <q-skeleton type="rect" height="22px" />
+        </div>
+        <slot v-else name="column-two">
+        </slot>
+    </div>
+    <div class="c-latest-data-row__column-three">
+        <div v-if="loading" class="c-latest-data-row__skeleton">
+            <q-skeleton type="rect" height="22px" class="q-mb-xs" />
+            <q-skeleton type="rect" height="22px" />
+        </div>
+        <slot v-else name="column-three">
+        </slot>
+    </div>
+    <div class="c-latest-data-row__column-four">
+        <div v-if="loading" class="c-latest-data-row__skeleton">
+            <q-skeleton type="rect" height="22px" class="q-mb-xs" />
+            <q-skeleton type="rect" height="22px" />
+        </div>
+        <slot v-else name="column-four">
+        </slot>
+    </div>
+</div>
+
+</template>
+
+<style lang="scss">
+.c-latest-data-row {
+    $this: &;
+
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 12px 0;
+
+    @media screen and (min-width: $latest-data-breakpoint) {
+        gap: 12px;
+    }
+
+    @media screen and (min-width: $latest-data-breakpoint) {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &--loading {
+        #{$this}__column-one {
+            display: none;
+
+            @media screen and (min-width: $latest-data-breakpoint) {
+                display: block;
+            }
+        }
+    }
+
+    &:first-of-type {
+        padding-top: 0;
+    }
+
+    &:last-of-type {
+        border-bottom: none;
+    }
+
+    &__icon-container {
+        display: none;
+        justify-content: center;
+        align-items: center;
+        height: 48px;
+        width: 48px;
+        background-color: $grey-3;
+        border-radius: 12px;
+
+        body.body--dark & {
+            background-color: $grey-9;
+        }
+
+        @media screen and (min-width: $latest-data-breakpoint) {
+            display: flex;
+        }
+    }
+
+    &__skeleton {
+        width: 100%;
+    }
+
+    &__column-two {
+        @media screen and (min-width: $latest-data-breakpoint) {
+            width: 38%;
+        }
+    }
+
+    &__column-three {
+        @media screen and (min-width: $latest-data-breakpoint) {
+            width: 38%;
+            flex-grow: 1;
+        }
+    }
+
+    &__column-four {
+        @media screen and (min-width: $latest-data-breakpoint) {
+            width: 20%;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+        }
+    }
+}
+</style>
diff --git a/src/pages/home/HomeLatestTransactions.vue b/src/pages/home/HomeLatestTransactions.vue
new file mode 100644
index 000000000..906485f64
--- /dev/null
+++ b/src/pages/home/HomeLatestTransactions.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BigNumber } from 'ethers/lib/ethers';
+
+import { indexerApi } from 'src/boot/telosApi';
+import { prettyPrintCurrency } from 'src/antelope/wallets/utils/currency-utils';
+import { WEI_PRECISION } from 'src/lib/utils';
+
+import DateField from 'components/DateField.vue';
+import TransactionField from 'components/TransactionField.vue';
+import AddressField from 'src/components/AddressField.vue';
+import HomeLatestDataTableRow from 'src/pages/home/HomeLatestDataTableRow.vue';
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
+const $i18n = useI18n();
+const locale = $i18n.locale.value;
+const { t: $t } = $i18n;
+
+interface Transaction {
+    from: string;
+    to: string;
+    hash: string;
+    timestamp: number;
+    value: string;
+}
+
+const transactions = ref<Transaction[]>([]);
+
+const loading = ref(true);
+
+const truncateHash = computed(() => $q.screen.width > 1024 && $q.screen.width <= 1240 ? 8 : 20);
+
+onBeforeMount(async () => {
+    const response = await indexerApi.get('transactions?limit=6');
+    transactions.value = response.data.results;
+    loading.value = false;
+});
+
+function getTlosValue(value: string) {
+    return prettyPrintCurrency(
+        BigNumber.from(value),
+        0,
+        locale,
+        false,
+        'TLOS',
+        false,
+        WEI_PRECISION,
+        true,
+    );
+}
+</script>
+
+<template>
+<table class="c-home-latest-transactions__table">
+    <HomeLatestDataTableRow v-for="index in [0, 1, 2, 3, 4, 5]" :key="index" :loading="loading">
+        <template v-slot:column-one>
+            <q-icon size="20px" name="far fa-file-alt" />
+        </template>
+
+        <template v-slot:column-two>
+            <div>
+                <TransactionField
+                    class="c-home-latest-transactions__hash"
+                    :transaction-hash="transactions[index].hash"
+                    :truncate="truncateHash"
+                />
+            </div>
+            <div>
+                <DateField
+                    class="c-home-latest-transactions__timestamp"
+                    :epoch="transactions[index].timestamp / 1000"
+                    :force-show-age="true"
+                    :muted-text="true"
+                />
+            </div>
+        </template>
+
+        <template v-slot:column-three>
+            <div class="c-home-latest-transactions__from-to">
+                {{ $t('pages.from') }}
+                <AddressField :address="transactions[index].from" :truncate="8" :hide-contract-icon="true" />
+            </div>
+            <div class="c-home-latest-transactions__from-to">
+                {{ $t('pages.to') }}
+                <AddressField
+                    :address="transactions[index].to"
+                    :truncate="8"
+                    :hide-contract-icon="true"
+                    :class="'c-home-latest-transactions__to-address'"
+                />
+                <div class="c-home-latest-transactions__value c-home-latest-transactions__value--mobile">
+                    {{ getTlosValue(transactions[index].value) }}
+                    <q-tooltip anchor="bottom right" self="top end">
+                        {{ $t('components.contract_tab.amount') }}
+                    </q-tooltip>
+                </div>
+            </div>
+        </template>
+
+        <template v-slot:column-four>
+            <div class="c-home-latest-transactions__value c-home-latest-transactions__value--desktop">
+                {{ getTlosValue(transactions[index].value) }}
+                <q-tooltip anchor="bottom right" self="top end">
+                    {{ $t('components.contract_tab.amount') }}
+                </q-tooltip>
+            </div>
+        </template>
+    </HomeLatestDataTableRow>
+</table>
+</template>
+
+<style lang="scss">
+.c-home-latest-transactions {
+
+    &__hash {
+        margin-right:5px;
+
+        @media screen and (min-width: $latest-data-breakpoint) {
+            margin-right: 0px;
+            &::after {
+                content: ' ';
+                display: block;
+            }
+        }
+    }
+
+    &__to-address {
+        min-width: unset;
+    }
+
+    &__table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    &__icon-container {
+        height: 48px;
+        width: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 12px;
+        background-color: $grey-3;
+
+        body.body--dark & {
+            background-color: $grey-10;
+        }
+    }
+
+    &__from-to {
+        // display: flex;
+        // align-items: center;
+        // gap: 5px;
+        // margin-bottom: 5px;
+
+        // no break
+        white-space: nowrap;
+    }
+
+    &__value {
+        @include token-value;
+        display: none;
+        &--mobile {
+            display: inline-block;
+            margin-left: 10px;
+        }
+        @media screen and (min-width: $latest-data-breakpoint) {
+            &--desktop {
+                display: block;
+            }
+            &--mobile {
+                display: none;
+            }
+        }
+    }
+}</style>
diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
new file mode 100644
index 000000000..4c7ab9ef1
--- /dev/null
+++ b/src/pages/home/HomePage.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { LatestContainerOptions } from 'src/types';
+
+import HomeInfo from 'src/pages/home/HomeInfo.vue';
+import HomeLatestDataContainer from 'src/pages/home/HomeLatestDataContainer.vue';
+import HomeLatestBlocks from 'src/pages/home/HomeLatestBlocks.vue';
+import HomeLatestTransactions from 'src/pages/home/HomeLatestTransactions.vue';
+import AppSearch from 'src/components/AppSearch.vue';
+
+const { t: $t } = useI18n();
+
+const left_options = ref<LatestContainerOptions>({
+    blocks: {
+        title: 'Latest Blocks',
+        footer: 'View all Blocks',
+        link: 'blocks',
+    },
+});
+
+const right_options = ref<LatestContainerOptions>({
+    transactions: {
+        title: 'Latest Transactions',
+        footer: 'View all Transactions',
+        link: 'transactions',
+    },
+});
+
+</script>
+
+<template>
+<q-page class="c-home">
+    <div class="c-home__top-text-row row">
+        <div class="col-12 text-center">
+            <h5 class="text-weight-bolder q-my-none">
+                {{ $t('pages.home.telos_evm_explorer') }}
+            </h5>
+        </div>
+    </div>
+    <div class="row q-mb-xl">
+        <div class="col-12 u-flex--center">
+            <AppSearch :homepage-mode="true" />
+        </div>
+    </div>
+    <div class="row q-my-xl">
+        <div class="col-12">
+            <HomeInfo />
+        </div>
+    </div>
+    <div class="row q-col-gutter-md">
+        <div class="col-12 col-md-6">
+            <HomeLatestDataContainer :options="left_options">
+                <template v-slot:blocks>
+                    <HomeLatestBlocks />
+                </template>
+            </HomeLatestDataContainer>
+        </div>
+        <div class="col-12 col-md-6">
+            <HomeLatestDataContainer :options="right_options">
+                <template v-slot:transactions>
+                    <HomeLatestTransactions />
+                </template>
+            </HomeLatestDataContainer>
+        </div>
+    </div>
+</q-page>
+</template>
+
+<style lang="scss">
+.c-home {
+    @include page-container;
+
+    &__top-text-row {
+        margin-top: 32px;
+        margin-bottom: 16px;
+
+        @media screen and (min-width: $breakpoint-md-min) {
+            margin-top: 48px;
+        }
+    }
+
+    &__data {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 32px;
+        gap: 16px;
+    }
+}
+</style>
diff --git a/src/pages/staking/BaseStakingForm.vue b/src/pages/staking/BaseStakingForm.vue
deleted file mode 100644
index 20f45b297..000000000
--- a/src/pages/staking/BaseStakingForm.vue
+++ /dev/null
@@ -1,243 +0,0 @@
-<script>
-import { formatUnstakePeriod } from 'pages/staking/staking-utils';
-
-import StakingFormInput from 'pages/staking/StakingFormInput';
-
-const genericMaxWei = '999999999999000000000000000000';
-
-export default {
-    name: 'BaseStakingForm',
-    components: {
-        StakingFormInput,
-    },
-    props: {
-        header: {
-            type: String,
-            required: true,
-        },
-        subheader: {
-            type: String,
-            required: true,
-        },
-        topInputLabel: {
-            type: String,
-            required: true,
-        },
-        topInputInfoText: {
-            type: String,
-            required: true,
-        },
-        topInputAmount: {
-            type: String,
-            required: true,
-        },
-        topInputMaxValue: {
-            type: String,
-            default: null,
-        },
-        topInputErrorText: {
-            type: String,
-            required: true,
-        },
-        topInputIsLoading: {
-            type: Boolean,
-            required: true,
-        },
-        topInputTooltip: {
-            type: String,
-            required: true,
-        },
-        bottomInputLabel: {
-            type: String,
-            required: true,
-        },
-        bottomInputAmount: {
-            type: String,
-            required: true,
-        },
-        bottomInputMaxValue: {
-            type: String,
-            default: null,
-        },
-        bottomInputIsLoading: {
-            type: Boolean,
-            required: true,
-        },
-        ctaText: {
-            type: String,
-            required: true,
-        },
-        ctaDisabled: {
-            type: Boolean,
-            required: true,
-        },
-        ctaLoading: {
-            type: Boolean,
-            required: true,
-        },
-        unstakePeriodSeconds: {
-            type: Number,
-            default: null,
-        },
-        valueOfOneStlosInTlos: {
-            type: String,
-            default: null,
-        },
-    },
-    emits: [
-        'input-top',
-        'input-bottom',
-        'cta-clicked',
-    ],
-    data: () => ({
-        unstakePeriod: '',
-        stlosContract: null,
-    }),
-    computed: {
-        unstakePeriodPretty() {
-            return formatUnstakePeriod(this.unstakePeriodSeconds, this.$t);
-        },
-        inputs() {
-            return [{
-                label:       this.topInputLabel,
-                infoText:    this.topInputInfoText,
-                errorText:   this.topInputErrorText,
-                tooltip:     this.topInputTooltip,
-                maxValue:    this.topInputMaxValue || genericMaxWei,
-                isLoading:   this.topInputIsLoading,
-            }, {
-                label:       this.bottomInputLabel,
-                errorText:   '',
-                maxValue:    this.bottomInputMaxValue || null,
-                isLoading:   this.bottomInputIsLoading,
-            }];
-        },
-    },
-    methods: {
-        handleInput(event, index) {
-            const eventName = 'input-'.concat(index === 0 ? 'top' : 'bottom');
-
-            this.$emit(eventName, event);
-        },
-        handleCtaClick() {
-            this.$emit('cta-clicked');
-        },
-    },
-};
-</script>
-
-<template>
-<div class="c-base-staking-form container-fluid">
-    <div class="row">
-        <div class="col-sm-12 col-md-6 offset-md-3">
-            <div class="row q-mb-md">
-                <div class="col">
-                    <h5 class="c-base-staking-form__header">
-                        {{ header }}
-                    </h5>
-                    <p>{{ subheader }}</p>
-                </div>
-            </div>
-            <div class="row">
-                <div v-if="valueOfOneStlosInTlos !== null" class="col-12 q-mb-sm u-flex--right">
-                    <q-badge outline color="secondary" :label="`1 TLOS = ${valueOfOneStlosInTlos} sTLOS`" />
-                </div>
-                <div class="col-12">
-                    <StakingFormInput
-                        :model-value="topInputAmount"
-                        v-bind="inputs[0]"
-                        @update:modelValue="handleInput($event, 0)"
-                    />
-                </div>
-
-                <div class="col-12 u-flex--center">
-                    <div class="c-base-staking-form__decorative-chevron"></div>
-                </div>
-
-                <div class="col-12 q-mb-md">
-                    <StakingFormInput
-                        :model-value="bottomInputAmount"
-                        v-bind="inputs[1]"
-                        @update:modelValue="handleInput($event, 1)"
-                    />
-                </div>
-
-                <div class="col-xs-12 col-sm-8 u-flex--center-y">
-                    <p class="c-base-staking-form__footer-p">
-                        {{ $t('pages.staking.note_unstaking_period', { period: unstakePeriodPretty }) }}
-                    </p>
-                </div>
-
-                <div class="col-xs-12 col-sm-4 u-flex--right">
-                    <q-btn
-                        :disabled="ctaDisabled"
-                        :loading="ctaLoading"
-                        color="secondary"
-                        text-color="black"
-                        @click="handleCtaClick"
-                    >
-                        {{ ctaText }}
-                    </q-btn>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-</template>
-
-<style lang="scss">
-.c-base-staking-form {
-    &__header {
-        margin: 0 0 8px;
-    }
-
-    &__decorative-chevron {
-        height: 56px;
-        position: relative;
-
-        &::before,
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            margin: auto;
-
-            height: 48px;
-            width: 4px;
-            border-radius: 4px 4px 0 0;
-
-            background-color: $grey-0;
-
-            @at-root .body--light & {
-                background-color: $purpleDark;
-            }
-        }
-
-        &::before {
-            left: -21px;
-            transform: rotate(-55deg);
-        }
-
-        &::after {
-            right: -20px;
-            transform: rotate(55deg);
-        }
-    }
-
-    &__footer-p {
-        font-size: 12px;
-        margin: 0 0 16px;
-
-        color: $grey-0;
-
-        @at-root .body--light & {
-            color: $purpleDark;
-        }
-
-        @media screen and (min-width: $breakpoint-sm) {
-            margin: 0;
-        }
-    }
-}
-</style>
diff --git a/src/pages/staking/StakeForm.vue b/src/pages/staking/StakeForm.vue
deleted file mode 100644
index 0a7eb36b2..000000000
--- a/src/pages/staking/StakeForm.vue
+++ /dev/null
@@ -1,448 +0,0 @@
-<!-- eslint-disable max-len -->
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable no-unused-vars -->
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapGetters } from 'vuex';
-import { BigNumber, ethers } from 'ethers';
-import { debounce, DebouncedFunc } from 'lodash';
-import { stlos } from 'src/lib/logos';
-
-
-import { formatUnstakePeriod } from 'pages/staking/staking-utils';
-import { promptAddToMetamask } from 'src/lib/token-utils';
-import {
-    DISPLAY_DECIMALS,
-    getClientIsApple,
-    WEI_PRECISION,
-} from 'src/lib/utils';
-
-import BaseStakingForm from 'pages/staking/BaseStakingForm.vue';
-import TransactionField from 'components/TransactionField.vue';
-import LoginModal from 'components/LoginModal.vue';
-import { CURRENT_CONTEXT, useAccountStore } from 'src/antelope/mocks';
-import { EvmABI, stlosAbiDeposit } from 'src/antelope/types';
-import { formatWei } from 'src/antelope/wallets/utils';
-
-const reservedForGasBn = BigNumber.from('10').pow(WEI_PRECISION);
-
-export default defineComponent({
-    name: 'StakeForm',
-    components: {
-        BaseStakingForm,
-        LoginModal,
-        TransactionField,
-    },
-    props: {
-        stlosContractInstance: {
-            type: Object,
-            required: true,
-        },
-        tlosBalance: {
-            type: String,
-            default: null,
-        },
-        hasUnlockedTlos: {
-            type: Boolean,
-            required: true,
-        },
-        unstakePeriodSeconds: {
-            type: Number,
-            default: null,
-        },
-        valueOfOneStlosInTlos: {
-            type: String,
-            default: null,
-        },
-    },
-    emits: ['balance-changed'],
-    data: () => ({
-        displayConfirmModal: false,
-        displayLoginModal: false,
-        resultHash: null as null | string,
-        header: '',
-        subheader: '',
-        topInputLabel: '',
-        topInputAmount: '0',
-        topInputIsLoading: false,
-        bottomInputMaxValue: '',
-        bottomInputIsLoading: false,
-        bottomInputLabel: '',
-        bottomInputAmount: '0',
-        ctaIsLoading: false,
-        debouncedTopInputHandler: (() => void 0) as DebouncedFunc<() => void>,
-        debouncedBottomInputHandler: (() => void 0) as DebouncedFunc<() => void>,
-        userDismissedBanner: false,
-    }),
-    computed: {
-        ...mapGetters('login', ['address', 'isLoggedIn', 'isNative']),
-        unstakePeriodPretty() {
-            return formatUnstakePeriod(this.unstakePeriodSeconds, this.$t);
-        },
-        topInputMaxValue() {
-            return this.isLoggedIn ? this.usableWalletBalance : '';
-        },
-        walletBalanceBn() {
-            return BigNumber.from(this.tlosBalance ?? '0');
-        },
-        usableWalletBalance() {
-            if (this.walletBalanceBn.lte(reservedForGasBn)) {
-                return '0';
-            }
-
-            return this.walletBalanceBn.sub(reservedForGasBn).toString();
-        },
-        topInputInfoText() {
-            if (!this.isLoggedIn) {
-                return '';
-            }
-
-            let balanceEth = ethers.utils.formatEther(this.usableWalletBalance);
-
-            if (balanceEth.indexOf('.') >= 0) {
-                const [integer, fraction] = balanceEth.split('.');
-
-                balanceEth = integer.concat(`.${fraction.slice(0, 3)}`);
-            }
-
-            const balanceTlos = ethers.utils.commify(balanceEth);
-
-            return this.$t('pages.staking.available', { balanceTlos });
-        },
-        topInputErrorText() {
-            const walletBalanceBn = BigNumber.from(this.tlosBalance ?? '0');
-
-            if (this.isLoggedIn) {
-                if (walletBalanceBn.lt(reservedForGasBn) && !this.isNative) {
-                    return this.$t('pages.staking.insufficient_tlos_balance');
-                } else if(this.isNative) {
-                    return this.$t('pages.staking.login_using_an_evm_wallet');
-                } else {
-                    return '';
-                }
-            }
-
-            return this.$t('pages.staking.wallet_not_connected');
-        },
-        topInputTooltip() {
-            const prettyBalance = ethers.utils.formatEther(this.usableWalletBalance).toString();
-            return this.$t('pages.staking.click_to_input_full_wallet_balance', { prettyBalance });
-        },
-        ctaIsDisabled() {
-            const inputsInvalid = (
-                this.isLoggedIn &&
-                this.walletBalanceBn.gt(reservedForGasBn) &&
-                [this.topInputAmount, this.bottomInputAmount].some(amount => BigNumber.from(amount ?? '0').eq('0'))
-            );
-
-            return inputsInvalid ||
-                this.topInputIsLoading ||
-                this.bottomInputIsLoading ||
-                this.ctaIsLoading;
-        },
-        ctaText() {
-            if (this.ctaIsLoading) {
-                return this.$t('pages.staking.loading');
-            }
-
-            if (this.isLoggedIn) {
-                if (this.walletBalanceBn.lt(reservedForGasBn)) {
-                    return this.$t('pages.staking.get_more_tlos');
-                } else {
-                    return this.$t('pages.staking.stake_tlos');
-                }
-            }
-
-            return this.$t('pages.staking.connect_wallet');
-        },
-        showClaimBanner() {
-            return this.hasUnlockedTlos && !this.userDismissedBanner;
-        },
-        showMetamaskPrompt() {
-            return window?.ethereum?.isMetaMask === true;
-        },
-        abi(): EvmABI {
-            return stlosAbiDeposit;
-        },
-    },
-    async created() {
-        // Initialization of the text translations
-        this.header = this.$t('pages.staking.stake_tlos');
-        this.subheader = this.$t('pages.staking.stake_tlos_subheader');
-        this.topInputLabel = this.$t('pages.staking.stake_tlos');
-        this.bottomInputLabel = this.$t('pages.staking.receive_stlos');
-
-        const debounceWaitMs = 250;
-
-        this.debouncedTopInputHandler = debounce(
-            () => {
-                this.stlosContractInstance.previewDeposit(this.topInputAmount)
-                    .then((amountBigNum: ethers.BigNumber) => {
-                        this.bottomInputAmount = amountBigNum.toString();
-                    })
-                    .catch((err: any) => {
-                        this.bottomInputAmount = '';
-                        console.error(`Unable to convert TLOS to STLOS: ${err}`);
-                        this.$q.notify({
-                            type: 'negative',
-                            message: this.$t('pages.staking.redeem_failed', { message: err }),
-                        });
-                    })
-                    .finally(async () => {
-                        this.bottomInputIsLoading = false;
-
-                        if (getClientIsApple()) {
-                            // workaround; Apple devices will focus the last input which had its value
-                            // programmatically changed. Focus should not change. Downside is that cursor position
-                            // is lost, but generally cursor should be at the end anyway
-                            const old = this.topInputAmount;
-                            this.topInputAmount = '0';
-                            await this.$nextTick();
-
-                            this.topInputAmount = old;
-                        }
-                    });
-            },
-            debounceWaitMs,
-        );
-
-        this.debouncedBottomInputHandler = debounce(
-            () => {
-                this.stlosContractInstance.previewRedeem(this.bottomInputAmount)
-                    .then((amountBigNum: { toString: () => string; }) => {
-                        this.topInputAmount = amountBigNum.toString();
-                    })
-                    .catch((err: any) => {
-                        this.topInputAmount = '';
-                        console.error(`Unable to convert STLOS to TLOS: ${err}`);
-                        this.$q.notify({
-                            type: 'negative',
-                            message: this.$t('pages.staking.redeem_failed', { message: err }),
-                        });
-                    })
-                    .finally(async () => {
-                        this.topInputIsLoading = false;
-
-                        if (getClientIsApple()) {
-                            // workaround; Apple devices will focus the last input which had its value
-                            // programmatically changed. Focus should not change. Downside is that cursor position
-                            // is lost, but generally cursor should be at the end anyway
-                            const old = this.bottomInputAmount;
-                            this.bottomInputAmount = '0';
-                            await this.$nextTick();
-
-                            this.bottomInputAmount = old;
-                        }
-                    });
-            },
-            debounceWaitMs,
-        );
-    },
-    methods: {
-        promptAddToMetamask() {
-            return promptAddToMetamask(
-                this.$q,
-                process.env.STAKED_TLOS_CONTRACT_ADDRESS as string,
-                'STLOS',
-                stlos,
-                'ERC20',
-                WEI_PRECISION,
-            );
-        },
-        handleInputTop(newWei = '0') {
-            if (newWei === this.topInputAmount) {
-                return;
-            }
-
-            this.bottomInputIsLoading = true;
-            this.topInputAmount = newWei;
-
-            this.debouncedTopInputHandler();
-        },
-        handleInputBottom(newWei = '0') {
-            if (newWei === this.bottomInputAmount) {
-                return;
-            }
-
-            this.topInputIsLoading = true;
-            this.bottomInputAmount = newWei;
-
-            this.debouncedBottomInputHandler();
-        },
-        handleCtaClick() {
-            if (!this.isLoggedIn) {
-                this.displayLoginModal = true;
-                return;
-            }
-
-            const walletBalanceBn = BigNumber.from(this.tlosBalance ?? '0');
-
-            if (walletBalanceBn.lt(reservedForGasBn)) {
-                window.open('https://telos.net', '_blank');
-                return;
-            }
-
-            this.displayConfirmModal = true;
-        },
-        async initiateDeposit() {
-            this.ctaIsLoading = true;
-            const value = BigNumber.from(this.topInputAmount);
-
-            try {
-
-                this.continueDeposit(value).then((result) => {
-                    this.resultHash = result.hash;
-                    this.$emit('balance-changed');
-                }).catch(({ message }: Error) => {
-                    console.error(`Failed to deposit TLOS: ${message}`);
-                    this.resultHash = null;
-                }).finally(() => {
-                    this.ctaIsLoading = false;
-                });
-
-            } catch (e) {
-                console.error('Failed to deposit TLOS', e);
-                this.ctaIsLoading = false;
-            }
-        },
-        continueDeposit(value: BigNumber) {
-            const symbol = 'STLOS';
-            const quantity = `${formatWei(value, WEI_PRECISION, DISPLAY_DECIMALS)}`;
-            const message = this.$t('notification.neutral_message_staking', { quantity, symbol });
-            const error = this.$t('notification.error_message_staking', { quantity, symbol });
-
-            return useAccountStore().signCustomTransaction(
-                CURRENT_CONTEXT,
-                message,
-                error,
-                this.stlosContractInstance.address,
-                this.abi,
-                [],
-                value,
-            );
-        },
-        hideClaimBanner() {
-            this.userDismissedBanner = true;
-        },
-    },
-});
-</script>
-
-<template>
-<div class="c-stake-form row">
-    <div class="col-xs-12 col-md-6 offset-md-3">
-        <q-banner
-            v-if="showClaimBanner"
-            rounded
-            inline-actions
-            dense
-            class="bg-green text-black"
-        >
-            {{ $t('pages.staking.you_have_unlocked_tlos') }}
-            <template #action>
-                <q-btn
-                    flat
-                    color="black"
-                    :label="$t('global.dismiss')"
-                    @click="hideClaimBanner"
-                />
-                <q-btn
-                    flat
-                    color="black"
-                    :label="$t('pages.staking.claim_tlos')"
-                    @click="$router.push({ hash: '#withdraw' })"
-                />
-            </template>
-        </q-banner>
-    </div>
-    <div class="col-12 q-mb-lg">
-        <BaseStakingForm
-            :header="header"
-            :subheader="subheader"
-            :top-input-label="topInputLabel"
-            :top-input-info-text="topInputInfoText"
-            :top-input-amount="topInputAmount"
-            :top-input-max-value="topInputMaxValue"
-            :top-input-error-text="topInputErrorText"
-            :top-input-is-loading="topInputIsLoading"
-            :top-input-tooltip="topInputTooltip"
-            :bottom-input-label="bottomInputLabel"
-            :bottom-input-amount="bottomInputAmount"
-            :bottom-input-max-value="bottomInputMaxValue"
-            :bottom-input-is-loading="bottomInputIsLoading"
-            :cta-text="ctaText"
-            :cta-disabled="ctaIsDisabled"
-            :cta-loading="ctaIsLoading"
-            :unstake-period-seconds="unstakePeriodSeconds"
-            :value-of-one-stlos-in-tlos="valueOfOneStlosInTlos"
-            @input-top="handleInputTop"
-            @input-bottom="handleInputBottom"
-            @cta-clicked="handleCtaClick"
-        />
-    </div>
-    <div v-if="resultHash" class="col-sm-12 col-md-6 offset-md-3">
-        {{ $t('pages.staking.stake_tlos_success') }}
-        <TransactionField :transaction-hash="resultHash" />
-    </div>
-    <q-dialog v-model="displayConfirmModal">
-        <q-card>
-            <q-card-section>
-                <p>
-                    {{ $t('pages.staking.stake_tlos_confirm') }}
-                </p>
-                <p>
-                    {{ $t('pages.staking.stake_tlos_confirm_2a' ) }}
-                    {{ unstakePeriodPretty }},
-                    {{ $t('pages.staking.stake_tlos_confirm_2b' ) }}
-                </p>
-                <p>{{ $t('pages.staking.stake_tlos_confirm_3' ) }}</p>
-            </q-card-section>
-
-            <q-card-actions align="right" class="q-pb-md q-px-md">
-                <p
-                    v-if="showMetamaskPrompt"
-                    class="c-stake-form__metamask-prompt u-flex--center-y"
-                    tabindex="0"
-                    :aria-label="$t('pages.staking.add_stlos_to_metamask')"
-                    @click="promptAddToMetamask"
-                >
-                    {{ $t('pages.staking.add_stlos_to_metamask') }}
-                    <img
-                        :src="require('src/assets/metamask-fox.svg')"
-                        class="q-ml-xs"
-                        height="24"
-                        width="24"
-                        :alt="$t('pages.staking.metamask_fox_logo')"
-                    >
-                </p>
-                <q-btn
-                    v-close-popup
-                    flat
-                    :label="$t('pages.staking.cancel')"
-                    color="negative"
-                />
-                <q-btn
-                    v-close-popup
-                    :label="$t('pages.staking.stake_tlos')"
-                    color="secondary"
-                    text-color="black"
-                    @click="initiateDeposit"
-                />
-            </q-card-actions>
-        </q-card>
-    </q-dialog>
-</div>
-<LoginModal :show="displayLoginModal" @hide="displayLoginModal = false" />
-</template>
-
-<style lang="scss">
-.c-stake-form {
-    &__metamask-prompt {
-        color: $secondary;
-        cursor: pointer;
-        width: max-content;
-        margin-right: auto;
-        margin-bottom: 0;
-    }
-}
-</style>
diff --git a/src/pages/staking/Staking.vue b/src/pages/staking/Staking.vue
deleted file mode 100644
index e4497c116..000000000
--- a/src/pages/staking/Staking.vue
+++ /dev/null
@@ -1,440 +0,0 @@
-<script>
-import { defineAsyncComponent } from 'vue';
-import { mapGetters } from 'vuex';
-import { BigNumber, ethers } from 'ethers';
-import {
-    formatWei,
-    getRouteWatcherForTabs,
-    LOGIN_DATA_KEY,
-    PROVIDER_WEB3_INJECTED,
-    WEI_PRECISION,
-} from 'src/lib/utils';
-
-import StakeForm from 'pages/staking/StakeForm';
-import StakingStats from 'pages/staking/StakingStats';
-
-const oneEth = ethers.utils.parseEther('1').toString();
-
-const tabs = {
-    stake: '#stake',
-    unstake: '#unstake',
-    withdraw: '#withdraw',
-};
-
-export default {
-    name: 'StakingPage',
-    components: {
-        WithdrawPage: defineAsyncComponent(() => import('pages/staking/WithdrawPage.vue')),
-        StakeForm,
-        StakingStats,
-        UnstakeForm: defineAsyncComponent(() => import('pages/staking/UnstakeForm')),
-    },
-    data: () => ({
-        selectedTab: '#stake',
-        stlosContract: null,
-        escrowContract: null,
-        stlosContractInstance: null,
-        escrowContractInstance: null,
-        valueOfOneStlosInTlos: null,
-        tlosBalance: null,
-        stlosBalance: null,
-        stlosValue: null,
-        totalUnstakedTlosBalance: null,
-        unlockedTlosBalance: null,
-        unstakePeriodSeconds: null,
-        escrowDeposits: [],
-    }),
-    computed: {
-        ...mapGetters('login', ['address', 'isLoggedIn', 'isNative']),
-        showWithdrawNotification() {
-            return BigNumber.from(this.unlockedTlosBalance ?? '0').gt('0');
-        },
-    },
-    watch: {
-        address: {
-            immediate: true,
-            async handler(address, oldAddress) {
-                if (address && address !== oldAddress) {
-                    await this.fetchContractInstances();
-                    await this.fetchBalances();
-                }
-            },
-        },
-        $route: getRouteWatcherForTabs('staking', tabs, tabs.stake),
-    },
-    async created() {
-        await this.fetchContracts();
-        await this.fetchContractInstances();
-    },
-    methods: {
-        async fetchBalances() {
-            if (!this.address) {
-                this.tlosBalance = null;
-                this.stlosBalance = null;
-                this.unlockedTlosBalance = null;
-                this.totalUnstakedTlosBalance = null;
-                this.stlosValue = null;
-                this.escrowDeposits = [];
-                this.valueOfOneStlosInTlos = null;
-
-                return;
-            }
-
-            const tlosPromise = this.$contractManager.getEthersProvider().getBalance(this.address)
-                .then((balanceBn) => {
-                    this.tlosBalance = balanceBn.toString();
-                })
-                .catch(({ message }) => {
-                    console.error(`Failed to fetch account: ${message}`);
-                    this.$q.notify({
-                        type: 'negative',
-                        message: this.$t('page.staking.fetch_balance_error', { message }),
-                    });
-                    this.tlosBalance = null;
-                });
-
-
-            const stlosPromise = this.stlosContractInstance.balanceOf(this.address)
-                .then((balanceBn) => {
-                    this.stlosBalance = balanceBn.toString();
-                })
-                .catch(({ message }) => {
-                    console.error(`Failed to fetch account STLOS balance: ${message}`);
-                    this.$q.notify({
-                        type: 'negative',
-                        message: this.$t('page.staking.fetch_stlos_balance_error', { message }),
-                    });
-
-                    this.stlosBalance = null;
-                });
-
-            const currentValuePromise = this.stlosContractInstance.maxWithdraw(this.address)
-                .then((valueBn) => {
-                    this.stlosValue = valueBn.toString();
-                })
-                .catch(({ message }) => {
-                    console.error(`Failed to fetch account STLOS balance value: ${message}`);
-                    this.$q.notify({
-                        type: 'negative',
-                        message: this.$t('page.staking.fetch_stlos_value_error', { message }),
-                    });
-                    this.stlosValue = null;
-                });
-
-            const totalUnstakedPromise = this.escrowContractInstance.balanceOf(this.address)
-                .then((amountBn) => {
-                    this.totalUnstakedTlosBalance = amountBn.toString();
-                })
-                .catch(({ message }) => {
-                    console.error(`Failed to fetch total unstaked TLOS balance: ${message}`);
-                    this.$q.notify({
-                        type: 'negative',
-                        message: this.$t('page.staking.fetch_unstaked_balance_error', { message }),
-                    });
-
-                    this.totalUnstakedTlosBalance = null;
-                });
-
-            const unlockedPromise = this.escrowContractInstance.maxWithdraw(this.address)
-                .then((amountBn) => {
-                    this.unlockedTlosBalance = amountBn.toString();
-                })
-                .catch(({ message }) => {
-                    console.error(`Failed to fetch withdrawable STLOS balance: ${message}`);
-                    this.$q.notify({
-                        type: 'negative',
-                        message: this.$t('page.staking.fetch_unlocked_balance_error', { message }),
-                    });
-                    this.unlockedTlosBalance = null;
-                });
-
-            const escrowDepositsPromise = this.escrowContractInstance.depositsOf(this.address)
-                .then((deposits) => {
-                    this.escrowDeposits = deposits;
-                })
-                .catch(({ message }) => {
-                    console.error(`Failed to fetch escrow deposits: ${message}`);
-                    this.$q.notify({
-                        type: 'negative',
-                        message: this.$t('page.staking.fetch_escrow_deposits_error', { message }),
-                    });
-                });
-
-            const conversionRatePromise = this.stlosContractInstance.previewDeposit(oneEth)
-                .then((stlosBn) => {
-                    this.valueOfOneStlosInTlos = formatWei(stlosBn, WEI_PRECISION, 3);
-                })
-                .catch(({ message }) => {
-                    console.error(`Failed to fetch TLOS->sTLOS conversion rate: ${message}`);
-                    this.$q.notify({
-                        type: 'negative',
-                        message: this.$t('page.staking.fetch_conversion_rate_error', { message }),
-                    });
-                });
-
-            return Promise.all([
-                tlosPromise,
-                stlosPromise,
-                currentValuePromise,
-                totalUnstakedPromise,
-                unlockedPromise,
-                escrowDepositsPromise,
-                conversionRatePromise,
-            ]);
-        },
-        async fetchContracts() {
-            const stlosPromise = this.$contractManager.getContract(process.env.STAKED_TLOS_CONTRACT_ADDRESS)
-                .then((contract) => {
-                    this.stlosContract = contract;
-                })
-                .catch(({ message }) => {
-                    console.error(`Failed to get STLOS contract: ${message}`);
-                    this.$q.notify({
-                        type: 'negative',
-                        message: this.$t('page.staking.fetch_stlos_contract_error', { message }),
-                    });
-                    this.stlosContract = null;
-                });
-
-            const escrowPromise = this.$contractManager.getContract(process.env.TELOS_ESCROW_CONTRACT_ADDRESS)
-                .then((contract) => {
-                    this.escrowContract = contract;
-                })
-                .catch(({ message }) => {
-                    console.error(`Failed to get STLOS contract: ${message}`);
-                    this.$q.notify({
-                        type: 'negative',
-                        message: this.$t('page.staking.fetch_escrow_contract_error', { message }),
-                    });
-                    this.escrowContract = null;
-                });
-
-            return Promise.all([stlosPromise, escrowPromise]);
-        },
-        async fetchContractInstances() {
-            if (!this.stlosContract || !this.escrowContract) {
-                await this.fetchContracts();
-            }
-
-            // default provider is the ContractManager ethers provider (JsonRpcProvider)
-            let provider = this.$contractManager.getEthersProvider();
-
-            if (this.isLoggedIn && !this.isNative) {
-                // only if the user is logged with a non-native wallet, we may change the provider
-                const loginData = localStorage.getItem(LOGIN_DATA_KEY);
-                if (loginData) {
-                    // If the user is authenticated using any Antelope.wallet.authenticators
-                    const loginObj = JSON.parse(loginData);
-                    switch(loginObj?.provider) {
-                    case PROVIDER_WEB3_INJECTED:
-                        provider = this.$providerManager.getEthersProvider().getSigner();
-                        break;
-                    }
-                } else {
-                    // legacy fallback
-                    provider = this.$providerManager.getEthersProvider().getSigner();
-                }
-            }
-
-            this.stlosContractInstance  = this.stlosContract.getContractInstance(provider, true);
-            this.escrowContractInstance = this.escrowContract.getContractInstance(provider, true);
-
-            await this.fetchBalances();
-
-            try {
-                this.unstakePeriodSeconds = (await this.escrowContractInstance.lockDuration()).toNumber();
-            } catch({ message }) {
-                console.error(`Failed to retrieve unstaking period: ${message}`);
-                this.$q.notify({
-                    type: 'negative',
-                    message: this.$t('page.staking.fetch_unstake_period_error', { message }),
-                });
-            }
-        },
-        async handleBalanceChanged() {
-            // note this method of attaining account balance is different from that in fetchBalances(), which
-            // seems to update slowly, yet is able (unlike this method) to handle new accounts with 0 balance
-            await this.fetchBalances();
-            this.$evm.telos.getEthAccount(this.address)
-                .then((account) => {
-                    this.tlosBalance = account.balance.toString();
-                })
-                .catch(({ message }) => {
-                    console.error(`Failed to fetch account: ${message}`);
-                    this.$q.notify({
-                        type: 'negative',
-                        message: this.$t('page.staking.fetch_account_error', { message }),
-                    });
-                    this.tlosBalance = null;
-                });
-        },
-    },
-};
-</script>
-
-<template>
-<div class="c-staking-page pageContainer">
-    <div class="row q-mx-md">
-        <div class="c-staking-page__header col-xs-12 col-md-6">
-            <h1 class="c-staking-page__title">
-                {{ $t('pages.staking.telos_evm_staking') }}
-            </h1>
-            <span class="text-white">
-                {{ $t('pages.staking.stake_tlos_earn_interest') }}
-            </span>
-        </div>
-        <div class="col-xs-12 col-md-6">
-            <StakingStats
-                v-if="stlosContractInstance"
-                :stlos-contract-instance="stlosContractInstance"
-                :stlos-balance="stlosBalance"
-                :stlos-value="stlosValue"
-                :total-unstaked-tlos-balance="totalUnstakedTlosBalance"
-                :unstake-period-seconds="unstakePeriodSeconds"
-            />
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-12">
-            <div>
-                <q-tabs
-                    v-model="selectedTab"
-                    dense
-                    active-color="secondary"
-                    align="justify"
-                    narrow-indicator
-                    class="c-staking-page__tabs-header tabsBar topRounded tableWrapper"
-                >
-                    <q-route-tab
-                        name="stake"
-                        :to="{ hash: '#stake'}"
-                        exact
-                        push
-                        :label="$t('pages.staking.stake')"
-                    />
-                    <q-route-tab
-                        name="unstake"
-                        :to="{ hash: '#unstake'}"
-                        exact
-                        push
-                        :label="$t('pages.staking.unstake')"
-                    />
-                    <q-route-tab
-                        name="withdraw"
-                        :to="{ hash: '#withdraw'}"
-                        exact
-                        push
-                        :label="$t('pages.staking.withdraw')"
-                        :alert="showWithdrawNotification ? 'green' : false"
-                    />
-                </q-tabs>
-                <q-tab-panels
-                    v-model="selectedTab"
-                    animated
-                    keep-alive
-                    class="q-py-lg"
-                >
-                    <q-tab-panel name="stake">
-                        <div class="row">
-                            <div v-if="!stlosContractInstance" class="col-12 u-flex--center">
-                                <q-spinner />
-                            </div>
-                            <div v-else class="col-12">
-                                <StakeForm
-                                    :stlos-contract-instance="stlosContractInstance"
-                                    :tlos-balance="tlosBalance"
-                                    :has-unlocked-tlos="showWithdrawNotification"
-                                    :unstake-period-seconds="unstakePeriodSeconds"
-                                    :value-of-one-stlos-in-tlos="valueOfOneStlosInTlos"
-                                    @balance-changed="handleBalanceChanged"
-                                />
-                            </div>
-                        </div>
-                    </q-tab-panel>
-
-                    <q-tab-panel name="unstake">
-                        <div class="row">
-                            <div
-                                v-if="!stlosContractInstance || !escrowContractInstance"
-                                class="col-12 u-flex--center"
-                            >
-                                <q-spinner />
-                            </div>
-                            <div v-else class="col-12">
-                                <UnstakeForm
-                                    :stlos-contract-instance="stlosContractInstance"
-                                    :escrow-contract-instance="escrowContractInstance"
-                                    :stlos-balance="stlosBalance"
-                                    :unlocked-tlos-balance="unlockedTlosBalance"
-                                    :unstake-period-seconds="unstakePeriodSeconds"
-                                    :deposits="escrowDeposits"
-                                    :value-of-one-stlos-in-tlos="valueOfOneStlosInTlos"
-                                    @balance-changed="handleBalanceChanged"
-                                />
-                            </div>
-                        </div>
-                    </q-tab-panel>
-
-                    <q-tab-panel name="withdraw">
-                        <div class="row">
-                            <div
-                                v-if="!escrowContractInstance"
-                                class="col-12 u-flex--center"
-                            >
-                                <q-spinner />
-                            </div>
-                            <div v-else class="col-12">
-                                <WithdrawPage
-                                    :escrow-contract-instance="escrowContractInstance"
-                                    :unlocked-tlos-balance="unlockedTlosBalance"
-                                    :total-unstaked="totalUnstakedTlosBalance"
-                                    :deposits="escrowDeposits"
-                                    @balance-changed="handleBalanceChanged"
-                                />
-                            </div>
-                        </div>
-                    </q-tab-panel>
-                </q-tab-panels>
-            </div>
-        </div>
-    </div>
-</div>
-</template>
-
-<style lang="scss">
-.c-staking-page {
-    margin-top: 24px;
-
-    @media screen and (min-width: $breakpoint-md-min) {
-        margin-top: 48px;
-    }
-
-    &__header {
-        margin-bottom: 32px;
-    }
-
-    &__title {
-        color: $primary;
-        margin: 0 0 12px;
-        font-size: 2.125rem;
-        font-weight: 400;
-        line-height: 2rem;
-        letter-spacing: 0.00735em;
-    }
-
-    &__tabs-header {
-        background: $dark;
-        color: white;
-
-        @at-root .body--light & {
-            background: white;
-            color: $dark;
-        }
-    }
-
-    // prevent scrolling behavior on quasar tab panels, which cannot be overridden using q-tab-panel API
-    .q-panel.scroll {
-        overflow: unset;
-    }
-}
-</style>
diff --git a/src/pages/staking/StakingFormInput.vue b/src/pages/staking/StakingFormInput.vue
deleted file mode 100644
index 497a22d48..000000000
--- a/src/pages/staking/StakingFormInput.vue
+++ /dev/null
@@ -1,362 +0,0 @@
-<script>
-import { BigNumber, ethers } from 'ethers';
-
-import { WEI_PRECISION } from 'src/lib/utils';
-
-const { commify, parseUnits, formatEther } = ethers.utils;
-
-const dot = '.';
-const zeroDot = '0.';
-const zero = '0';
-const notIntegerOrDotRegex = /[^\d.]/g;
-const notIntegerDotOrCommaRegex = /[^\d,.]/g;
-const leadingZeroesRegex = /^0+(?!$|\.)/g;
-const decimalRegex = /\.\d+$/g;
-const dotZeroRegex = /\.0$/g;
-const commaRegex = /,/g;
-const dotRegex = /\./g;
-
-export default {
-    name: 'StakingFormInput',
-    props: {
-        modelValue: {
-            type: String,
-            required: true,
-            validator: str => typeof str === 'string' && /^\d{1,256}$/.test(str),
-        },
-        label: {
-            type: String,
-            required: true,
-        },
-        infoText: {
-            type: String,
-            default: '',
-        },
-        errorText: {
-            type: String,
-            default: '',
-        },
-        tooltip: {
-            type: String,
-            default: '',
-        },
-        isLoading: {
-            type: Boolean,
-            required: true,
-        },
-        maxValue: {
-            type: String,
-            default: null,
-            validator: str => BigNumber.from(str),
-        },
-    },
-    emits: ['update:modelValue'],
-    watch: {
-        modelValue(newVal) {
-            const newValWeiBn = BigNumber.from(newVal || zero);
-            const currentValWeiBn = parseUnits(
-                this.$refs.input.value?.replaceAll(',', '') || zero,
-            );
-            const newValIsDifferent = !newValWeiBn.eq(currentValWeiBn);
-
-            if (newValIsDifferent) {
-                const formattedNewVal = formatEther(newValWeiBn).replace(dotZeroRegex, '');
-                this.setInputValue(formattedNewVal);
-                this.handleInput();
-            }
-        },
-        maxValue() {
-            this.handleInput();
-        },
-    },
-    methods: {
-        handleInfoClick() {
-            this.$emit('update:modelValue', this.maxValue);
-        },
-        handleKeydown(event) {
-            const { input } = this.$refs;
-
-            const numKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-            const modifierKeys = ['ctrl', 'meta', 'shift', 'alt'].map(mod => `${mod}Key`);
-            const value = input.value;
-            const caretPosition = input.selectionStart;
-            const pressedKey = event.key;
-
-            const eventHasModifiers = modifierKeys.some(modifier => event[modifier] === true);
-            const targetHasNoSelection = caretPosition === input.selectionEnd;
-            const deletingBackward = event.key === 'Backspace' && !eventHasModifiers && targetHasNoSelection;
-            const deletingForward  = event.key === 'Delete'    && !eventHasModifiers && targetHasNoSelection;
-
-            const nextCharacterIsComma     = commaRegex.test(value[caretPosition]);
-            const previousCharacterIsComma = commaRegex.test(value[caretPosition - 1]);
-            const nextCharacterIsDot       =   dotRegex.test(value[caretPosition]);
-            const previousCharacterIsDot   =   dotRegex.test(value[caretPosition - 1]);
-
-            const deletingDot = (deletingForward && nextCharacterIsDot) || (deletingBackward && previousCharacterIsDot);
-            const deletingComma = (deletingForward && nextCharacterIsComma) ||
-                (deletingBackward && previousCharacterIsComma);
-
-            if (deletingDot) {
-                this.setInputValue(value.replace(dotRegex, ''));
-            } else if (deletingForward && nextCharacterIsComma) {
-                const preCommaInclusive = value.slice(0, caretPosition + 1);
-                const newPostComma =      value.slice(caretPosition + 2);
-
-                this.setInputValue(preCommaInclusive.concat(newPostComma));
-            } else if (deletingBackward && previousCharacterIsComma) {
-                const newPreComma =        value.slice(0, caretPosition - 2);
-                const postCommaInclusive = value.slice(caretPosition - 1);
-
-                this.setInputValue(newPreComma.concat(postCommaInclusive));
-            }
-
-            if (deletingDot || deletingComma) {
-                this.setInputCaretPosition(caretPosition);
-                event.preventDefault();
-                this.handleInput();
-                return;
-            }
-
-            const tryingToAddDigitsPastMaxPrecision = (() => {
-                const [integer = '', fractional = ''] = value.split(dot);
-
-                const keypressIsDigit = numKeys.includes(event.key);
-                const caretIsPastDecimal = caretPosition > integer.length + 1;
-                const fractionalUnderMaxLength = fractional.length < WEI_PRECISION;
-
-                return keypressIsDigit && caretIsPastDecimal && !fractionalUnderMaxLength;
-            })();
-            const tryingToAddSecondDot = pressedKey === dot && value.includes(dot);
-            const tryingToAddLeadingZeroes =
-                pressedKey === zero &&
-                value[0] !== dot &&
-                value.length > 1 &&
-                caretPosition === 0;
-
-            const invalidKeystroke =
-                tryingToAddDigitsPastMaxPrecision ||
-                tryingToAddSecondDot ||
-                tryingToAddLeadingZeroes;
-
-            if (invalidKeystroke) {
-                event.preventDefault();
-            }
-        },
-        handleInput() {
-            const emit = (val) => {
-                if (val !== this.modelValue) {
-                    this.$emit('update:modelValue', val);
-                }
-            };
-
-            const { input } = this.$refs;
-
-            this.setInputValue(
-                String(input.value)
-                    .replace(leadingZeroesRegex, '')
-                    .replace(notIntegerDotOrCommaRegex, ''),
-            );
-
-            if (['', null, undefined, zero, zeroDot, dot].includes(input.value)) {
-                if (input.value === dot) {
-                    this.setInputValue(zeroDot);
-                }
-
-                emit(zero);
-                return;
-            }
-
-            let caretPosition = input.selectionStart;
-            const savedCommaCount = (input.value.match(commaRegex) || []).length;
-
-            // remove extraneous dots not handled in keydownHandler (ie. from pasted values)
-            if ((input.value?.match(dotRegex) ?? []).length > 1) {
-                const { value } = input;
-                const afterFirstDotIndex = value.indexOf(dot) + 1;
-                const int = value.slice(0, afterFirstDotIndex);
-                const fractional = value.slice(afterFirstDotIndex).replaceAll(dot, '');
-                this.setInputValue(int.concat(fractional));
-            }
-
-            // don't format or emit if the user is about to type a decimal
-            if (input.value[input.value.length - 1] === dot && caretPosition === input.value.length) {
-                return;
-            }
-
-            let workingValue = input.value.replace(notIntegerOrDotRegex, '') ?? '';
-            let workingValueAsWeiBn = parseUnits(workingValue, 'ether');
-
-            if (!!this.maxValue && workingValueAsWeiBn.gt(this.maxValue)) {
-                workingValue = formatEther(this.maxValue);
-                workingValueAsWeiBn = parseUnits(workingValue, 'ether');
-                caretPosition = workingValue.length;
-                this.triggerWiggle();
-            }
-
-            let commifiedWorkingValue = commify(workingValue);
-
-            if (commifiedWorkingValue.includes(dot)) {
-                // override commify's handling of trailing zeroes to allow user to continue typing past 1 zero
-                //    eg. 123.00003
-                const commifiedInteger = commifiedWorkingValue.replace(decimalRegex, '');
-                const fractional = (workingValue.match(decimalRegex)?.[0] ?? '').slice(0, WEI_PRECISION);
-
-                commifiedWorkingValue = `${commifiedInteger}${fractional}`;
-            }
-
-            this.setInputValue(commifiedWorkingValue);
-
-            const newCommaCount = (input.value.match(commaRegex) ?? []).length;
-            const deltaCommaCount = newCommaCount - savedCommaCount;
-
-            this.setInputCaretPosition(caretPosition + deltaCommaCount);
-            emit(workingValueAsWeiBn.toString());
-        },
-        setInputValue(val) {
-            this.$refs.input.value = val;
-        },
-        setInputCaretPosition(val) {
-            ['Start', 'End'].forEach((property) => {
-                this.$refs.input[`selection${property}`] = val;
-            });
-        },
-        triggerWiggle() {
-            this.$el.classList.add('c-staking-input--wiggle');
-        },
-        handleWiggleEnd() {
-            this.$el.classList.remove('c-staking-input--wiggle');
-        },
-    },
-};
-</script>
-
-<template>
-<div
-    class="c-staking-input container-fluid shadow-3"
-    @animationend="handleWiggleEnd"
->
-    <div class="row">
-        <div class="col-6">
-            <h6 class="c-staking-input__label">
-                {{ label }}
-            </h6>
-        </div>
-        <div class="col-6 u-flex--right">
-            <p v-if="errorText" class="text-negative">
-                {{ errorText }}
-            </p>
-
-            <div
-                v-else-if="infoText"
-                class="c-staking-input__info-container"
-                @click="handleInfoClick"
-            >
-                <q-tooltip
-                    :offset="[0, 88]"
-                    anchor="top middle"
-                    self="top middle"
-                >
-                    <span class="c-staking-input__tooltip-text">{{ tooltip }}</span>
-                </q-tooltip>
-
-                {{ infoText }}
-                <q-icon name="fas fa-info-circle q-pl-xs info-icon" />
-            </div>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col">
-            <input
-                v-show="!isLoading"
-                ref="input"
-                :disabled="isLoading"
-                type="text"
-                pattern="[0-9.]*"
-                inputmode="decimal"
-                placeholder="0"
-                class="c-staking-input__input"
-                @keydown="handleKeydown"
-                @input.stop="handleInput"
-            >
-            <div v-if="isLoading" class="c-staking-input__loading u-flex--left">
-                <i class="fa fa-spinner fa-spin"></i>
-            </div>
-        </div>
-    </div>
-</div>
-</template>
-
-<style lang="scss">
-.c-staking-input {
-    height: 104px;
-    padding: 16px;
-    border-radius: 6px;
-    background-color: rgba($secondary, 0.03);
-
-    animation-duration: 350ms;
-    animation-iteration-count: 1;
-    animation-timing-function: linear;
-
-    &--wiggle {
-        animation-name: wiggle;
-    }
-
-    &__label {
-        margin: 0;
-    }
-
-    &__info-container {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        width: min-content;
-        white-space: nowrap;
-    }
-
-    &__tooltip-text {
-        white-space: pre;
-    }
-
-    &__input,
-    &__loading {
-        height: 36px;
-    }
-
-    &__input {
-        width: 100%;
-        margin: auto;
-
-        color: $white;
-        background: none;
-        border: none;
-        outline: none;
-        font-size: 1.4rem;
-
-        @at-root .body--light & {
-            color: $info;
-        }
-    }
-
-    @keyframes wiggle {
-        0% {
-            transform: translateX(0);
-        }
-
-        25% {
-            transform: translateX(-4px);
-        }
-
-        50% {
-            transform: translateX(4px);
-        }
-
-        75% {
-            transform: translateX(-4px);
-        }
-
-        100% {
-            transform: translateX(0);
-        }
-    }
-}
-</style>
diff --git a/src/pages/staking/StakingStats.vue b/src/pages/staking/StakingStats.vue
deleted file mode 100644
index 9c74c3b2f..000000000
--- a/src/pages/staking/StakingStats.vue
+++ /dev/null
@@ -1,318 +0,0 @@
-<script>
-import { fetchStlosApy, formatUnstakePeriod } from 'pages/staking/staking-utils';
-import { formatWei, WEI_PRECISION } from 'src/lib/utils';
-import { mapGetters } from 'vuex';
-
-export default {
-    name: 'StakingStats',
-    props: {
-        stlosContractInstance: {
-            type: Object,
-            required: true,
-        },
-        stlosBalance: {
-            type: String,
-            default: null,
-        },
-        stlosValue: {
-            type: String,
-            default: null,
-        },
-        totalUnstakedTlosBalance: {
-            type: String,
-            default: null,
-        },
-        unstakePeriodSeconds: {
-            type: Number,
-            default: null,
-        },
-    },
-    data: () => ({
-        stlosTvl: null,
-        stlosApy: null,
-    }),
-    computed: {
-        ...mapGetters('login', ['isLoggedIn']),
-        globalStats() {
-            return [{
-                label: 'APY',
-                value: this.stlosApy ?? '--',
-                unit: '%',
-                tooltip: this.$t('pages.staking.tooltip_1'),
-            }, {
-                label: 'TVL',
-                value: this.formatWeiForStats(this.stlosTvl, true).replace(/\B(?=(\d{3})+(?!\d))/g, ' '),
-                unit: 'TLOS',
-                tooltip: this.$t('pages.staking.tooltip_2'),
-            }];
-        },
-        personalStats() {
-            return {
-                staked: {
-                    label: this.$t('pages.staking.staked'),
-                    value: {
-                        stlos: this.formatWeiForStats(this.stlosBalance),
-                        tlos: this.formatWeiForStats(this.stlosValue),
-                    },
-                    tooltip: this.$t('pages.staking.tooltip_3'),
-                },
-                unstaked: {
-                    label: this.$t('pages.staking.unstaked'),
-                    value: this.formatWeiForStats(this.totalUnstakedTlosBalance),
-                    tooltip: this.$t('pages.staking.tooltip_4', { unlockPeriod: this.unlockPeriodPretty }),
-                },
-            };
-        },
-        unlockPeriodPretty() {
-            return formatUnstakePeriod(this.unstakePeriodSeconds, this.$t);
-        },
-    },
-    async created() {
-        await this.fetchGlobalStats();
-    },
-    methods: {
-        async fetchGlobalStats() {
-            try {
-                this.stlosTvl = (await this.stlosContractInstance.totalAssets()).toString();
-            } catch ({ message: tvlError }) {
-                console.error(`Failed to fetch sTLOS TVL: ${tvlError}`);
-                this.$q.notify({
-                    type: 'negative',
-                    message: this.$t('page.staking.fetch_stlos_tvl_error', { message: tvlError }),
-                });
-                this.stlosTvl = null;
-                this.stlosApy = null;
-
-                return;
-            }
-
-            if (this.stlosTvl === null) {
-                return;
-            }
-
-            try {
-                this.stlosApy = await fetchStlosApy(this.$telosApi);
-            } catch ({ message: apyError }) {
-                console.error(`Failed to fetch sTLOS APY: ${apyError}`);
-                this.$q.notify({
-                    type: 'negative',
-                    message: this.$t('page.staking.fetch_stlos_apy_error', { message: apyError }),
-                });
-                this.stlosApy = null;
-            }
-        },
-        formatWeiForStats(wei) {
-            const format = val => formatWei(val, WEI_PRECISION, 3);
-
-            return wei === null ? '--' : format(wei);
-        },
-    },
-};
-</script>
-
-<template>
-<div class="c-staking-stats">
-    <div class="c-staking-stats__stats-container c-staking-stats__stats-container--global">
-        <div
-            v-for="{ label, value, unit, tooltip } in globalStats"
-            :key="label"
-            class="c-staking-stats__stat c-staking-stats__stat--global"
-        >
-            <div class="c-staking-stats__stat-label c-staking-stats__stat-label--global">
-                {{ label }}
-                <q-icon name="fas fa-info-circle" />
-            </div>
-
-            <div class="c-staking-stats__stat-value">
-                {{ value }}
-                <span class="c-staking-stats__stat-unit">{{ unit }}</span>
-            </div>
-
-            <q-tooltip
-                :offset="[0, 56]"
-                anchor="bottom middle"
-                self="center middle"
-            >
-                <span class="u-text--pre">{{ tooltip }}</span>
-            </q-tooltip>
-        </div>
-    </div>
-
-    <q-card class="c-staking-stats__stats-container c-staking-stats__stats-container--personal">
-        <div class="c-staking-stats__stat">
-            <div class="c-staking-stats__stat-label">
-                {{ personalStats.staked.label }}
-                <q-icon name="fas fa-info-circle" />
-            </div>
-
-            <span class="c-staking-stats__stat-value">
-                {{ personalStats.staked.value.stlos }}
-                <span v-if="isLoggedIn" class="c-staking-stats__stat-unit c-staking-stats__stat-unit--personal">
-                    sTLOS
-                </span>
-                &#32; <!-- breaking space - avoid whitespace collapsing when this long stat wraps-->
-            </span>
-            <span v-if="isLoggedIn" class="c-staking-stats__stat-value">
-                <wbr>
-                &#8776; <!-- ≈ -->
-                {{ personalStats.staked.value.tlos }}
-                <span class="c-staking-stats__stat-unit c-staking-stats__stat-unit--personal">TLOS</span>
-            </span>
-
-            <q-tooltip
-                :offset="[0, 56]"
-                anchor="bottom middle"
-                self="center middle"
-            >
-                <span class="u-text--pre">{{ personalStats.staked.tooltip }}</span>
-            </q-tooltip>
-        </div>
-        <div class="c-staking-stats__stat">
-            <div class="c-staking-stats__stat-label">
-                {{ personalStats.unstaked.label }}
-                <q-icon name="fas fa-info-circle" />
-            </div>
-
-            <span class="c-staking-stats__stat-value">
-                {{ personalStats.unstaked.value }}
-                <span v-if="isLoggedIn" class="c-staking-stats__stat-unit c-staking-stats__stat-unit--personal">
-                    TLOS
-                </span>
-            </span>
-
-            <q-tooltip
-                :offset="[0, 56]"
-                anchor="bottom middle"
-                self="center middle"
-            >
-                <span class="u-text--pre">{{ personalStats.unstaked.tooltip }}</span>
-            </q-tooltip>
-        </div>
-    </q-card>
-</div>
-</template>
-
-<style lang="scss">
-.c-staking-stats {
-    display: flex;
-    flex-wrap: wrap;
-
-    @media screen and (min-width: $breakpoint-md-min) {
-        justify-content: flex-end;
-    }
-
-    @media screen and (min-width: $breakpoint-lg-min) {
-        flex-wrap: nowrap;
-        gap: 16px;
-    }
-
-    &__stats-container {
-        height: min-content;
-
-        &--global {
-            flex-basis: 100%;
-
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            gap: 32px;
-            margin-bottom: 32px;
-
-            @media screen and (min-width: $breakpoint-md-min) {
-                justify-content: flex-end;
-                margin: 0;
-                padding: 0 0 12px;
-            }
-
-            @media screen and (min-width: $breakpoint-lg-min) {
-                flex-basis: auto;
-                padding: 12px;
-            }
-        }
-
-        &--personal {
-            display: flex;
-            align-items: baseline;
-            justify-content: space-evenly;
-            gap: 24px;
-            padding: 12px;
-            margin-bottom: 24px;
-
-            @media screen and (min-width: $breakpoint-sm-min) {
-                max-width: max-content;
-                margin: 0 auto 24px;
-            }
-
-            @media screen and (min-width: $breakpoint-md-min) {
-                margin: 0 0 24px;
-            }
-
-            @media screen and (min-width: $breakpoint-lg-min) {
-                margin: 0;
-            }
-        }
-    }
-
-    &__stat {
-        width: fit-content;
-        @media screen and (min-width: $breakpoint-md-min) {
-            width: max-content;
-        }
-
-        &--global {
-            position: relative;
-
-            &:not(:last-of-type)::after {
-                position: absolute;
-                top: 0;
-                right: -17px;
-                bottom: 0;
-                margin: auto;
-
-                height: 80%;
-                width: 1px;
-
-                content: '';
-                border-radius: 4px;
-                background-color: #8591FD;
-            }
-        }
-    }
-
-    &__stat-label {
-        font-size: 14px;
-        white-space: nowrap;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
-        &--global {
-            color: $white;
-        }
-
-        &--personal {
-            color: $dark;
-        }
-    }
-
-    &__stat-unit {
-        display: inline-block;
-        font-size: 10px;
-        color: $secondary;
-        transform: translateX(-2px);
-        vertical-align: super;
-
-        &--personal {
-            @at-root .body--light & {
-                color: darken($secondary, 10%);
-            }
-        }
-    }
-
-    &__stat-value {
-        font-size: 18px;
-        color: $accent;
-        white-space: nowrap;
-    }
-}
-</style>
diff --git a/src/pages/staking/UnstakeForm.vue b/src/pages/staking/UnstakeForm.vue
deleted file mode 100644
index 0ccca3d84..000000000
--- a/src/pages/staking/UnstakeForm.vue
+++ /dev/null
@@ -1,400 +0,0 @@
-<!-- eslint-disable max-len -->
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable no-unused-vars -->
-<script lang="ts">
-import { defineComponent } from 'vue';
-import {
-    DISPLAY_DECIMALS,
-    getClientIsApple,
-} from 'src/lib/utils';
-import { mapGetters } from 'vuex';
-import { BigNumber, ethers } from 'ethers';
-import { debounce, DebouncedFunc } from 'lodash';
-
-import { formatUnstakePeriod } from 'pages/staking/staking-utils';
-
-import BaseStakingForm from 'pages/staking/BaseStakingForm.vue';
-import TransactionField from 'components/TransactionField.vue';
-
-import LoginModal from 'components/LoginModal.vue';
-import { EvmABI, stlosAbiWithdraw } from 'src/antelope/types';
-import { useAccountStore } from 'src/antelope';
-import { CURRENT_CONTEXT } from 'src/antelope/mocks';
-import { WEI_PRECISION, formatWei } from 'src/antelope/wallets/utils';
-
-export default defineComponent({
-    name: 'UnstakeForm',
-    components: {
-        BaseStakingForm,
-        LoginModal,
-        TransactionField,
-    },
-    props: {
-        stlosContractInstance: {
-            type: Object,
-            required: true,
-        },
-        escrowContractInstance: {
-            type: Object,
-            required: true,
-        },
-        stlosBalance: {
-            type: String,
-            default: null,
-        },
-        unlockedTlosBalance: {
-            type: String,
-            default: null,
-        },
-        unstakePeriodSeconds: {
-            type: Number,
-            default: null,
-        },
-        deposits: {
-            type: Array,
-            default: () => [],
-        },
-        valueOfOneStlosInTlos: {
-            type: String,
-            default: null,
-        },
-    },
-    emits: ['balance-changed'],
-    data: () => ({
-        displayConfirmModal: false,
-        displayLoginModal: false,
-        resultHash: null as null | string,
-        header: '',
-        subheader: '',
-        topInputLabel: '',
-        topInputAmount: '0',
-        topInputIsLoading: false,
-        bottomInputMaxValue: '',
-        bottomInputIsLoading: false,
-        bottomInputLabel: '',
-        bottomInputAmount: '0',
-        ctaIsLoading: false,
-        debouncedTopInputHandler: (() => void 0) as DebouncedFunc<() => void>,
-        debouncedBottomInputHandler: (() => void 0) as DebouncedFunc<() => void>,
-        columns: [{
-            name: 'amount',
-            label: '',
-            align: 'left',
-            field: 'amount',
-            format: (val: ethers.BigNumber) => ethers.utils.formatEther(val.toString()),
-        }, {
-            name: 'time',
-            label: '',
-            align: 'left',
-            field: 'until',
-            format: (val: ethers.BigNumber) => val.toString(),
-        }],
-        loading: false,
-        maxDeposits: 0,
-    }),
-    computed: {
-        ...mapGetters('login', ['address', 'isLoggedIn', 'isNative']),
-        unstakePeriodPretty() {
-            return formatUnstakePeriod(this.unstakePeriodSeconds, this.$t);
-        },
-        topInputMaxValue() {
-            return this.isLoggedIn ? this.stakedBalance : '';
-        },
-        topInputTooltip() {
-            const prettyBalance = ethers.utils.formatEther(this.stakedBalance).toString();
-            return this.$t('pages.staking.full_staked_balance_tooltip', { prettyBalance });
-        },
-        stakedBalance() {
-            return BigNumber.from(this.stlosBalance ?? '0').toString();
-        },
-        topInputInfoText() {
-            if (!this.isLoggedIn) {
-                return '';
-            }
-
-            let balanceEth = ethers.utils.formatEther(this.stakedBalance);
-
-            if (balanceEth.indexOf('.') >= 0) {
-                const [integer, fraction] = balanceEth.split('.');
-
-                balanceEth = integer.concat(`.${fraction.slice(0, 3)}`);
-            }
-
-            const balanceTlos = ethers.utils.commify(balanceEth);
-
-            return this.$t('pages.staking.available', { balanceTlos });
-        },
-        topInputErrorText() {
-            if(this.isLoggedIn && !this.isNative) {
-                return '';
-            }
-            return this.isNative ?
-                this.$t('pages.staking.login_using_evm_wallet') :
-                this.$t('pages.staking.wallet_not_connected');
-        },
-        canDeposit() {
-            return this.deposits.length < this.maxDeposits;
-        },
-        ctaIsDisabled() {
-            const inputsInvalid = (
-                this.isLoggedIn &&
-                [this.topInputAmount, this.bottomInputAmount]
-                    .some(amount => ['0', '', null, undefined].includes(amount))
-            );
-
-            return inputsInvalid ||
-                this.topInputIsLoading ||
-                this.bottomInputIsLoading ||
-                this.ctaIsLoading;
-        },
-        ctaText() {
-            if (this.ctaIsLoading) {
-                return this.$t('pages.staking.loading');
-            } // 'Loading...'
-            return this.isLoggedIn ? this.$t('pages.staking.unstake_stlos') : this.$t('pages.staking.connect_wallet');
-        },
-        remainingDeposits() {
-            return (this.maxDeposits ?? 0) - this.deposits.length;
-        },
-        abi(): EvmABI {
-            return stlosAbiWithdraw;
-        },
-    },
-    async created() {
-        // initialization of the translated texts
-        this.header = this.$t('pages.staking.unstake_stlos');
-        this.subheader = this.$t('pages.staking.unstake_stlos_for_tlos');
-        this.topInputLabel = this.$t('pages.staking.unstake_stlos');
-        this.bottomInputLabel = this.$t('pages.staking.receive_tlos');
-        this.columns[0].label = this.$t('pages.staking.amount');
-        this.columns[1].label = this.$t('pages.staking.time_remaining');
-
-        try {
-            this.maxDeposits = (await this.escrowContractInstance.maxDeposits()).toNumber();
-        } catch (error) {
-            console.error(`Failed to fetch max deposits from escrow contract: ${error}`);
-            this.$q.notify({
-                position: 'top',
-                message: this.$t('pages.staking.fetch_max_deposits_error', { message: error }),
-            });
-
-            this.maxDeposits = 0;
-        }
-
-        const debounceWaitMs = 250;
-
-        this.debouncedTopInputHandler = debounce(
-            () => {
-                this.stlosContractInstance.previewRedeem(this.topInputAmount)
-                    .then((amountBigNum: ethers.BigNumber) => {
-                        this.bottomInputAmount = amountBigNum.toString();
-                    })
-                    .catch((err: any) => {
-                        this.bottomInputAmount = '';
-                        console.error(`Unable to convert TLOS to STLOS: ${err}`);
-                        this.$q.notify({
-                            position: 'top',
-                            message: this.$t('pages.staking.convert_tlos_to_stlos_error', { message: err }),
-                        });
-                    })
-                    .finally(async () => {
-                        this.bottomInputIsLoading = false;
-
-                        if (getClientIsApple()) {
-                            // workaround; Apple devices will focus the last input which had its value
-                            // programmatically changed. Focus should not change. Downside is that cursor position
-                            // is lost, but generally cursor should be at the end anyway
-                            const old = this.topInputAmount;
-                            this.topInputAmount = '0';
-                            await this.$nextTick();
-
-                            this.topInputAmount = old;
-                        }
-                    });
-            },
-            debounceWaitMs,
-        );
-
-        this.debouncedBottomInputHandler = debounce(
-            () => {
-                this.stlosContractInstance.previewDeposit(this.bottomInputAmount)
-                    .then((amountBigNum: { toString: () => string; }) => {
-                        this.topInputAmount = amountBigNum.toString();
-                    })
-                    .catch((err: any) => {
-                        this.topInputAmount = '';
-                        console.error(`Unable to convert STLOS to TLOS: ${err}`);
-                        this.$q.notify({
-                            position: 'top',
-                            message: this.$t('pages.staking.convert_stlos_to_tlos_error', { message: err }),
-                        });
-                    })
-                    .finally(async () => {
-                        this.topInputIsLoading = false;
-
-                        if (getClientIsApple()) {
-                            // workaround; Apple devices will focus the last input which had its value
-                            // programmatically changed. Focus should not change. Downside is that cursor position
-                            // is lost, but generally cursor should be at the end anyway
-                            const old = this.bottomInputAmount;
-                            this.bottomInputAmount = '0';
-                            await this.$nextTick();
-
-                            this.bottomInputAmount = old;
-                        }
-                    });
-            },
-            debounceWaitMs,
-        );
-    },
-    methods: {
-        notifyMaxDeposits(){
-            this.$q.notify({
-                position: 'top',
-                message: this.$t('pages.staking.max_unstake_transactions_reached'),
-                timeout: 6000,
-            });
-        },
-        handleInputTop(newWei = '0') {
-            if (newWei === this.topInputAmount) {
-                return;
-            }
-
-            this.bottomInputIsLoading = true;
-            this.topInputAmount = newWei;
-
-            this.debouncedTopInputHandler();
-        },
-        handleInputBottom(newWei = '0') {
-            if (newWei === this.bottomInputAmount) {
-                return;
-            }
-
-            this.topInputIsLoading = true;
-            this.bottomInputAmount = newWei;
-
-            this.debouncedBottomInputHandler();
-        },
-        handleCtaClick() {
-            if (!this.isLoggedIn){
-                this.displayLoginModal = true;
-                return;
-            }
-
-            this.displayConfirmModal = true;
-        },
-        initiateUnstake() {
-            if (!this.canDeposit){
-                this.notifyMaxDeposits();
-                return;
-            }
-            this.ctaIsLoading = true;
-            const value = BigNumber.from(this.bottomInputAmount);
-
-            try {
-                this.continueUnstake(value).then((result) => {
-                    this.resultHash = result.hash;
-                    this.$emit('balance-changed');
-                }).catch(({ message }: Error) => {
-                    console.error(`Failed to unstake sTLOS: ${message}`);
-                    this.resultHash = null;
-                }).finally(() => {
-                    this.ctaIsLoading = false;
-                });
-
-            } catch (e) {
-                console.error('Failed to unstake sTLOS', e);
-                this.ctaIsLoading = false;
-            }
-        },
-        continueUnstake(value: BigNumber) {
-            const logged = useAccountStore().getAccount(CURRENT_CONTEXT);
-            const symbol = 'TLOS';
-            const quantity = `${formatWei(value, WEI_PRECISION, DISPLAY_DECIMALS)}`;
-            const message = this.$t('notification.neutral_message_unstaking', { quantity, symbol });
-            const error = this.$t('notification.error_message_unstaking', { quantity, symbol });
-
-            return useAccountStore().signCustomTransaction(
-                CURRENT_CONTEXT,
-                message,
-                error,
-                this.stlosContractInstance.address,
-                this.abi,
-                [value.toString(), logged.account, logged.account],
-            );
-        },
-    },
-});
-</script>
-
-<template>
-<div class="row">
-    <div class="col-12 q-mb-lg">
-        <BaseStakingForm
-            :header="header"
-            :subheader="subheader"
-            :top-input-label="topInputLabel"
-            :top-input-info-text="topInputInfoText"
-            :top-input-amount="topInputAmount"
-            :top-input-max-value="topInputMaxValue"
-            :top-input-error-text="topInputErrorText"
-            :top-input-is-loading="topInputIsLoading"
-            :top-input-tooltip="topInputTooltip"
-            :bottom-input-label="bottomInputLabel"
-            :bottom-input-amount="bottomInputAmount"
-            :bottom-input-max-value="bottomInputMaxValue"
-            :bottom-input-is-loading="bottomInputIsLoading"
-            :cta-text="ctaText"
-            :cta-disabled="ctaIsDisabled"
-            :cta-loading="ctaIsLoading"
-            :unstake-period-seconds="unstakePeriodSeconds"
-            :value-of-one-stlos-in-tlos="valueOfOneStlosInTlos"
-            @input-top="handleInputTop"
-            @input-bottom="handleInputBottom"
-            @cta-clicked="handleCtaClick"
-        />
-    </div>
-    <div v-if="resultHash" class="col-sm-12 col-md-6 offset-md-3">
-        {{ $t('pages.staking.unstake_stlos_success') }}
-        <TransactionField :transaction-hash="resultHash" />
-    </div>
-    <q-dialog v-model="displayConfirmModal">
-        <q-card>
-            <q-card-section>
-                <p>
-                    {{ $t('pages.staking.confirm_unstake_1a') }}
-                    <span class="text-primary">{{ unstakePeriodPretty }}</span>,
-                    {{ $t('pages.staking.confirm_unstake_1b') }}
-
-                </p>
-                <p v-if="remainingDeposits < 10">
-                    {{ $t('pages.staking.confirm_unstake_2a') }}
-                    <span class="text-primary">{{ remainingDeposits }}</span>
-                    {{ $t('pages.staking.confirm_unstake_2b') }}
-
-                </p>
-                {{ $t('pages.staking.stake_tlos_confirm_3') }}
-            </q-card-section>
-
-            <q-card-actions align="right" class="q-pb-md q-px-md">
-                <q-btn
-                    v-close-popup
-                    flat
-                    :label="$t('pages.staking.cancel')"
-                    color="negative"
-                />
-                <q-btn
-                    v-close-popup
-                    :label="$t('pages.staking.unstake_stlos')"
-                    color="secondary"
-                    text-color="black"
-                    @click="initiateUnstake"
-                />
-            </q-card-actions>
-        </q-card>
-    </q-dialog>
-</div>
-<LoginModal :show="displayLoginModal" @hide="displayLoginModal = false" />
-</template>
-
-<style lang="sass"></style>
diff --git a/src/pages/staking/WithdrawPage.vue b/src/pages/staking/WithdrawPage.vue
deleted file mode 100644
index a92a68b20..000000000
--- a/src/pages/staking/WithdrawPage.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<!-- eslint-disable max-len -->
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<!-- eslint-disable no-unused-vars -->
-<script lang="ts">
-import { defineComponent } from 'vue';
-import DateField from 'components/DateField.vue';
-import TransactionField from 'components/TransactionField.vue';
-import { BigNumber } from 'ethers';
-
-import {
-    DISPLAY_DECIMALS,
-    formatWei,
-    WEI_PRECISION,
-} from 'src/lib/utils';
-import { mapGetters } from 'vuex';
-import { CURRENT_CONTEXT, useAccountStore } from 'src/antelope/mocks';
-import { escrowAbiWithdraw, EvmABI } from 'src/antelope/types';
-
-export default defineComponent({
-    name: 'WithdrawPage',
-    components: {
-        DateField,
-        TransactionField,
-    },
-    props: {
-        escrowContractInstance: {
-            type: Object,
-            required: true,
-        },
-        unlockedTlosBalance: {
-            type: String,
-            default: null,
-        },
-        totalUnstaked: {
-            type: String,
-            default: null,
-        },
-        deposits: {
-            type: Array,
-            required: true,
-        },
-    },
-    emits: ['balance-changed'],
-    data: () => ({
-        ctaIsLoading: false,
-        resultHash: null as null | string,
-        columns: [
-            {
-                name: 'amount',
-                label: '',
-                field: 'amount',
-                sortable: true,
-            },
-            {
-                name: 'time',
-                label: '',
-                field: 'until',
-                sortable: true,
-            },
-        ],
-        showAge: true,
-    }),
-    created() {
-        this.columns[0].label = this.$t('pages.staking.amount');
-        this.columns[1].label = this.$t('pages.staking.available_to_withdraw');
-    },
-    computed: {
-        ...mapGetters('login', ['isLoggedIn', 'isNative']),
-        withdrawDisabled(){
-            return this.unlockedTlosBalance === '0' || this.isLoading || !this.isLoggedIn || this.isNative;
-        },
-        isLoading(){
-            return this.isLoggedIn && !this.isNative && this.unlockedTlosBalance === null;
-        },
-        unstakingBalance(){
-            const total = BigNumber.from(this.totalUnstaked ?? '0').sub(this.unlockedTlosBalance ?? '0');
-            return this.formatAmount(total);
-        },
-        unlockedBalance(){
-            return this.formatAmount(this.unlockedTlosBalance);
-        },
-        abi(): EvmABI {
-            return escrowAbiWithdraw;
-        },
-    },
-    methods: {
-
-        withdrawUnlocked() {
-            this.ctaIsLoading = true;
-            try {
-                this.continueWithdraw().then((result: { hash: null | string; }) => {
-                    this.resultHash = result.hash;
-                    this.$emit('balance-changed');
-                }).catch(({ message }: Error) => {
-                    console.error(`Failed to withdraw unlocked TLOS: ${message}`);
-                    this.resultHash = null;
-                }).finally(() => {
-                    this.ctaIsLoading = false;
-                });
-
-            } catch (e) {
-                console.error('Failed to unstake sTLOS', e);
-                this.ctaIsLoading = false;
-            }
-        },
-        continueWithdraw() {
-            const symbol = 'TLOS';
-            const quantity = `${formatWei(this.unlockedTlosBalance, WEI_PRECISION, DISPLAY_DECIMALS)}`;
-            const message = this.$t('notification.neutral_message_withdrawing', { quantity, symbol });
-            const error = this.$t('notification.error_message_withdrawing', { quantity, symbol });
-
-            return useAccountStore().signCustomTransaction(
-                CURRENT_CONTEXT,
-                message,
-                error,
-                this.escrowContractInstance.address,
-                this.abi,
-                [],
-            );
-        },
-        formatAmount(val: string | BigNumber | null) {
-            if (val === null) {
-                return '0.0';
-            }
-
-            return formatWei(val, WEI_PRECISION, 2);
-        },
-    },
-});
-</script>
-
-<template>
-<div>
-    <div class="deposits-container">
-        <div>
-            <q-table
-                class="deposits-table"
-                :rows="deposits"
-                :columns="columns"
-                :loading="isLoading"
-                :hide-pagination="true"
-                :pagination="{
-                    rowsPerPage: deposits.length,
-                    rowsNumber: deposits.length
-                }"
-                :no-data-label="$t('pages.staking.no_withdrawable_positions')"
-                flat
-            >
-                <template v-slot:header="props">
-                    <q-tr :props="props" :no-hover="false">
-                        <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            :auto-width="true"
-                        >
-                            <template v-if="col.name==='time'">
-                                {{ col.label }}
-                                <q-icon
-                                    name="fas fa-info-circle"
-                                    class="info-icon"
-                                    @click="showAge=!showAge"
-                                >
-                                    <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
-                                        {{ $t('pages.staking.click_to_change_time_format') }}
-                                    </q-tooltip>
-                                </q-icon>
-                            </template>
-                            <template v-else>
-                                {{ col.label }}
-                            </template>
-                        </q-th>
-                    </q-tr>
-                </template>
-                <template v-slot:body="props">
-                    <q-tr :props="props">
-                        <q-td key="amount" align="left" class="left-column">
-                            {{ formatAmount(props.row.amount) }}
-                        </q-td>
-                        <q-td key="until" align="right">
-                            <DateField :epoch="(props.row.until).toNumber()" />
-                        </q-td>
-                    </q-tr>
-                </template>
-            </q-table>
-        </div>
-        <div v-show="isLoggedIn" class="escrow-stat-container">
-            <div class="escrow-stat">
-                {{ $t('pages.staking.unstaking') }}: {{ unstakingBalance }}
-            </div>
-            <div class="escrow-stat">
-                {{ $t('pages.staking.available_to_withdraw') }}: {{ unlockedBalance }}
-            </div>
-        </div>
-        <div class="col-xs-12 u-flex--center withdraw-button-container">
-            <q-btn
-                :disabled="withdrawDisabled"
-                :loading="ctaIsLoading"
-                color="secondary"
-                text-color="black"
-                @click="withdrawUnlocked"
-            >
-                {{ $t('pages.staking.withdraw_tlos') }}
-            </q-btn>
-        </div>
-    </div>
-    <div v-if="resultHash" class="transaction-notification col-sm-12 col-md-6 offset-md-3">
-        {{ $t('pages.staking.withdraw_successful') }}:
-        <TransactionField :transaction-hash="resultHash" />
-    </div>
-</div>
-</template>
-
-<style lang="sass" scoped>
-.deposits-container
-    margin: auto
-
-.withdraw-button-container
-    margin-top: 1rem
-
-.transaction-notification
-    width: fit-content
-    margin-top: 1rem
-    margin-left: auto
-    margin-right: auto
-
-.deposits-table
-    max-height: 50rem
-    max-width: 20rem
-    margin: auto
-
-    .q-table__top,
-    .q-table__bottom,
-    thead tr:first-child th
-        position: sticky
-        top: 0
-        z-index: 1
-
-    thead tr th:first-child
-        text-align: left
-
-    td.left-column
-        padding-left: 1rem
-
-    &.q-table--dark
-        .q-table__top,
-        .q-table__bottom,
-        thead tr:first-child th
-            background-color: #404040
-
-.escrow-stat-container
-    width: fit-content
-    height: 1rem
-    margin: auto
-.escrow-stat
-    float: left
-    margin: .25rem
-
-</style>
diff --git a/src/pages/staking/staking-utils.js b/src/pages/staking/staking-utils.js
deleted file mode 100644
index 13d2b9782..000000000
--- a/src/pages/staking/staking-utils.js
+++ /dev/null
@@ -1,42 +0,0 @@
-const DAY_SECONDS = 86400;
-const HOUR_SECONDS = 3600;
-
-/**
- * Translates a number of seconds to a plain-english string, eg. 90 => "1.5 minutes"
- *
- * @param {number|null} seconds
- * @returns {string} plain english time period
- */
-export function formatUnstakePeriod(seconds, $t) {
-    if (seconds === null) {
-        return '--';
-    }
-
-    let quantity;
-    let unit;
-
-    if (seconds < HOUR_SECONDS) {
-        quantity = seconds / 60;
-        unit = $t('pages.staking.minutes');
-    } else if (seconds < DAY_SECONDS) {
-        quantity = seconds / HOUR_SECONDS;
-        unit = $t('pages.staking.hours');
-    } else {
-        quantity = seconds / DAY_SECONDS;
-        unit = $t('pages.staking.days');
-    }
-
-    if (!Number.isInteger(quantity)) {
-        quantity = quantity.toFixed(1);
-    }
-
-    return `${quantity} ${unit}`;
-}
-
-export async function fetchStlosApy($telosApi) {
-    try{
-        return (await $telosApi.get('apy/evm')).data;
-    }catch(e) {
-        console.error(e);
-    }
-}
diff --git a/src/router/routes.js b/src/router/routes.js
index f0e9385bd..1a930acb8 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -2,13 +2,20 @@ const routes = [
     {
         path: '',
         component: () => import('layouts/MainLayout.vue'),
-        children: [
-            {
-                path: '',
-                name: 'home',
-                component: () => import('pages/Index.vue'),
-            },
-        ],
+        children: [{
+            path: '',
+            name: 'home',
+            component: () => import('pages/home/HomePage.vue'),
+        }],
+    },
+    {
+        path: '/address/:address/sourcify',
+        component: () => import('layouts/MainLayout.vue'),
+        children: [{
+            path: '',
+            name: 'sourcify',
+            component: () => import('pages/ContractVerification.vue'),
+        }],
     },
     {
         path: '/address/:address',
@@ -18,7 +25,7 @@ const routes = [
                 path: '',
                 name: 'address',
                 props: route => ({ page: route.query.page, pagesize: route.query.pagesize }),
-                component: () => import('pages/AccountAddress.vue'),
+                component: () => import('pages/AccountPage.vue'),
             },
         ],
     },
@@ -28,7 +35,16 @@ const routes = [
         children: [{
             path: '',
             name: 'transaction',
-            component: () => import('pages/Transaction.vue'),
+            component: () => import('pages/TransactionPage.vue'),
+        }],
+    },
+    {
+        path: '/txs',
+        component: () => import('layouts/MainLayout.vue'),
+        children: [{
+            path: '',
+            name: 'transactions',
+            component: () => import('pages/TransactionsPage.vue'),
         }],
     },
     {
@@ -37,27 +53,27 @@ const routes = [
         children: [{
             path: '',
             name: 'block',
-            component: () => import('pages/Block.vue'),
+            component: () => import('pages/BlockPage.vue'),
         }],
     },
     {
-        path: '/transactions',
+        path: '/blocks',
         component: () => import('layouts/MainLayout.vue'),
         children: [
             {
                 path: '',
-                name: 'transactions',
-                component: () => import('pages/Transactions.vue'),
+                name: 'blocks',
+                component: () => import('pages/BlockListPage.vue'),
             },
         ],
     },
     {
-        path: '/staking',
+        path: '/holders',
         component: () => import('layouts/MainLayout.vue'),
         children: [{
             path: '',
-            name: 'staking',
-            component: () => import('pages/staking/Staking.vue'),
+            name: 'holders',
+            component: () => import('pages/Holders.vue'),
         }],
     },
     {
@@ -72,18 +88,33 @@ const routes = [
     },
     {
         path: '/health',
-        name: 'health',
         component: () => import('layouts/MainLayout.vue'),
-        children: [{ path: '', component: () => import('pages/HealthPage.vue') }],
+        children: [{
+            path: '',
+            name: 'health',
+            component: () => import('pages/HealthPage.vue'),
+        }],
+    },
+    {
+        path: '/export',
+        component: () => import('layouts/MainLayout.vue'),
+        children: [{
+            path: '',
+            name: 'export',
+            component: () => import('pages/ErrorNotFoundPage.vue'),
+        }],
     },
     {
         path: '/endpoints',
-        // eslint-disable-next-line no-unused-vars
         redirect: () => ({ path: '/health' }),
     },
     {
         path: '/:catchAll(.*)*',
-        component: () => import('pages/Error404.vue'),
+        component: () => import('layouts/MainLayout.vue'),
+        children: [{
+            path: '',
+            component: () => import('pages/ErrorNotFoundPage.vue'),
+        }],
     },
 ];
 
diff --git a/src/store/evm/actions.js b/src/store/chain/actions.js
similarity index 72%
rename from src/store/evm/actions.js
rename to src/store/chain/actions.js
index b1a856523..ef57a4fe1 100644
--- a/src/store/evm/actions.js
+++ b/src/store/chain/actions.js
@@ -14,25 +14,13 @@ export async function doRPC(_, { method, params }) {
     return result.data;
 }
 
-// TODO: make sure we're not using this and remove...
-//  should be using the $contractManager that's on prototype (this.$contractManager)
-export async function getContract(_, { address }) {
-    return await this.$contractManager.getContract(address);
-}
-
 export const fetchTlosPrice = async function({ commit }) {
     try {
-        const response = await this.$api.getTableRows({
-            code: 'delphioracle',
-            limit: '1000',
-            scope: 'tlosusd',
-            table: 'datapoints',
-        });
-
-        const tlosPrice = response.rows[0].median / 10000;
+        const response = await this.$indexerApi.get('/tokens/marketdata?tokens=TLOS&vs=usd');
+        const tlosPrice = parseFloat(response.data?.results[0].price).toFixed(4);
         commit('setTlosPrice', tlosPrice);
     } catch (error) {
-        console.error('fetchTlosPrice');
+        console.error('fetchTlosPrice: ', error.message);
         commit('general/setErrorMsg', error.message || error, { root: true });
     }
 };
diff --git a/src/store/evm/getters.js b/src/store/chain/getters.js
similarity index 100%
rename from src/store/evm/getters.js
rename to src/store/chain/getters.js
diff --git a/src/store/evm/index.js b/src/store/chain/index.js
similarity index 60%
rename from src/store/evm/index.js
rename to src/store/chain/index.js
index 00ff82a29..7b32f04b7 100644
--- a/src/store/evm/index.js
+++ b/src/store/chain/index.js
@@ -1,7 +1,7 @@
-import state from 'src/store/evm/state';
-import * as getters from 'src/store/evm/getters';
-import * as mutations from 'src/store/evm/mutations';
-import * as actions from 'src/store/evm/actions';
+import state from 'src/store/chain/state';
+import * as getters from 'src/store/chain/getters';
+import * as mutations from 'src/store/chain/mutations';
+import * as actions from 'src/store/chain/actions';
 
 // TODO: maybe this better...
 //   preloading the file so we don't have multiple components asking for contract and all triggering the token-list
diff --git a/src/store/evm/mutations.js b/src/store/chain/mutations.js
similarity index 100%
rename from src/store/evm/mutations.js
rename to src/store/chain/mutations.js
diff --git a/src/store/evm/state.js b/src/store/chain/state.js
similarity index 100%
rename from src/store/evm/state.js
rename to src/store/chain/state.js
diff --git a/src/store/contract/actions.js b/src/store/contract/actions.js
new file mode 100644
index 000000000..6c9fa33a8
--- /dev/null
+++ b/src/store/contract/actions.js
@@ -0,0 +1,3 @@
+export async function doAPI({ method, params }) {
+    return { method, params };
+}
diff --git a/src/store/contract/getters.js b/src/store/contract/getters.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/store/contract/index.js b/src/store/contract/index.js
new file mode 100644
index 000000000..b5b2002d0
--- /dev/null
+++ b/src/store/contract/index.js
@@ -0,0 +1,12 @@
+import state from 'src/store/contract/state';
+import * as getters from 'src/store/contract/getters';
+import * as mutations from 'src/store/contract/mutations';
+import * as actions from 'src/store/contract/actions';
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    mutations,
+    actions,
+};
diff --git a/src/store/contract/mutations.js b/src/store/contract/mutations.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/store/contract/state.js b/src/store/contract/state.js
new file mode 100644
index 000000000..f8c0179a9
--- /dev/null
+++ b/src/store/contract/state.js
@@ -0,0 +1,5 @@
+export default function() {
+    return {
+        contracts: [],
+    };
+}
diff --git a/src/store/index.js b/src/store/index.js
index 429cafc04..37a2698da 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,7 +2,8 @@ import { createStore } from 'vuex';
 
 import login from 'src/store/login';
 import general from 'src/store/general';
-import evm from 'src/store/evm';
+import chain from 'src/store/chain';
+import transaction from 'src/store/transaction';
 import { store } from 'quasar/wrappers';
 
 /*
@@ -15,7 +16,8 @@ export default store(function (/* { ssrContext } */) {
         modules: {
             general,
             login,
-            evm,
+            chain,
+            transaction,
         },
 
         // enable strict mode (adds overhead!)
diff --git a/src/store/login/actions.js b/src/store/login/actions.js
index 2aad64be3..15d86bffa 100644
--- a/src/store/login/actions.js
+++ b/src/store/login/actions.js
@@ -32,7 +32,7 @@ export const login = async function(
       e.message ||
       e.reason;
         commit('general/setErrorMsg', error, { root: true });
-        console.log('Login error: ', error);
+        console.error('Login error: ', error);
     } finally {
         commit('setLoadingWallet');
     }
@@ -68,7 +68,7 @@ export const logout = async function({ getters }) {
         try {
             authenticator && (await authenticator.logout());
         } catch (error) {
-            console.log('Authenticator logout error', error);
+            console.error('Authenticator logout error', error);
         }
 
         localStorage.removeItem('autoLogin');
diff --git a/src/store/transaction/actions.js b/src/store/transaction/actions.js
new file mode 100644
index 000000000..6d415e6a5
--- /dev/null
+++ b/src/store/transaction/actions.js
@@ -0,0 +1,25 @@
+
+export async function doAPI({ method, params }) {
+    return { method, params };
+}
+
+export async function fetchTransferTransactions({ commit }) {
+    try {
+        let transactions = [];
+        commit('setTransactions', transactions);
+    } catch (error) {
+        console.error('fetchTransactions');
+        commit('general/setErrorMsg', error.message || error, { root: true });
+    }
+
+}
+
+export async function fetchTransactions({ commit }) {
+    try {
+        let transactions = [];
+        commit('setTransactions', transactions);
+    } catch (error) {
+        console.error('fetchTransactions');
+        commit('general/setErrorMsg', error.message || error, { root: true });
+    }
+}
diff --git a/src/store/transaction/getters.js b/src/store/transaction/getters.js
new file mode 100644
index 000000000..520fc1e6a
--- /dev/null
+++ b/src/store/transaction/getters.js
@@ -0,0 +1 @@
+export const setTransactions = ({ transactions }) => transactions;
diff --git a/src/store/transaction/index.js b/src/store/transaction/index.js
new file mode 100644
index 000000000..66ac78740
--- /dev/null
+++ b/src/store/transaction/index.js
@@ -0,0 +1,12 @@
+import state from 'src/store/transaction/state';
+import * as getters from 'src/store/transaction/getters';
+import * as mutations from 'src/store/transaction/mutations';
+import * as actions from 'src/store/transaction/actions';
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    mutations,
+    actions,
+};
diff --git a/src/store/transaction/mutations.js b/src/store/transaction/mutations.js
new file mode 100644
index 000000000..cfe7f8041
--- /dev/null
+++ b/src/store/transaction/mutations.js
@@ -0,0 +1,3 @@
+export const setTransactions = (state, transactions) => {
+    state.transactions = transactions;
+};
diff --git a/src/store/transaction/state.js b/src/store/transaction/state.js
new file mode 100644
index 000000000..2f9c6e1da
--- /dev/null
+++ b/src/store/transaction/state.js
@@ -0,0 +1,5 @@
+export default function() {
+    return {
+        transactions: [],
+    };
+}
diff --git a/src/types/AbiFunction.ts b/src/types/AbiFunction.ts
new file mode 100644
index 000000000..c01771b4a
--- /dev/null
+++ b/src/types/AbiFunction.ts
@@ -0,0 +1,5 @@
+export interface AbiFunction {
+    type: string;
+    stateMutability: string;
+    name: string;
+}
diff --git a/src/types/BalanceResult.ts b/src/types/BalanceResult.ts
new file mode 100644
index 000000000..77b9e4db6
--- /dev/null
+++ b/src/types/BalanceResult.ts
@@ -0,0 +1,10 @@
+export interface BalanceResult {
+    balance: string;
+    contract: string;
+}
+
+export interface BalanceQueryResponse {
+    data: {
+        results: BalanceResult[];
+    }
+}
diff --git a/src/types/BlockData.ts b/src/types/BlockData.ts
new file mode 100644
index 000000000..b17690856
--- /dev/null
+++ b/src/types/BlockData.ts
@@ -0,0 +1,16 @@
+export interface BlockData {
+    number: string;             // this is returning from indexer but it should be called blockNumber
+    blockNumber: number;        // replicates the number value in number format (not string)
+    transactionsCount: number;  // replicates the transactionsCount value in number format (not string) https://api.testnet.teloscan.io/v1/blocks?includeCount=true
+    logsBloom: string;
+    gasLimit: string;
+    gasUsed: string;
+    size: string;
+    extraData: string;
+    transactionsRoot: string;
+    sha3Uncles: string;
+    parentHash: string;
+    nonce: string;
+    hash: string;
+    timestamp: number;
+}
diff --git a/src/types/ERCTransfer.ts b/src/types/ERCTransfer.ts
new file mode 100644
index 000000000..552c0e936
--- /dev/null
+++ b/src/types/ERCTransfer.ts
@@ -0,0 +1,31 @@
+export interface TokenBasicData {
+    symbol: string;
+    address: string;
+    name: string;
+    decimals: string;
+}
+
+export interface ERC721Transfer {
+    tokenId: string;
+    to: string;
+    from: string;
+    token: TokenBasicData;
+}
+
+export interface ERC20Transfer {
+    value: string;
+    wei: string;
+    to: string;
+    from: string;
+    token: TokenBasicData;
+}
+
+export interface ERC1155Transfer {
+    tokenId: string;
+    amount: string;
+    to: string;
+    from: string;
+    token: TokenBasicData;
+}
+
+export type ERCTransfer = ERC721Transfer | ERC1155Transfer | ERC20Transfer;
diff --git a/src/types/EvmTransactionExtended.ts b/src/types/EvmTransactionExtended.ts
new file mode 100644
index 000000000..6ac8da77b
--- /dev/null
+++ b/src/types/EvmTransactionExtended.ts
@@ -0,0 +1,10 @@
+import { TransactionDescription } from 'ethers/lib/utils';
+
+import Contract from 'src/lib/contract/Contract';
+import { EvmContractFunctionParameter, EvmTransactionParsed } from 'src/antelope/types';
+
+export interface EvmTransactionExtended extends EvmTransactionParsed {
+    contract: Contract | undefined;
+    parsedTransaction: TransactionDescription | undefined;
+    functionParams: EvmContractFunctionParameter[];
+}
diff --git a/src/types/Highlight.js.d.ts b/src/types/Highlight.js.d.ts
new file mode 100644
index 000000000..8055c1fe9
--- /dev/null
+++ b/src/types/Highlight.js.d.ts
@@ -0,0 +1,3 @@
+declare module 'highlight.js/lib/languages/json';
+declare module 'highlightjs-solidity';
+declare module 'highlight.js/lib/core';
diff --git a/src/types/LatestContainerOptions.ts b/src/types/LatestContainerOptions.ts
new file mode 100644
index 000000000..9cdd4a3ff
--- /dev/null
+++ b/src/types/LatestContainerOptions.ts
@@ -0,0 +1,7 @@
+export interface LatestContainerOptions {
+    [key: string]: {
+      title: string;
+      footer: string;
+      link: string;
+    };
+}
diff --git a/src/types/MetaData.ts b/src/types/MetaData.ts
new file mode 100644
index 000000000..7f7b5bf38
--- /dev/null
+++ b/src/types/MetaData.ts
@@ -0,0 +1,5 @@
+export interface MetaData {
+    compiler?: string;
+    runs?: number;
+    enabled?: boolean;
+}
diff --git a/src/types/NFT.ts b/src/types/NFT.ts
new file mode 100644
index 000000000..17446d31d
--- /dev/null
+++ b/src/types/NFT.ts
@@ -0,0 +1,19 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface MetaData {
+    image?: any;
+    animation_url?: any;
+    animation?: any;
+    animationExtension?: any;
+    properties?: any;
+}
+
+export interface NFT {
+    metadata: MetaData;
+    tokenUri: string | null;
+}
+
+export const enum NFT_TYPE {
+    ERC721 = 'erc721',
+    ERC1155 = 'erc1155',
+}
diff --git a/src/types/Pagination.ts b/src/types/Pagination.ts
new file mode 100644
index 000000000..292a4cf98
--- /dev/null
+++ b/src/types/Pagination.ts
@@ -0,0 +1,7 @@
+export type Pagination = {
+    sortBy: string;
+    descending: boolean;
+    page: number;
+    rowsPerPage: number;
+    rowsNumber: number;
+}
diff --git a/src/types/Token.ts b/src/types/Token.ts
new file mode 100644
index 000000000..14d15d783
--- /dev/null
+++ b/src/types/Token.ts
@@ -0,0 +1,6 @@
+export interface Token {
+    address: string;
+    issuer: string;
+    issuer_link: string;
+    logoURI: string;
+}
diff --git a/src/types/TransactionQueryData.ts b/src/types/TransactionQueryData.ts
new file mode 100644
index 000000000..eb068a9e5
--- /dev/null
+++ b/src/types/TransactionQueryData.ts
@@ -0,0 +1,6 @@
+export interface TransactionQueryData {
+    data: {
+        results: { hash: string}[];
+        total_count: number;
+    }
+}
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 000000000..3f0b99d2b
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,4 @@
+export * from 'src/types/BlockData';
+export * from 'src/types/EvmTransactionExtended';
+export * from 'src/types/LatestContainerOptions';
+export * from 'src/types/Pagination';
diff --git a/src/types/qrious.d.ts b/src/types/qrious.d.ts
new file mode 100644
index 000000000..61c7b3a1b
--- /dev/null
+++ b/src/types/qrious.d.ts
@@ -0,0 +1,35 @@
+/* eslint-disable no-unused-vars */
+declare module 'qrious' {
+
+    type QRiousOptions = {
+        value: string;
+        size?: number;
+        padding?: number;
+        level?: 'L' | 'M' | 'Q' | 'H';
+        foreground?: string;
+        background?: string;
+        foregroundAlpha?: number;
+        backgroundAlpha?: number;
+        mime?: string;
+        element?: HTMLElement | null;
+    }
+
+    class QRious {
+        constructor(options?: QRiousOptions);
+        value: string;
+        size: number;
+        padding: number;
+        level: 'L' | 'M' | 'Q' | 'H';
+        foreground: string;
+        background: string;
+        foregroundAlpha: number;
+        backgroundAlpha: number;
+        mime: string;
+        element: HTMLElement | null;
+        image: HTMLImageElement | null;
+        set(options: QRiousOptions): void;
+        toDataURL(mime?: string): string;
+    }
+
+    export default QRious;
+}
diff --git a/src/types/vue.d.ts b/src/types/vue.d.ts
index 7b13cfd57..c1d33be33 100644
--- a/src/types/vue.d.ts
+++ b/src/types/vue.d.ts
@@ -8,6 +8,7 @@ import ContractManager from 'src/lib/ContractManager';
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     $axios: AxiosInstance;
+    $indexerApi: AxiosInstance;
     $api: ApiClient;
     $ual: UAL;
     $user: User;
diff --git a/test/components/ContractTab/function-interface-utils.test.js b/test/components/ContractTab/function-interface-utils.test.js
index 59e219bb4..4a775516c 100644
--- a/test/components/ContractTab/function-interface-utils.test.js
+++ b/test/components/ContractTab/function-interface-utils.test.js
@@ -25,7 +25,7 @@ import {
     parseStringArrayString,
     parseUintArrayString,
     parseUintString,
-} from 'components/ContractTab/function-interface-utils';
+} from 'src/lib/function-interface-utils';
 import { BigNumber } from 'ethers';
 
 describe('function-interface-utils', () => {
diff --git a/test/pages/staking/StakeForm.test.js b/test/pages/staking/StakeForm.test.js
deleted file mode 100644
index 49b3c660e..000000000
--- a/test/pages/staking/StakeForm.test.js
+++ /dev/null
@@ -1,256 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { shallowMount } from '@vue/test-utils';
-import { BigNumber } from 'ethers';
-import { createStore } from 'vuex';
-
-import {
-    flushTimersAndPromises,
-    oneEthInWei,
-    oneHundredFiftyEthInWei,
-    onePointFiveEthInWei,
-    stubWithSlot,
-} from 'test/testing-helpers';
-
-const hash = '0x123';
-
-// mocking antelope mocks XD
-jest.mock('src/antelope/mocks', () => ({
-    CURRENT_CONTEXT: 'current',
-    useAccountStore: jest.fn().mockReturnValue({
-        getAccount: jest.fn().mockReturnValue({
-            authenticator: {
-                signCustomTransaction: jest.fn().mockResolvedValue({ hash }),
-            },
-        }),
-    }),
-    useChainStore: jest.fn().mockReturnValue({
-        currentChain: {
-            settings: {
-                getNetwork: jest.fn().mockReturnValue('network'),
-            },
-        },
-    }),
-    getAntelope: jest.fn().mockReturnValue({
-        wallets: {
-            getAuthenticator: jest.fn().mockReturnValue({
-                newInstance: jest.fn().mockReturnValue({
-                    signCustomTransaction: jest.fn().mockResolvedValue({ hash }),
-                }),
-            }),
-        },
-    }),
-    createTraceFunction: jest.fn().mockReturnValue(() => {
-        // do nothing
-    }),
-}));
-
-
-
-
-import BaseStakingForm from 'pages/staking/BaseStakingForm';
-import StakeForm from 'pages/staking/StakeForm';
-import { PROVIDER_TELOS_CLOUD, PROVIDER_WEB3_INJECTED } from 'src/lib/utils';
-
-const LocalStorageMap = {
-    [PROVIDER_TELOS_CLOUD]: JSON.stringify({ provider: PROVIDER_WEB3_INJECTED }),
-};
-
-describe('StakeForm.vue', () => {
-    let isLoggedInMock = jest.fn();
-    let savedLocalStorage;
-
-    const globalMock = () => ({
-        directives: {
-            'close-popup': () => {
-                // do nothing
-            },
-        },
-        plugins: [
-            createStore({
-                modules: {
-                    login: {
-                        namespaced: true,
-                        getters: {
-                            address: () => '0x'.concat('0'.repeat(40)),
-                            isLoggedIn: isLoggedInMock,
-                            isNative: () => false,
-                        },
-                    },
-                },
-            }),
-        ],
-        stubs: {
-            'q-btn': true,
-            'q-banner': stubWithSlot('q-banner', ['action']),
-            'q-card': stubWithSlot('q-card'),
-            'q-card-section': stubWithSlot('q-card-section'),
-            'q-card-actions': stubWithSlot('q-card-actions'),
-            'q-dialog':  stubWithSlot('q-dialog'),
-            'transaction-field': stubWithSlot('transaction-field'),
-        },
-    });
-    const stlosContractInstanceMock = {
-        previewDeposit: jest.fn(),
-        previewRedeem: jest.fn(),
-        ['depositTLOS()']: jest.fn(),
-    };
-    const defaultProps = {
-        stlosContractInstance: { ...stlosContractInstanceMock },
-        tlosBalance: oneHundredFiftyEthInWei,
-        hasUnlockedTlos: false,
-        unstakePeriodSeconds: 60,
-        valueOfOneStlosInTlos: '1.23456789',
-    };
-    beforeAll(() => {
-        savedLocalStorage = global.localStorage;
-    });
-
-    beforeEach(() => {
-        jest.resetAllMocks();
-        isLoggedInMock.mockImplementation(() => true);
-        Reflect.deleteProperty(global, 'localStorage');
-
-        global.localStorage = {
-            getItem: jest.fn().mockImplementation(key => LocalStorageMap[key]),
-            setItem: jest.fn().mockImplementation((key, value) => {
-                LocalStorageMap[key] = value;
-            }),
-            clear: jest.fn().mockImplementation(() => {
-                Object.keys(LocalStorageMap).forEach((key) => {
-                    delete LocalStorageMap[key];
-                });
-            }),
-        };
-        global.localStorage.setItem(PROVIDER_TELOS_CLOUD, JSON.stringify({ provider: PROVIDER_WEB3_INJECTED }));
-    });
-
-    afterAll(() => {
-        global.localStorage = savedLocalStorage;
-    });
-
-    it('should have the correct name', () => {
-        expect(StakeForm.name).toBe('StakeForm');
-    });
-
-    it('should render correctly when the user is not logged in', () => {
-        isLoggedInMock.mockImplementation(() => false);
-        const wrapper = shallowMount(StakeForm, {
-            props:  { ...defaultProps },
-            global: { ...globalMock()   },
-        });
-
-        expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it('should render a banner when the user has unlocked TLOS', async () => {
-        const wrapper = shallowMount(StakeForm, {
-            props:  { ...defaultProps },
-            global: { ...globalMock()   },
-        });
-
-        // no banner
-        expect(wrapper.element).toMatchSnapshot();
-
-        await wrapper.setProps({ hasUnlockedTlos: true });
-
-        // snapshot contains q-banner-stub
-        expect(wrapper.element).toMatchSnapshot();
-    });
-
-    describe('user input should be correctly handled', () => {
-        jest.useFakeTimers();
-        let wrapper;
-        let formStub;
-
-        beforeEach(() => {
-            jest.clearAllMocks();
-            wrapper = shallowMount(StakeForm, {
-                props:  { ...defaultProps },
-                global: { ...globalMock()   },
-            });
-            formStub = wrapper.findComponent(BaseStakingForm);
-        });
-
-        const runInputExpects = async (topOrBottomInput) => {
-            const mockedContractMethod = topOrBottomInput === 'top' ? 'previewDeposit' : 'previewRedeem';
-            const eventToSimulateUserInput = `input-${topOrBottomInput}`;
-
-            // mock 1 TLOS === 1.5 STLOS
-            stlosContractInstanceMock[mockedContractMethod]
-                .mockImplementationOnce(() => Promise.resolve(onePointFiveEthInWei));
-
-            formStub.vm.$emit(eventToSimulateUserInput, oneEthInWei);
-            await flushTimersAndPromises();
-
-            expect(stlosContractInstanceMock[mockedContractMethod]).toHaveBeenCalledTimes(1);
-            expect(stlosContractInstanceMock[mockedContractMethod]).toHaveBeenLastCalledWith(oneEthInWei);
-            expect(wrapper.element).toMatchSnapshot();
-
-
-            stlosContractInstanceMock[mockedContractMethod]
-                .mockImplementationOnce(() => Promise.resolve('0'));
-
-            formStub.vm.$emit(eventToSimulateUserInput, '0');
-            await flushTimersAndPromises();
-
-            expect(stlosContractInstanceMock[mockedContractMethod]).toHaveBeenCalledTimes(2);
-            expect(stlosContractInstanceMock[mockedContractMethod]).toHaveBeenLastCalledWith('0');
-            expect(wrapper.element).toMatchSnapshot();
-        };
-
-        ['top', 'bottom'].forEach((topOrBottom) => {
-            test(`for the ${topOrBottom} input`, async() => {
-                await runInputExpects(topOrBottom);
-            });
-        });
-    });
-
-    it('should set and get the value from localStorage', () => {
-        localStorage.setItem(PROVIDER_TELOS_CLOUD, JSON.stringify({ provider: PROVIDER_WEB3_INJECTED }));
-        expect(localStorage.getItem(PROVIDER_TELOS_CLOUD)).toEqual(JSON.stringify({ provider: PROVIDER_WEB3_INJECTED }));
-    });
-
-    it.skip('should render properly when the user has successfully staked TLOS', async () => {
-        jest.useFakeTimers();
-        stlosContractInstanceMock['depositTLOS()'].mockImplementationOnce(() => Promise.resolve({
-            hash,
-        }));
-
-        // we need to execute the legacy implementation for depositing (depositTLOS())
-        LocalStorageMap[PROVIDER_TELOS_CLOUD] = JSON.stringify({ provider: PROVIDER_WEB3_INJECTED });
-
-        const wrapper = shallowMount(StakeForm, {
-            props:  { ...defaultProps },
-            global: { ...globalMock() },
-        });
-        const formStub = wrapper.findComponent(BaseStakingForm);
-
-        // mock 1 TLOS === 1.5 STLOS
-        stlosContractInstanceMock.previewDeposit
-            .mockImplementationOnce(() => Promise.resolve(onePointFiveEthInWei));
-
-        formStub.vm.$emit('input-top', oneEthInWei);
-        await flushTimersAndPromises();
-        expect(wrapper.element).toMatchSnapshot();
-
-        await formStub.vm.$emit('cta-clicked');
-
-        // q-dialog expects a boolean v-model binding to show/hide the element
-        expect(wrapper.element).toMatchSnapshot();
-
-        const confirmStakeButton = wrapper.findComponent('[label="pages.staking.stake_tlos"]');
-        confirmStakeButton.vm.$emit('click');
-
-        expect(stlosContractInstanceMock['depositTLOS()']).toHaveBeenCalledTimes(1);
-        expect(stlosContractInstanceMock['depositTLOS()']).toHaveBeenLastCalledWith({
-            value: BigNumber.from(oneEthInWei),
-        });
-
-        await flushTimersAndPromises();
-        expect(wrapper.emitted('balance-changed').length).toBe(1);
-
-        // should now have a <transaction-field-stub ... />
-        expect(wrapper.element).toMatchSnapshot();
-    });
-});
diff --git a/test/pages/staking/StakingFormInput.test.js b/test/pages/staking/StakingFormInput.test.js
deleted file mode 100644
index aa264ed5d..000000000
--- a/test/pages/staking/StakingFormInput.test.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import { mount } from '@vue/test-utils';
-import {
-    oneEthInWei,
-    oneHundredFiftyEthInWei,
-    onePointFiveEthInWei,
-    onePointOneEthInWei,
-    oneThousandFiveHundredEthInWei,
-} from 'test/testing-helpers';
-import { BigNumber } from 'ethers';
-import StakingFormInput from 'pages/staking/StakingFormInput';
-
-
-const defaultProps = {
-    modelValue: '',
-    label: 'Label Text',
-    infoText: '',
-    errorText: '',
-    tooltip: '',
-    isLoading: false,
-    maxValue: null,
-};
-
-const mountInput = props => mount(
-    StakingFormInput,
-    {
-        global: {
-            stubs: ['q-tooltip', 'q-icon'],
-        },
-        props: {
-            ...defaultProps,
-            ...props,
-        },
-    },
-);
-
-
-describe('StakingFormInput.vue', () => {
-    it('should have the correct name', () => {
-        expect(StakingFormInput.name).toBe('StakingFormInput');
-    });
-
-    describe('v-model implementation', () => {
-        const getInputValue = wrapper => wrapper.find('input').element.value;
-
-        const simulateUserInput = async (wrapper, key, newInputValue) => {
-            const input = wrapper.find('input');
-            // value represents the elements current value; this is a concatenation of all inputs,
-            // where each input may be a single key or a pasted string. Thus, when calling this method,
-            // the chronological order of simulated user input must be considered.
-            // newInputValue is the input's value as the browser sets before triggering keydown or input handlers
-            input.element.value = newInputValue;
-            await input.trigger('keydown', { key });
-            await input.trigger('input');
-        };
-
-        // check the emits, then simulates the flow of data back down to the component from parent via v-model
-        // binding and ensures the component handles that update properly
-        const checkInputExpectations = async (wrapper, expectedEmitCount, expectedLastEmitValue, expectedFormatted) => {
-            const getEmittedVModel = () => wrapper.emitted()?.['update:modelValue'];
-
-            expect(getEmittedVModel()?.length).toBe(expectedEmitCount);
-            expect(getEmittedVModel()[expectedEmitCount - 1][0]).toBe(expectedLastEmitValue);
-
-            await wrapper.setProps({ modelValue: expectedLastEmitValue });
-
-            // input component should not emit after parent updates the modelValue,
-            // i.e. should not enter feedback loop of emit and update
-            expect(getInputValue(wrapper)).toBe(expectedFormatted);
-            expect(getEmittedVModel()?.length).toBe(expectedEmitCount);
-
-            expect(wrapper.element).toMatchSnapshot();
-        };
-
-
-        it('should warn when passed an invalid modelValue', () => {
-            const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation(() => {
-                // do nothing
-            });
-            const invalidValues = [
-                undefined,
-                null,
-                'abc',
-                123,
-                0,
-                BigNumber.from(123),
-            ];
-
-            // only strings of digits should mount with no warnings
-            mountInput({ modelValue: '123' });
-            mountInput({ modelValue: '0' });
-
-            invalidValues.forEach(val => mountInput({ modelValue: val }));
-
-            expect(consoleWarnMock).toHaveBeenCalledTimes(6);
-        });
-
-        it('should correctly handle a change in the modelValue prop', async () => {
-            const wrapper = mountInput({ modelValue: '0' });
-            expect(wrapper.emitted()['update:modelValue']).toBe(undefined);
-
-
-            // update:modelValue event should only emit if value has been changed by the user,
-            // but the input's value should still change and be formatted for the user:
-
-            await wrapper.setProps({ modelValue: oneEthInWei });
-            expect(wrapper.emitted()['update:modelValue']).toBe(undefined);
-            expect(getInputValue(wrapper)).toEqual('1');
-
-            await wrapper.setProps({ modelValue: onePointOneEthInWei });
-            expect(wrapper.emitted()['update:modelValue']).toBe(undefined);
-            expect(getInputValue(wrapper)).toEqual('1.1');
-
-            await wrapper.setProps({ modelValue: '0' });
-            expect(wrapper.emitted()['update:modelValue']).toBe(undefined);
-            expect(getInputValue(wrapper)).toEqual('0');
-        });
-
-        it('should correctly handle user input', async () => {
-            const wrapper = mountInput({ modelValue: '0' });
-            let emitCounter = 0;
-
-            // update:modelValue event should emit user input (in eth) as wei,
-            // and the input's value should be formatted
-
-            // single keypress: 1 => formatted value === "1"
-            // a new modelValue should be emitted, as value changes from 0 to 1e+18 wei
-            await simulateUserInput(wrapper, '1', '1');
-            emitCounter++;
-            await checkInputExpectations(wrapper, emitCounter, oneEthInWei, '1');
-
-            // single keypress: 1 => formatted value === "1."
-            // component should not emit as wei value has not changed from 1e+18 wei
-            await simulateUserInput(wrapper, '.', '1.');
-            await checkInputExpectations(wrapper, emitCounter, oneEthInWei, '1.');
-
-
-            // single keypress: 5 => formatted value === "1.5"
-            // component should emit as wei value has changed from 1e10^18 to 1.5e10^17 wei
-            await simulateUserInput(wrapper, '5', '1.5');
-            emitCounter++;
-            await checkInputExpectations(wrapper, emitCounter, onePointFiveEthInWei, '1.5');
-
-            // single keypress: 0 (inserted at end) => formatted value === "1.50"
-            // component should not emit as wei value has not changed from 1.5e+17 wei
-            await simulateUserInput(wrapper, '0', '1.50');
-            await checkInputExpectations(wrapper, emitCounter, onePointFiveEthInWei, '1.50');
-
-            // single keypress: 0 (inserted at beginning) => formatted value === "1.50" (leading zeroes stripped)
-            // component should not emit as wei value has not changed from 1.5e+17 wei
-            await simulateUserInput(wrapper, '0', '01.50');
-            await checkInputExpectations(wrapper, emitCounter, onePointFiveEthInWei, '1.50');
-
-            // single keypress: backspace (with the caret before the '.') => formatted value === "150"
-            // component should emit as new wei value should be 1.5e+19 wei
-            await simulateUserInput(wrapper, 'Delete', '150');
-            emitCounter++;
-            await checkInputExpectations(wrapper, emitCounter, oneHundredFiftyEthInWei, '150');
-
-            // single keypress: 0 (inserted at end) => formatted value === "1,500"
-            // component should emit as new wei value should be 1.5e+20 wei
-            await simulateUserInput(wrapper, '0', '1500');
-            emitCounter++;
-            await checkInputExpectations(wrapper, emitCounter, oneThousandFiveHundredEthInWei, '1,500');
-
-            // single keypress: 0 (with all selected) => formatted value === "0"
-            // component should emit as new wei value should be 0 wei
-            await simulateUserInput(wrapper, '0', '0');
-            emitCounter++;
-            await checkInputExpectations(wrapper, emitCounter, '0', '0');
-        });
-    });
-});
diff --git a/test/pages/staking/__snapshots__/StakeForm.test.js.snap b/test/pages/staking/__snapshots__/StakeForm.test.js.snap
deleted file mode 100644
index 0ea62d0f8..000000000
--- a/test/pages/staking/__snapshots__/StakeForm.test.js.snap
+++ /dev/null
@@ -1,631 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StakeForm.vue should render a banner when the user has unlocked TLOS 1`] = `
-<div
-  data-v-app=""
->
-  
-  <div
-    class="c-stake-form row"
-  >
-    <div
-      class="col-xs-12 col-md-6 offset-md-3"
-    >
-      <!--v-if-->
-    </div>
-    <div
-      class="col-12 q-mb-lg"
-    >
-      <base-staking-form-stub
-        bottominputamount="0"
-        bottominputisloading="false"
-        bottominputlabel="pages.staking.receive_stlos"
-        bottominputmaxvalue=""
-        ctadisabled="true"
-        ctaloading="false"
-        ctatext="pages.staking.stake_tlos"
-        header="pages.staking.stake_tlos"
-        subheader="pages.staking.stake_tlos_subheader"
-        topinputamount="0"
-        topinputerrortext=""
-        topinputinfotext="pages.staking.available"
-        topinputisloading="false"
-        topinputlabel="pages.staking.stake_tlos"
-        topinputmaxvalue="149000000000000000000"
-        topinputtooltip="pages.staking.click_to_input_full_wallet_balance"
-        unstakeperiodseconds="60"
-        valueofonestlosintlos="1.23456789"
-      />
-    </div>
-    <!--v-if-->
-    <q-dialog-stub
-      modelvalue="false"
-    >
-      
-      <q-card-stub>
-        
-        <q-card-section-stub>
-          
-          <p>
-            pages.staking.stake_tlos_confirm
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_2a 1 pages.staking.minutes, pages.staking.stake_tlos_confirm_2b
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_3
-          </p>
-          
-        </q-card-section-stub>
-        <q-card-actions-stub
-          align="right"
-          class="q-pb-md q-px-md"
-        >
-          
-          <!--v-if-->
-          <q-btn-stub
-            color="negative"
-            flat=""
-            label="pages.staking.cancel"
-          />
-          <q-btn-stub
-            color="secondary"
-            label="pages.staking.stake_tlos"
-            text-color="black"
-          />
-          
-        </q-card-actions-stub>
-        
-      </q-card-stub>
-      
-    </q-dialog-stub>
-  </div>
-  <login-modal-stub
-    show="false"
-  />
-  
-</div>
-`;
-
-exports[`StakeForm.vue should render a banner when the user has unlocked TLOS 2`] = `
-<div
-  data-v-app=""
->
-  
-  <div
-    class="c-stake-form row"
-  >
-    <div
-      class="col-xs-12 col-md-6 offset-md-3"
-    >
-      <q-banner-stub
-        class="bg-green text-black"
-        dense=""
-        inline-actions=""
-        rounded=""
-      >
-        
-        pages.staking.you_have_unlocked_tlos 
-        
-        
-        <q-btn-stub
-          color="black"
-          flat=""
-          label="global.dismiss"
-        />
-        <q-btn-stub
-          color="black"
-          flat=""
-          label="pages.staking.claim_tlos"
-        />
-        
-      </q-banner-stub>
-    </div>
-    <div
-      class="col-12 q-mb-lg"
-    >
-      <base-staking-form-stub
-        bottominputamount="0"
-        bottominputisloading="false"
-        bottominputlabel="pages.staking.receive_stlos"
-        bottominputmaxvalue=""
-        ctadisabled="true"
-        ctaloading="false"
-        ctatext="pages.staking.stake_tlos"
-        header="pages.staking.stake_tlos"
-        subheader="pages.staking.stake_tlos_subheader"
-        topinputamount="0"
-        topinputerrortext=""
-        topinputinfotext="pages.staking.available"
-        topinputisloading="false"
-        topinputlabel="pages.staking.stake_tlos"
-        topinputmaxvalue="149000000000000000000"
-        topinputtooltip="pages.staking.click_to_input_full_wallet_balance"
-        unstakeperiodseconds="60"
-        valueofonestlosintlos="1.23456789"
-      />
-    </div>
-    <!--v-if-->
-    <q-dialog-stub
-      modelvalue="false"
-    >
-      
-      <q-card-stub>
-        
-        <q-card-section-stub>
-          
-          <p>
-            pages.staking.stake_tlos_confirm
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_2a 1 pages.staking.minutes, pages.staking.stake_tlos_confirm_2b
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_3
-          </p>
-          
-        </q-card-section-stub>
-        <q-card-actions-stub
-          align="right"
-          class="q-pb-md q-px-md"
-        >
-          
-          <!--v-if-->
-          <q-btn-stub
-            color="negative"
-            flat=""
-            label="pages.staking.cancel"
-          />
-          <q-btn-stub
-            color="secondary"
-            label="pages.staking.stake_tlos"
-            text-color="black"
-          />
-          
-        </q-card-actions-stub>
-        
-      </q-card-stub>
-      
-    </q-dialog-stub>
-  </div>
-  <login-modal-stub
-    show="false"
-  />
-  
-</div>
-`;
-
-exports[`StakeForm.vue should render correctly when the user is not logged in 1`] = `
-<div
-  data-v-app=""
->
-  
-  <div
-    class="c-stake-form row"
-  >
-    <div
-      class="col-xs-12 col-md-6 offset-md-3"
-    >
-      <!--v-if-->
-    </div>
-    <div
-      class="col-12 q-mb-lg"
-    >
-      <base-staking-form-stub
-        bottominputamount="0"
-        bottominputisloading="false"
-        bottominputlabel="pages.staking.receive_stlos"
-        bottominputmaxvalue=""
-        ctadisabled="false"
-        ctaloading="false"
-        ctatext="pages.staking.connect_wallet"
-        header="pages.staking.stake_tlos"
-        subheader="pages.staking.stake_tlos_subheader"
-        topinputamount="0"
-        topinputerrortext="pages.staking.wallet_not_connected"
-        topinputinfotext=""
-        topinputisloading="false"
-        topinputlabel="pages.staking.stake_tlos"
-        topinputmaxvalue=""
-        topinputtooltip="pages.staking.click_to_input_full_wallet_balance"
-        unstakeperiodseconds="60"
-        valueofonestlosintlos="1.23456789"
-      />
-    </div>
-    <!--v-if-->
-    <q-dialog-stub
-      modelvalue="false"
-    >
-      
-      <q-card-stub>
-        
-        <q-card-section-stub>
-          
-          <p>
-            pages.staking.stake_tlos_confirm
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_2a 1 pages.staking.minutes, pages.staking.stake_tlos_confirm_2b
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_3
-          </p>
-          
-        </q-card-section-stub>
-        <q-card-actions-stub
-          align="right"
-          class="q-pb-md q-px-md"
-        >
-          
-          <!--v-if-->
-          <q-btn-stub
-            color="negative"
-            flat=""
-            label="pages.staking.cancel"
-          />
-          <q-btn-stub
-            color="secondary"
-            label="pages.staking.stake_tlos"
-            text-color="black"
-          />
-          
-        </q-card-actions-stub>
-        
-      </q-card-stub>
-      
-    </q-dialog-stub>
-  </div>
-  <login-modal-stub
-    show="false"
-  />
-  
-</div>
-`;
-
-exports[`StakeForm.vue user input should be correctly handled for the bottom input 1`] = `
-<div
-  data-v-app=""
->
-  
-  <div
-    class="c-stake-form row"
-  >
-    <div
-      class="col-xs-12 col-md-6 offset-md-3"
-    >
-      <!--v-if-->
-    </div>
-    <div
-      class="col-12 q-mb-lg"
-    >
-      <base-staking-form-stub
-        bottominputamount="1000000000000000000"
-        bottominputisloading="false"
-        bottominputlabel="pages.staking.receive_stlos"
-        bottominputmaxvalue=""
-        ctadisabled="false"
-        ctaloading="false"
-        ctatext="pages.staking.stake_tlos"
-        header="pages.staking.stake_tlos"
-        subheader="pages.staking.stake_tlos_subheader"
-        topinputamount="1500000000000000000"
-        topinputerrortext=""
-        topinputinfotext="pages.staking.available"
-        topinputisloading="false"
-        topinputlabel="pages.staking.stake_tlos"
-        topinputmaxvalue="149000000000000000000"
-        topinputtooltip="pages.staking.click_to_input_full_wallet_balance"
-        unstakeperiodseconds="60"
-        valueofonestlosintlos="1.23456789"
-      />
-    </div>
-    <!--v-if-->
-    <q-dialog-stub
-      modelvalue="false"
-    >
-      
-      <q-card-stub>
-        
-        <q-card-section-stub>
-          
-          <p>
-            pages.staking.stake_tlos_confirm
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_2a 1 pages.staking.minutes, pages.staking.stake_tlos_confirm_2b
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_3
-          </p>
-          
-        </q-card-section-stub>
-        <q-card-actions-stub
-          align="right"
-          class="q-pb-md q-px-md"
-        >
-          
-          <!--v-if-->
-          <q-btn-stub
-            color="negative"
-            flat=""
-            label="pages.staking.cancel"
-          />
-          <q-btn-stub
-            color="secondary"
-            label="pages.staking.stake_tlos"
-            text-color="black"
-          />
-          
-        </q-card-actions-stub>
-        
-      </q-card-stub>
-      
-    </q-dialog-stub>
-  </div>
-  <login-modal-stub
-    show="false"
-  />
-  
-</div>
-`;
-
-exports[`StakeForm.vue user input should be correctly handled for the bottom input 2`] = `
-<div
-  data-v-app=""
->
-  
-  <div
-    class="c-stake-form row"
-  >
-    <div
-      class="col-xs-12 col-md-6 offset-md-3"
-    >
-      <!--v-if-->
-    </div>
-    <div
-      class="col-12 q-mb-lg"
-    >
-      <base-staking-form-stub
-        bottominputamount="0"
-        bottominputisloading="false"
-        bottominputlabel="pages.staking.receive_stlos"
-        bottominputmaxvalue=""
-        ctadisabled="true"
-        ctaloading="false"
-        ctatext="pages.staking.stake_tlos"
-        header="pages.staking.stake_tlos"
-        subheader="pages.staking.stake_tlos_subheader"
-        topinputamount="0"
-        topinputerrortext=""
-        topinputinfotext="pages.staking.available"
-        topinputisloading="false"
-        topinputlabel="pages.staking.stake_tlos"
-        topinputmaxvalue="149000000000000000000"
-        topinputtooltip="pages.staking.click_to_input_full_wallet_balance"
-        unstakeperiodseconds="60"
-        valueofonestlosintlos="1.23456789"
-      />
-    </div>
-    <!--v-if-->
-    <q-dialog-stub
-      modelvalue="false"
-    >
-      
-      <q-card-stub>
-        
-        <q-card-section-stub>
-          
-          <p>
-            pages.staking.stake_tlos_confirm
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_2a 1 pages.staking.minutes, pages.staking.stake_tlos_confirm_2b
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_3
-          </p>
-          
-        </q-card-section-stub>
-        <q-card-actions-stub
-          align="right"
-          class="q-pb-md q-px-md"
-        >
-          
-          <!--v-if-->
-          <q-btn-stub
-            color="negative"
-            flat=""
-            label="pages.staking.cancel"
-          />
-          <q-btn-stub
-            color="secondary"
-            label="pages.staking.stake_tlos"
-            text-color="black"
-          />
-          
-        </q-card-actions-stub>
-        
-      </q-card-stub>
-      
-    </q-dialog-stub>
-  </div>
-  <login-modal-stub
-    show="false"
-  />
-  
-</div>
-`;
-
-exports[`StakeForm.vue user input should be correctly handled for the top input 1`] = `
-<div
-  data-v-app=""
->
-  
-  <div
-    class="c-stake-form row"
-  >
-    <div
-      class="col-xs-12 col-md-6 offset-md-3"
-    >
-      <!--v-if-->
-    </div>
-    <div
-      class="col-12 q-mb-lg"
-    >
-      <base-staking-form-stub
-        bottominputamount="1500000000000000000"
-        bottominputisloading="false"
-        bottominputlabel="pages.staking.receive_stlos"
-        bottominputmaxvalue=""
-        ctadisabled="false"
-        ctaloading="false"
-        ctatext="pages.staking.stake_tlos"
-        header="pages.staking.stake_tlos"
-        subheader="pages.staking.stake_tlos_subheader"
-        topinputamount="1000000000000000000"
-        topinputerrortext=""
-        topinputinfotext="pages.staking.available"
-        topinputisloading="false"
-        topinputlabel="pages.staking.stake_tlos"
-        topinputmaxvalue="149000000000000000000"
-        topinputtooltip="pages.staking.click_to_input_full_wallet_balance"
-        unstakeperiodseconds="60"
-        valueofonestlosintlos="1.23456789"
-      />
-    </div>
-    <!--v-if-->
-    <q-dialog-stub
-      modelvalue="false"
-    >
-      
-      <q-card-stub>
-        
-        <q-card-section-stub>
-          
-          <p>
-            pages.staking.stake_tlos_confirm
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_2a 1 pages.staking.minutes, pages.staking.stake_tlos_confirm_2b
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_3
-          </p>
-          
-        </q-card-section-stub>
-        <q-card-actions-stub
-          align="right"
-          class="q-pb-md q-px-md"
-        >
-          
-          <!--v-if-->
-          <q-btn-stub
-            color="negative"
-            flat=""
-            label="pages.staking.cancel"
-          />
-          <q-btn-stub
-            color="secondary"
-            label="pages.staking.stake_tlos"
-            text-color="black"
-          />
-          
-        </q-card-actions-stub>
-        
-      </q-card-stub>
-      
-    </q-dialog-stub>
-  </div>
-  <login-modal-stub
-    show="false"
-  />
-  
-</div>
-`;
-
-exports[`StakeForm.vue user input should be correctly handled for the top input 2`] = `
-<div
-  data-v-app=""
->
-  
-  <div
-    class="c-stake-form row"
-  >
-    <div
-      class="col-xs-12 col-md-6 offset-md-3"
-    >
-      <!--v-if-->
-    </div>
-    <div
-      class="col-12 q-mb-lg"
-    >
-      <base-staking-form-stub
-        bottominputamount="0"
-        bottominputisloading="false"
-        bottominputlabel="pages.staking.receive_stlos"
-        bottominputmaxvalue=""
-        ctadisabled="true"
-        ctaloading="false"
-        ctatext="pages.staking.stake_tlos"
-        header="pages.staking.stake_tlos"
-        subheader="pages.staking.stake_tlos_subheader"
-        topinputamount="0"
-        topinputerrortext=""
-        topinputinfotext="pages.staking.available"
-        topinputisloading="false"
-        topinputlabel="pages.staking.stake_tlos"
-        topinputmaxvalue="149000000000000000000"
-        topinputtooltip="pages.staking.click_to_input_full_wallet_balance"
-        unstakeperiodseconds="60"
-        valueofonestlosintlos="1.23456789"
-      />
-    </div>
-    <!--v-if-->
-    <q-dialog-stub
-      modelvalue="false"
-    >
-      
-      <q-card-stub>
-        
-        <q-card-section-stub>
-          
-          <p>
-            pages.staking.stake_tlos_confirm
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_2a 1 pages.staking.minutes, pages.staking.stake_tlos_confirm_2b
-          </p>
-          <p>
-            pages.staking.stake_tlos_confirm_3
-          </p>
-          
-        </q-card-section-stub>
-        <q-card-actions-stub
-          align="right"
-          class="q-pb-md q-px-md"
-        >
-          
-          <!--v-if-->
-          <q-btn-stub
-            color="negative"
-            flat=""
-            label="pages.staking.cancel"
-          />
-          <q-btn-stub
-            color="secondary"
-            label="pages.staking.stake_tlos"
-            text-color="black"
-          />
-          
-        </q-card-actions-stub>
-        
-      </q-card-stub>
-      
-    </q-dialog-stub>
-  </div>
-  <login-modal-stub
-    show="false"
-  />
-  
-</div>
-`;
diff --git a/test/pages/staking/__snapshots__/StakingFormInput.test.js.snap b/test/pages/staking/__snapshots__/StakingFormInput.test.js.snap
deleted file mode 100644
index 70601c802..000000000
--- a/test/pages/staking/__snapshots__/StakingFormInput.test.js.snap
+++ /dev/null
@@ -1,329 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StakingFormInput.vue v-model implementation should correctly handle user input 1`] = `
-<div
-  class="c-staking-input container-fluid shadow-3"
->
-  <div
-    class="row"
-  >
-    <div
-      class="col-6"
-    >
-      <h6
-        class="c-staking-input__label"
-      >
-        Label Text
-      </h6>
-    </div>
-    <div
-      class="col-6 u-flex--right"
-    >
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="row"
-  >
-    <div
-      class="col"
-    >
-      <input
-        class="c-staking-input__input"
-        inputmode="decimal"
-        pattern="[0-9.]*"
-        placeholder="0"
-        type="text"
-      />
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-`;
-
-exports[`StakingFormInput.vue v-model implementation should correctly handle user input 2`] = `
-<div
-  class="c-staking-input container-fluid shadow-3"
->
-  <div
-    class="row"
-  >
-    <div
-      class="col-6"
-    >
-      <h6
-        class="c-staking-input__label"
-      >
-        Label Text
-      </h6>
-    </div>
-    <div
-      class="col-6 u-flex--right"
-    >
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="row"
-  >
-    <div
-      class="col"
-    >
-      <input
-        class="c-staking-input__input"
-        inputmode="decimal"
-        pattern="[0-9.]*"
-        placeholder="0"
-        type="text"
-      />
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-`;
-
-exports[`StakingFormInput.vue v-model implementation should correctly handle user input 3`] = `
-<div
-  class="c-staking-input container-fluid shadow-3"
->
-  <div
-    class="row"
-  >
-    <div
-      class="col-6"
-    >
-      <h6
-        class="c-staking-input__label"
-      >
-        Label Text
-      </h6>
-    </div>
-    <div
-      class="col-6 u-flex--right"
-    >
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="row"
-  >
-    <div
-      class="col"
-    >
-      <input
-        class="c-staking-input__input"
-        inputmode="decimal"
-        pattern="[0-9.]*"
-        placeholder="0"
-        type="text"
-      />
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-`;
-
-exports[`StakingFormInput.vue v-model implementation should correctly handle user input 4`] = `
-<div
-  class="c-staking-input container-fluid shadow-3"
->
-  <div
-    class="row"
-  >
-    <div
-      class="col-6"
-    >
-      <h6
-        class="c-staking-input__label"
-      >
-        Label Text
-      </h6>
-    </div>
-    <div
-      class="col-6 u-flex--right"
-    >
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="row"
-  >
-    <div
-      class="col"
-    >
-      <input
-        class="c-staking-input__input"
-        inputmode="decimal"
-        pattern="[0-9.]*"
-        placeholder="0"
-        type="text"
-      />
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-`;
-
-exports[`StakingFormInput.vue v-model implementation should correctly handle user input 5`] = `
-<div
-  class="c-staking-input container-fluid shadow-3"
->
-  <div
-    class="row"
-  >
-    <div
-      class="col-6"
-    >
-      <h6
-        class="c-staking-input__label"
-      >
-        Label Text
-      </h6>
-    </div>
-    <div
-      class="col-6 u-flex--right"
-    >
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="row"
-  >
-    <div
-      class="col"
-    >
-      <input
-        class="c-staking-input__input"
-        inputmode="decimal"
-        pattern="[0-9.]*"
-        placeholder="0"
-        type="text"
-      />
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-`;
-
-exports[`StakingFormInput.vue v-model implementation should correctly handle user input 6`] = `
-<div
-  class="c-staking-input container-fluid shadow-3"
->
-  <div
-    class="row"
-  >
-    <div
-      class="col-6"
-    >
-      <h6
-        class="c-staking-input__label"
-      >
-        Label Text
-      </h6>
-    </div>
-    <div
-      class="col-6 u-flex--right"
-    >
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="row"
-  >
-    <div
-      class="col"
-    >
-      <input
-        class="c-staking-input__input"
-        inputmode="decimal"
-        pattern="[0-9.]*"
-        placeholder="0"
-        type="text"
-      />
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-`;
-
-exports[`StakingFormInput.vue v-model implementation should correctly handle user input 7`] = `
-<div
-  class="c-staking-input container-fluid shadow-3"
->
-  <div
-    class="row"
-  >
-    <div
-      class="col-6"
-    >
-      <h6
-        class="c-staking-input__label"
-      >
-        Label Text
-      </h6>
-    </div>
-    <div
-      class="col-6 u-flex--right"
-    >
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="row"
-  >
-    <div
-      class="col"
-    >
-      <input
-        class="c-staking-input__input"
-        inputmode="decimal"
-        pattern="[0-9.]*"
-        placeholder="0"
-        type="text"
-      />
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-`;
-
-exports[`StakingFormInput.vue v-model implementation should correctly handle user input 8`] = `
-<div
-  class="c-staking-input container-fluid shadow-3"
->
-  <div
-    class="row"
-  >
-    <div
-      class="col-6"
-    >
-      <h6
-        class="c-staking-input__label"
-      >
-        Label Text
-      </h6>
-    </div>
-    <div
-      class="col-6 u-flex--right"
-    >
-      <!--v-if-->
-    </div>
-  </div>
-  <div
-    class="row"
-  >
-    <div
-      class="col"
-    >
-      <input
-        class="c-staking-input__input"
-        inputmode="decimal"
-        pattern="[0-9.]*"
-        placeholder="0"
-        type="text"
-      />
-      <!--v-if-->
-    </div>
-  </div>
-</div>
-`;
diff --git a/yarn.lock b/yarn.lock
index c88f3291d..ec1c600ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2425,7 +2425,7 @@
     core-js "^3.6.5"
     core-js-compat "^3.6.5"
 
-"@quasar/extras@^1.0.0":
+"@quasar/extras@^1.0.0", "@quasar/extras@^1.13.0":
   version "1.16.7"
   resolved "https://registry.yarnpkg.com/@quasar/extras/-/extras-1.16.7.tgz#9416689f2e55f594f1135383c35b9ab03875c522"
   integrity sha512-nYF3gVE/si1YJ/D4qmAiHGwxoJIDCvTT8NI6ZmbTMPrur4J8xBKhfhfhyLoQ4k2jJZP6Rx0rUcB71FBNC2C8vQ==
@@ -2435,6 +2435,20 @@
   resolved "https://registry.yarnpkg.com/@quasar/fastclick/-/fastclick-1.1.5.tgz#948e79c44098cced6c3d1645315683ebc29ed834"
   integrity sha512-p3JKgTjRlJ1YQXbqTw3Bsa4j0mQdt5dq+WfYvyb7MgKGdephHCKdR/kxA5PCTAmJanGJuDKqRdyGYX/hYN4KGw==
 
+"@quasar/quasar-app-extension-qmediaplayer@^2.0.0-beta.6":
+  version "2.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/@quasar/quasar-app-extension-qmediaplayer/-/quasar-app-extension-qmediaplayer-2.0.0-beta.6.tgz#527430f1c1821d2c8623a508146aad754a9dcf29"
+  integrity sha512-Mrqqny92+/Kj5TuHzXLsbHF8j4Ltjuhwdq+tkkpx99Iw0zeE5lcFDTNzmiAllN8+W7h57FzDWiidvsh8dXPnDg==
+  dependencies:
+    "@quasar/quasar-ui-qmediaplayer" "^2.0.0-beta.6"
+
+"@quasar/quasar-ui-qmediaplayer@^2.0.0-beta.6":
+  version "2.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/@quasar/quasar-ui-qmediaplayer/-/quasar-ui-qmediaplayer-2.0.0-beta.6.tgz#9b29e0b68ffe4575df682abd13e50392bc8a2361"
+  integrity sha512-j0Y6NCMkup/fjwpOT2kWPG+w3X1yVxmRaSHxQRtWLsWHjiSheaJLWKqZDJ9UarEKL8rtS/CUtadD+ENvcBEHHQ==
+  dependencies:
+    "@quasar/extras" "^1.13.0"
+
 "@quasar/ssr-helpers@2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@quasar/ssr-helpers/-/ssr-helpers-2.2.0.tgz#33ee22a8fb0d24b53c48485d7916f733f0c2ef7a"
@@ -6458,6 +6472,11 @@ eventemitter3@^4.0.0, eventemitter3@^4.0.7:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
+eventemitter3@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
+  integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
+
 events@^3.2.0, events@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
@@ -8181,6 +8200,11 @@ js-beautify@^1.6.12:
     glob "^8.1.0"
     nopt "^6.0.0"
 
+js-big-decimal@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/js-big-decimal/-/js-big-decimal-1.4.1.tgz#e79423a1d06e55a390547d75233ff289c3dd8820"
+  integrity sha512-lEE6kXojqv1/ky/H0nTTg5gi+1g+V6O94T2GPpZTGayXGeYIC6f6PszckNsEa7S2+qgas9ZOEkONMryxXVKWwQ==
+
 js-cookie@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
@@ -9831,6 +9855,11 @@ qrcode@1.5.3, qrcode@^1.5.1:
     pngjs "^5.0.0"
     yargs "^15.3.1"
 
+qrious@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/qrious/-/qrious-4.0.2.tgz#09c4d4079d2b961617f62c69cff3b9bb66a39693"
+  integrity sha512-xWPJIrK1zu5Ypn898fBp8RHkT/9ibquV2Kv24S/JY9VYEhMBMKur1gHVsOiNUh7PHP9uCgejjpZUHUIXXKoU/g==
+
 qs@6.10.3:
   version "6.10.3"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
@@ -11407,6 +11436,11 @@ vue-inline-svg@^3.1.2:
   resolved "https://registry.yarnpkg.com/vue-inline-svg/-/vue-inline-svg-3.1.2.tgz#bc83ad67aacfda6c7c76364d89775a06e8270136"
   integrity sha512-K01sLANBnjosObee4JrBu/igXpYIFhQfy4EcEyVWxEWf6nmrxp7Isz6pmeRCsWx6XGrGWfrQH3uNwt4nOmrFdA==
 
+vue-json-pretty@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-2.2.4.tgz#4c82fa78aeb987460c727c3b31e45a58f58d9c95"
+  integrity sha512-JX80b3QDrspcH43C53CdtYeq/froApQGSV5y43bEMWFj2LGOxB96aH1VmvrFA21nD1WTP6nwfFMQqGXuS4jyFQ==
+
 vue-json-viewer@3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/vue-json-viewer/-/vue-json-viewer-3.0.4.tgz#c1d65515e57d4036defbbc18fa942d7fd5fb9a8b"
@@ -11438,11 +11472,6 @@ vue-style-loader@4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue3-click-away@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/vue3-click-away/-/vue3-click-away-1.2.4.tgz#ee76a241e7cff2a345e14342d558f4801d14cc26"
-  integrity sha512-O9Z2KlvIhJT8OxaFy04eiZE9rc1Mk/bp+70dLok68ko3Kr8AW5dU+j8avSk4GDQu94FllSr4m5ul4BpzlKOw1A==
-
 vue@3:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
@@ -11519,6 +11548,13 @@ web3-errors@^1.1.2:
   dependencies:
     web3-types "^1.2.0"
 
+web3-errors@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/web3-errors/-/web3-errors-1.1.4.tgz#5667a0a5f66fc936e101ef32032ccc1e8ca4d5a1"
+  integrity sha512-WahtszSqILez+83AxGecVroyZsMuuRT+KmQp4Si5P4Rnqbczno1k748PCrZTS1J4UCPmXMG2/Vt+0Bz2zwXkwQ==
+  dependencies:
+    web3-types "^1.3.1"
+
 web3-eth-abi@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/web3-eth-abi/-/web3-eth-abi-4.1.2.tgz#a7b262ce0ad12aa4af1edc6f89053fb1d39010d4"
@@ -11665,15 +11701,21 @@ web3-types@^1.2.0:
   resolved "https://registry.yarnpkg.com/web3-types/-/web3-types-1.2.0.tgz#176bfe53d7e46c2488d6b95c98df8f6cb1fe1375"
   integrity sha512-ljx8mrkrOI8fRqvgOdxfpKYoso6n7I8T9LsqXl+Mz2Db0L+2H15an0xgdoWYpKndTPiU2NKRWFiopYifBQzcxQ==
 
+web3-types@^1.3.1, web3-types@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/web3-types/-/web3-types-1.5.0.tgz#35b5c0ab149b0d566efeaed8ddaa40db159c748e"
+  integrity sha512-geWuMIeegQ8AedKAO6wO4G4j1gyQ1F/AyKLMw2vud4bsfZayyzWJgCMDZtjYMm5uo2a7i8j1W3/4QFmzlSy5cw==
+
 web3-utils@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/web3-utils/-/web3-utils-4.0.6.tgz#37c30cb884e1ccfecb752269bc7ff285105f4c0a"
-  integrity sha512-nLVtMf9mWTX604XiQQkWZlHLCag9GdHfQtnGJDNaDssTLUx5SpOm1CjhKCHcVcAH/QazEsWcLqUAuyqwKST1kA==
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/web3-utils/-/web3-utils-4.2.2.tgz#8fb7c58cfc02d681f17d7806732ce9fb1170c338"
+  integrity sha512-z+4owWcnoB4EH8yWIL1FBeyqe+sXwaGxUDtVTNPTMf2oB5C+paCToZUdCV5Bi+M543zZEzlzNTabOD+OWNc7NA==
   dependencies:
     ethereum-cryptography "^2.0.0"
-    web3-errors "^1.1.2"
-    web3-types "^1.2.0"
-    web3-validator "^2.0.2"
+    eventemitter3 "^5.0.1"
+    web3-errors "^1.1.4"
+    web3-types "^1.5.0"
+    web3-validator "^2.0.5"
 
 web3-validator@^2.0.2:
   version "2.0.2"
@@ -11686,6 +11728,17 @@ web3-validator@^2.0.2:
     web3-types "^1.2.0"
     zod "^3.21.4"
 
+web3-validator@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/web3-validator/-/web3-validator-2.0.5.tgz#de1984bdb34f292251b86400dba7169700db0849"
+  integrity sha512-2gLOSW8XqEN5pw5jVUm20EB7A8SbQiekpAtiI0JBmCIV0a2rp97v8FgWY5E3UEqnw5WFfEqvcDVW92EyynDTyQ==
+  dependencies:
+    ethereum-cryptography "^2.0.0"
+    util "^0.12.5"
+    web3-errors "^1.1.4"
+    web3-types "^1.5.0"
+    zod "^3.21.4"
+
 web3@^4.0.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/web3/-/web3-4.1.2.tgz#87f23090dcd16cb9eb7f8b61552b923865b309f4"