diff --git a/jest.config.js b/jest.config.js
index 70964081..406c6fcf 100755
--- a/jest.config.js
+++ b/jest.config.js
@@ -47,7 +47,7 @@ module.exports = {
         },
         './src/layouts/': {
             statements: 0,
-            branches: 100,
+            branches: 0,
             functions: 0,
             lines: 0,
         },
diff --git a/package.json b/package.json
index e6d1f36b..5c46c842 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "open-block-explorer",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "..",
   "productName": "Telos Block Explorer",
   "author": "DonaldPeat <don@caleos.io>",
@@ -9,8 +9,8 @@
     "dev": "quasar dev",
     "build": "quasar clean && quasar build",
     "lint": "eslint --ext .js,.ts,.vue ./",
-    "test": "jest --coverage",
-    "test:coverage": "quasar serve test/jest/coverage/lcov-report/ --port 8788"
+    "test": "jest",
+    "test:coverage": "jest --coverage"
   },
   "dependencies": {
     "@greymass/eosio": "^0.6.8",
diff --git a/public/backgrounds/home.png b/public/backgrounds/home.png
new file mode 100644
index 00000000..a78659b8
Binary files /dev/null and b/public/backgrounds/home.png differ
diff --git a/public/icons/antelope-logo.png b/public/icons/antelope-logo.png
new file mode 100644
index 00000000..3dc7ab95
Binary files /dev/null and b/public/icons/antelope-logo.png differ
diff --git a/src/App.vue b/src/App.vue
index 884c214b..a3e371b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,37 +1,4 @@
 <script lang="ts">
-import { setCssVar } from 'quasar';
-import ConfigManager from 'src/config/ConfigManager';
-import { themeProps } from 'src/types/Theme';
-
-const chain = ConfigManager.get().getCurrentChain();
-const chainName = chain.getName();
-const theme = chain.getTheme();
-
-setTheme();
-setMetaData();
-
-function setTheme(): void {
-    for (let themeVar of themeProps) {
-        if (theme[themeVar]) {
-            setCssVar(themeVar, theme[themeVar]);
-        }
-    }
-}
-
-function setMetaData(): void {
-    setFavIcon();
-    setTitle();
-}
-
-function setFavIcon(): void {
-    let link = document.querySelector('link[rel~="icon"]');
-    (link as HTMLLinkElement).href = `chains/${chainName}/favicon.png`;
-}
-
-function setTitle(): void {
-    document.title = chainName;
-}
-
 export default {
     name: 'App',
 };
diff --git a/src/boot/ual.ts b/src/boot/ual.ts
index 8a2c0b43..3c83f6f4 100644
--- a/src/boot/ual.ts
+++ b/src/boot/ual.ts
@@ -21,8 +21,8 @@ declare module '@vue/runtime-core' {
 async function loginHandler() {
     let accountName = 'eosio';
     let permission = 'active';
-    if (localStorage.getItem('autoLogin') === 'cleos') {
-        accountName = localStorage.getItem('account');
+    if (localStorage.getItem('autoLogin_' + getChain().getChainId()) === 'cleos') {
+        accountName = localStorage.getItem('account_' + getChain().getChainId());
     } else {
         await new Promise((resolve) => {
             Dialog.create({
@@ -149,7 +149,7 @@ const authenticators: Authenticator[] = [];
 export const getAuthenticators = () => {
     // we initialize the authenticators inside this function on demand
     if (authenticators.length === 0) {
-        // UAL is not looking at the chain when checking the localstorage for an already logged in account
+        // UAL is not looking at the chain when checking the sessionStorage for an already logged in account
         // A quick fix is to add the chain in appName until we move forward with WharfKit
         const mainChain = getMainChain();
         authenticators.push(new Anchor([mainChain], { appName: `${process.env.APP_NAME}_${mainChain.chainId}` })),
diff --git a/src/components/AccountCard.vue b/src/components/AccountCard.vue
index 04b31522..bf0c8082 100644
--- a/src/components/AccountCard.vue
+++ b/src/components/AccountCard.vue
@@ -15,6 +15,7 @@ import { useRouter } from 'vue-router';
 import { TableIndexType } from 'src/types/Api';
 import { API, UInt64 } from '@greymass/eosio';
 import { formatCurrency } from 'src/utils/string-utils';
+import ConfigManager from 'src/config/ConfigManager';
 
 const chain = getChain();
 export default defineComponent({
@@ -37,6 +38,8 @@ export default defineComponent({
         const router = useRouter();
         const store = useAntelopeStore();
 
+        const accountPageSettings = computed(() => ConfigManager.get().getCurrentChain().getUiCustomization().accountPageSettings);
+
         const createTime = ref<string>('2019-01-01T00:00:00.000');
         const createTransaction = ref<string>('');
         const creatingAccount = ref('');
@@ -140,9 +143,13 @@ export default defineComponent({
         };
 
         const loadBalances = async () => {
-            const total  = await getRexBalance();
-            rexDeposits.value = await getRexFund();
-            rexStaked.value = total;
+            try {
+                const total  = await getRexBalance();
+                rexDeposits.value = await getRexFund();
+                rexStaked.value = total;
+            } catch (e) {
+                $q.notify('REX information not available!');
+            }
         };
 
         const loadResources = () => {
@@ -365,6 +372,7 @@ export default defineComponent({
         );
 
         return {
+            accountPageSettings,
             MICRO_UNIT,
             KILO_UNIT,
             stakedCPU,
@@ -463,6 +471,7 @@ export default defineComponent({
             </div>
             <div v-if="account !== system_account" class="resources">
                 <PercentCircle
+                    v-if="!accountPageSettings.hideCpuInfo"
                     :radius="radius"
                     :fraction="cpu_used"
                     :total="cpu_max"
@@ -470,6 +479,7 @@ export default defineComponent({
                     unit="s"
                 />
                 <PercentCircle
+                    v-if="!accountPageSettings.hideNetInfo"
                     :radius="radius"
                     :fraction="net_used"
                     :total="net_max"
@@ -477,6 +487,7 @@ export default defineComponent({
                     unit="kb"
                 />
                 <PercentCircle
+                    v-if="!accountPageSettings.hideRamInfo"
                     :radius="radius"
                     :fraction="ram_used"
                     :total="ram_max"
@@ -484,25 +495,23 @@ export default defineComponent({
                     unit="kb"
                 />
             </div>
-            <div v-else class="resources">
+            <div v-else-if="!accountPageSettings.hideRamInfo" class="resources">
                 <div class="usage">RAM USED: {{ ram_used }} kb</div>
             </div>
         </q-card-section>
         <q-card-section class="resources-container">
             <div class="row justify-center q-gutter-sm">
-                <div class="col-3">
+                <div v-if="isAccount" class="col-3">
                     <q-btn
-                        v-if='isAccount'
                         :disable="tokensLoading || isLoading"
-                        :label='tokensLoading ? "Loading..." : "Send"'
-                        color='primary'
+                        :label="tokensLoading ? 'Loading...' : 'Send'"
+                        color="primary"
                         class="full-width"
                         @click="openSendDialog = true"
                     />
                 </div>
-                <div class="col-3">
+                <div v-if="isAccount && !accountPageSettings.hideResourcesControl" class="col-3">
                     <q-btn
-                        v-if="isAccount"
                         :disable="tokensLoading || isLoading"
                         :label='tokensLoading ? "Loading..." : "Resources"'
                         class="full-width"
@@ -510,9 +519,8 @@ export default defineComponent({
                         @click="openResourcesDialog = true"
                     />
                 </div>
-                <div class="col-3">
+                <div v-if="isAccount && !accountPageSettings.hideRexControl" class="col-3">
                     <q-btn
-                        v-if="isAccount"
                         :disable="tokensLoading || isLoading"
                         :label='tokensLoading ? "Loading..." : "Staking (REX)"'
                         class="ellipsis full-width"
@@ -545,31 +553,31 @@ export default defineComponent({
                         <td class="text-left">LIQUID (Telos native)</td>
                         <td class="text-right">{{ formatAsset(liquidNative) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideRexInfo">
                         <td class="text-left">REX staked (includes savings)</td>
                         <td class="text-right">{{ formatAsset(rexStaked) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideRexInfo">
                         <td class="text-left">REX liquid deposits</td>
                         <td class="text-right">{{ formatAsset(rexDeposits) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideCpuInfo">
                         <td class="text-left">STAKED for CPU</td>
                         <td class="text-right">{{ formatAsset(stakedCPU) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideNetInfo">
                         <td class="text-left">STAKED for NET</td>
                         <td class="text-right">{{ formatAsset(stakedNET) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideRefundingInfo">
                         <td class="text-left">REFUNDING from staking</td>
                         <td class="text-right">{{ formatAsset(stakedRefund) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideDelegatedInfo">
                         <td class="text-left">DELEGATED to others</td>
                         <td class="text-right">{{ formatAsset(delegatedToOthers) }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="!accountPageSettings.hideDelegatedInfo">
                         <td class="text-left">DELEGATED by others</td>
                         <td class="text-right">{{ formatAsset(delegatedByOthers) }}</td>
                     </tr>
diff --git a/src/components/ChainsListSelector.vue b/src/components/ChainsListSelector.vue
new file mode 100644
index 00000000..50e831f3
--- /dev/null
+++ b/src/components/ChainsListSelector.vue
@@ -0,0 +1,150 @@
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import ConfigManager from 'src/config/ConfigManager';
+import { Chain } from 'src/types/Chain';
+import { useRoute, useRouter } from 'vue-router';
+
+const configMgr = ConfigManager.get();
+
+export default defineComponent({
+    name: 'ChainsSelector',
+    props: {
+        onChainSelected: {
+            type: Function,
+            required: false,
+        },
+        isChainSelected: {
+            type: Function,
+            required: false,
+            default: () => false,
+        },
+    },
+    setup(props) {
+        const route = useRoute();
+        const router = useRouter();
+
+        const mainnets = computed(() => sortChainsUsingName(configMgr.getMainnets()));
+        const testnets = computed(() => sortChainsUsingName(configMgr.getTestnets()));
+
+        function sortChainsUsingName(chains: Chain[]): Chain[] {
+            return chains.sort(
+                (chain1, chain2) => chain1.getName().localeCompare(chain2.getName()),
+            );
+        }
+
+        function chainSelected(chain: Chain) {
+            if (props.isChainSelected(chain)) {
+                return;
+            }
+
+            void router.push({
+                path: route.path,
+                query: { network: chain.getName() },
+            });
+
+            props.onChainSelected(chain);
+        }
+
+        return {
+            mainnets,
+            testnets,
+            chainSelected,
+        };
+    },
+});
+</script>
+
+<template>
+<q-list>
+    <div v-if="mainnets.length > 0" class="section-title">MAINNETS</div>
+    <q-item
+        v-for="(chain, index) in mainnets"
+        :key="`mainnet-${index}`"
+        v-ripple
+        :class="{ selected: isChainSelected(chain) }"
+        clickable
+        @click="chainSelected(chain)"
+    ><img class="sidebar-logo" :src="chain.getSmallLogoPath()">
+        <q-item-section>
+            <div class="q-pl-md">{{ chain.getDisplay() }}</div>
+        </q-item-section>
+    </q-item>
+    <q-separator v-if="testnets.length > 0 && mainnets.length > 0" class="separator"/>
+    <div v-if="testnets.length > 0" class="section-title">TESTNETS</div>
+    <q-item
+        v-for="(chain, index) in testnets"
+        :key="`testnet-${index}`"
+        v-ripple
+        :class="{ selected: isChainSelected(chain) }"
+        clickable
+        @click="chainSelected(chain)"
+    >
+        <div class="testnet-logo-container">
+            <img class="sidebar-logo sidebar-logo--testnet" :src="chain.getSmallLogoPath()">
+            <div class="testnet-text">TESTNET</div>
+        </div>
+        <q-item-section>
+            <div class="q-pl-md">{{ chain.getDisplay() }}</div>
+        </q-item-section>
+    </q-item>
+</q-list>
+</template>
+
+<style lang="sass" scoped>
+.chain-button
+    padding: 0px 4px
+
+.q-item
+    &:hover, &.selected
+        background-color: var(--q-color-sidebar-selected)
+    padding-left: 16px
+    padding-top: 8px
+    width: auto
+
+.q-list
+    padding-bottom: 8px
+    padding-top: 8px
+
+.separator
+    margin-top: .5rem
+    margin-bottom: .5rem
+    min-height: 1px
+    min-width: 0
+    width: 100%
+    background: var(--q-color-sidebar-selected)
+
+.sidebar-logo
+    height: auto
+    width: auto
+    max-height: 32px
+    max-width: 32px
+    object-fit: contain
+
+.section-title
+    padding-left: 16px
+    padding-top: 8px
+    padding-bottom: 8px
+    font-size: 10px
+
+.testnet-logo-container
+    position: relative
+    height: 32px
+    width: 32px
+
+.testnet-text, .sidebar-logo--testnet
+    position: absolute
+    margin: auto
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+
+.testnet-text
+    color: white
+    font-size: 6px
+    width: min-content
+    height: min-content
+    padding: 0 2px
+    border-radius: 2px
+    background-color: rgba(black, 0.6)
+</style>
diff --git a/src/components/ChainsMenu.vue b/src/components/ChainsMenu.vue
index 2ee774f2..a51a780d 100644
--- a/src/components/ChainsMenu.vue
+++ b/src/components/ChainsMenu.vue
@@ -1,121 +1,69 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from 'vue';
+import ChainsListSelector from 'src/components/ChainsListSelector.vue';
 import ConfigManager from 'src/config/ConfigManager';
 import { Chain } from 'src/types/Chain';
-import { useStore } from 'src/store';
-import { getAuthenticators } from 'src/boot/ual';
+import { useRoute, useRouter } from 'vue-router';
 
 const configMgr = ConfigManager.get();
 
 export default defineComponent({
     name: 'ChainsMenu',
+    components: {
+        ChainsListSelector,
+    },
     setup() {
         const menuOpened = ref(false);
-        const store = useStore();
-        const account = computed(() => store.state.account);
+        const route = useRoute();
+        const router = useRouter();
 
         const menuIcon = computed(() => menuOpened.value ? 'expand_less' : 'expand_more');
-        const mainnets = computed(() => sortChainsUsingName(configMgr.getMainnets()));
-        const testnets = computed(() => sortChainsUsingName(configMgr.getTestnets()));
-
-        function sortChainsUsingName(chains: Chain[]): Chain[] {
-            return chains.sort(
-                (chain1, chain2) => chain1.getName().localeCompare(chain2.getName()),
-            );
-        }
+        const hasChainsInstalled = computed(() => configMgr.getAllChains().length > 0);
 
-        function isSelected(chain: Chain): boolean {
-            return localStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE) === chain.getName();
+        function chainSelected() {
+            menuOpened.value = false;
         }
 
-        const logout = async (): Promise<void> => {
-            const wallet = localStorage.getItem('autoLogin');
-            const authenticator = getAuthenticators().find(
-                auth => auth.getName() === wallet,
-            );
-            try {
-                authenticator && (await authenticator.logout());
-            } catch (error) {
-                console.error('Authenticator logout error', error);
-            }
-            void store.dispatch('account/logout');
-        };
-
-        function chainSelected(chain: Chain) {
-            if (isSelected(chain)) {
-                return;
-            }
-            // TODO: maybe we can reload vue store and boot files instead of full reload?
-            localStorage.setItem(
-                ConfigManager.CHAIN_LOCAL_STORAGE,
-                chain.getName(),
-            );
-
-            if (account.value) {
-                void logout();
-            }
-
-            location.reload();
+        function isChainSelected(chain: Chain): boolean {
+            return sessionStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE) === chain.getName();
         }
 
         onMounted(() => {
-            const currentChain = localStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE);
+            const currentChain = sessionStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE);
             if (currentChain === null) {
                 const chains = configMgr.getMainnets();
                 const telos = chains.filter(chain => chain.getName() === 'telos')[0];
-                chainSelected(telos);
+
+                if(!isChainSelected(telos)) {
+                    void router.push({
+                        path: route.path,
+                        query: { network: telos.getName() },
+                    });
+                }
             }
         });
 
         return {
             menuOpened,
             menuIcon,
-            mainnets,
-            testnets,
             chainSelected,
-            isSelected,
+            isChainSelected,
+            hasChainsInstalled,
         };
     },
 });
 </script>
 
 <template>
-<q-btn v-if="testnets.length > 0 || mainnets.length > 0" flat class="chain-button">
+<q-btn v-if="hasChainsInstalled" flat class="chain-button">
     <q-icon :name="menuIcon" size="md" />
     <q-menu v-model="menuOpened">
-        <q-list>
-            <div v-if="mainnets.length > 0" class="section-title">MAINNETS</div>
-            <q-item
-                v-for="(chain, index) in mainnets"
-                :key="`mainnet-${index}`"
-                v-ripple
-                :class="{ selected: isSelected(chain) }"
-                clickable
-                @click="chainSelected(chain)"
-            ><img class="sidebar-logo" :src="chain.getSmallLogoPath()">
-                <q-item-section>
-                    <div class="q-pl-md">{{ chain.getDisplay() }}</div>
-                </q-item-section>
-            </q-item>
-            <q-separator v-if="testnets.length > 0 && mainnets.length > 0" class="separator"/>
-            <div v-if="testnets.length > 0" class="section-title">TESTNETS</div>
-            <q-item
-                v-for="(chain, index) in testnets"
-                :key="`testnet-${index}`"
-                v-ripple
-                :class="{ selected: isSelected(chain) }"
-                clickable
-                @click="chainSelected(chain)"
-            >
-                <div class="testnet-logo-container">
-                    <img class="sidebar-logo sidebar-logo--testnet" :src="chain.getSmallLogoPath()">
-                    <div class="testnet-text">TESTNET</div>
-                </div>
-                <q-item-section>
-                    <div class="q-pl-md">{{ chain.getDisplay() }}</div>
-                </q-item-section>
-            </q-item>
-        </q-list>
+        <div class="chains-menu">
+            <ChainsListSelector
+                :on-chain-selected="chainSelected"
+                :is-chain-selected="isChainSelected"
+            />
+        </div>
     </q-menu>
 </q-btn>
 </template>
@@ -124,57 +72,6 @@ export default defineComponent({
 .chain-button
     padding: 0px 4px
 
-.q-item
-    &:hover, &.selected
-        background-color: var(--q-color-sidebar-selected)
-    padding-left: 16px
-    padding-top: 8px
-    width: 170px
-
-.q-list
-    padding-bottom: 8px
-    padding-top: 8px
-
-.separator
-    margin-top: .5rem
-    margin-bottom: .5rem
-    min-height: 1px
-    min-width: 0
-    width: 100%
-    background: var(--q-color-sidebar-selected)
-
-.sidebar-logo
-    height: auto
-    width: auto
-    max-height: 32px
-    max-width: 32px
-    object-fit: contain
-
-.section-title
-    padding-left: 16px
-    padding-top: 8px
-    padding-bottom: 8px
-    font-size: 10px
-
-.testnet-logo-container
-    position: relative
-    height: 32px
-    width: 32px
-
-.testnet-text, .sidebar-logo--testnet
-    position: absolute
-    margin: auto
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-
-.testnet-text
-    color: white
-    font-size: 6px
-    width: min-content
-    height: min-content
-    padding: 0 2px
-    border-radius: 2px
-    background-color: rgba(black, 0.6)
+.chains-menu
+    width: 170px !important
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 91f4f21f..026f25f2 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,20 +1,24 @@
 <script lang="ts">
+import ConfigManager from 'src/config/ConfigManager';
+import { computed } from 'vue';
+
 export default {
     name: 'AppFooter',
+    setup() {
+        const footerLinks = computed(() => ConfigManager.get().getCurrentChain().getUiCustomization().footerLinks);
+
+        return {
+            footerLinks,
+        };
+    },
 };
 </script>
 
 <template>
 
 <div class="row footer-background justify-center text-center q-py-md">
-    <div class="col-lg-1 col-md-2 col-sm-2 col-xs-4 q-pa-md">
-        <a class="no-dec" href="https://telos.net/legal">LEGAL</a>
-    </div>
-    <div class="col-lg-1 col-md-2 col-sm-2 col-xs-4 q-pa-md">
-        <a class="no-dec" href="https://telos.net/privacy-policy">PRIVACY</a>
-    </div>
-    <div class="col-lg-1 col-md-2 col-sm-2 col-xs-4 q-pa-md">
-        <a class="no-dec" href="https://github.com/telosnetwork/open-block-explorer">REPOSITORY</a>
+    <div v-for="footerLink in footerLinks" :key="footerLink.label" class="col-lg-1 col-md-2 col-sm-2 col-xs-4 q-pa-md">
+        <a class="no-dec" :href="footerLink.url">{{footerLink.label}}</a>
     </div>
 </div>
 
@@ -25,7 +29,7 @@ export default {
     text-decoration: none
     color: #ffffff
 .footer-background
-    background: var(--q-primary-linear-gradient)
+    background: var(--q-color-footer-background)
     backdrop-filter: blur(14px)
 .no-dec
     text-decoration: none
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 7430c75f..6ebae832 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,11 +1,13 @@
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, ref, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import LoginHandler from 'components/LoginHandler.vue';
 import HeaderSearch from 'components/HeaderSearch.vue';
 import ChainsMenu from 'components/ChainsMenu.vue';
-import { getChain } from 'src/config/ConfigManager';
+import ConfigManager, { getChain } from 'src/config/ConfigManager';
 import { useStore } from 'src/store';
+import { useRouteDataNetwork } from 'src/router';
+import { HeaderSettings } from 'src/types/UiCustomization';
 
 export default defineComponent({
     name: 'AppHeader',
@@ -16,17 +18,33 @@ export default defineComponent({
     },
     setup() {
         const $q = useQuasar();
-        const chain = getChain();
         const store = useStore();
+        const headerSettings = computed(() : HeaderSettings => ConfigManager.get().getCurrentChain().getUiCustomization().headerSettings);
+
         const account = computed(() => store.state.account.accountName);
         const isLarge = computed((): boolean => $q.screen.gt.sm);
         const showMultichainSelector = computed(() => process.env.SHOW_MULTICHAIN_SELECTOR === 'true');
 
+        const isTestnet = ref(getChain().isTestnet());
+        const smallLogoPath = ref(getChain().getSmallLogoPath());
+        const largeLogoPath = ref(getChain().getLargeLogoPath());
+
+        const network = useRouteDataNetwork();
+
+        watch(network, () => {
+            smallLogoPath.value = getChain().getSmallLogoPath();
+            largeLogoPath.value = getChain().getLargeLogoPath();
+            isTestnet.value = getChain().isTestnet();
+        });
+
         return {
+            headerSettings,
             account,
             isLarge: isLarge,
-            chain,
             showMultichainSelector,
+            smallLogoPath,
+            largeLogoPath,
+            isTestnet,
         };
     },
 });
@@ -40,12 +58,12 @@ export default defineComponent({
                 <div class="logo-header-container">
                     <div class="logo-chain-selector-container">
                         <a class="float-left" href="/">
-                            <img v-if="isLarge" class="logo" :src="chain.getLargeLogoPath()">
-                            <img v-else class="logo-token" :src="chain.getSmallLogoPath()">
+                            <img v-if="isLarge" class="logo" :src="largeLogoPath">
+                            <img v-else class="logo-token" :src="smallLogoPath">
                         </a>
                         <ChainsMenu v-if="showMultichainSelector"/>
                     </div>
-                    <div v-if="chain.isTestnet()" class="testnet-text">TESTNET</div>
+                    <div v-if="isTestnet" class="testnet-text">TESTNET</div>
                 </div>
             </div>
         </div>
@@ -58,7 +76,7 @@ export default defineComponent({
                 </div>
             </div>
         </div>
-        <LoginHandler/>
+        <LoginHandler v-if="!headerSettings.hideLoginHandler"/>
     </div>
     <div class="row justify-center col-12 q-pt-sm">
         <q-tabs
@@ -69,25 +87,28 @@ export default defineComponent({
             color="white"
         >
             <q-route-tab
+                v-if="!headerSettings.hideNetworkTab"
                 class="deactive"
                 name="network"
                 label="Network"
-                to="/"
+                to="/network"
             />
             <q-route-tab
-                v-if="account"
+                v-if="!headerSettings.hideWalletTab && account"
                 class="deactive"
                 name="wallet"
                 label="Wallet"
                 :to="'/account/' + account"
             />
             <q-route-tab
+                v-if="!headerSettings.hideVoteTab"
                 class="deactive"
                 name="vote"
                 label="Vote"
                 to="/vote"
             />
             <q-route-tab
+                v-if="!headerSettings.hideProposalTab"
                 class="deactive"
                 name="proposal"
                 label="Proposal"
diff --git a/src/components/LoginHandler.vue b/src/components/LoginHandler.vue
index 90b944b4..7eb2d404 100644
--- a/src/components/LoginHandler.vue
+++ b/src/components/LoginHandler.vue
@@ -5,6 +5,7 @@ import WalletModal from 'src/components/WalletModal.vue';
 import { Authenticator } from 'universal-authenticator-library';
 import { useStore } from 'src/store';
 import { getAuthenticators } from 'src/boot/ual';
+import { getChain } from 'src/config/ConfigManager';
 
 export default defineComponent({
     name: 'LoginHandler',
@@ -18,10 +19,10 @@ export default defineComponent({
         const account = computed(() => store.state.account.accountName);
 
         onMounted(() => {
-            const storedAccount = localStorage.getItem('account');
+            const storedAccount = localStorage.getItem('account_' + getChain().getChainId());
             if (storedAccount) {
                 void store.commit('account/setAccountName', storedAccount);
-                const ualName = localStorage.getItem('autoLogin');
+                const ualName = localStorage.getItem('autoLogin_' + getChain().getChainId());
                 const ual: Authenticator = authenticators.find(
                     a => a.getName() === ualName,
                 );
diff --git a/src/components/LoginHandlerDropdown.vue b/src/components/LoginHandlerDropdown.vue
index 892dcdf8..8d9ada8d 100644
--- a/src/components/LoginHandlerDropdown.vue
+++ b/src/components/LoginHandlerDropdown.vue
@@ -4,6 +4,7 @@ import WalletModal from 'src/components/WalletModal.vue';
 import { useStore } from 'src/store';
 import { getAuthenticators } from 'src/boot/ual';
 import { Authenticator } from 'universal-authenticator-library';
+import { getChain } from 'src/config/ConfigManager';
 
 export default defineComponent({
     name: 'LoginHandlerDropdown',
@@ -15,7 +16,7 @@ export default defineComponent({
         const showModal = ref(false);
 
         const getAuthenticator = (): Authenticator => {
-            const wallet = localStorage.getItem('autoLogin');
+            const wallet = localStorage.getItem('autoLogin_' + getChain().getChainId());
             const authenticator = authenticators.find(
                 auth => auth.getName() === wallet,
             );
@@ -65,7 +66,7 @@ export default defineComponent({
                 <q-btn
                     class="full-width"
                     color="primary"
-                    label="Disconect"
+                    label="Disconnect"
                     @click="onLogout"
                 />
             </div>
diff --git a/src/components/TransactionsTable.vue b/src/components/TransactionsTable.vue
index 2431e8c0..302fd245 100644
--- a/src/components/TransactionsTable.vue
+++ b/src/components/TransactionsTable.vue
@@ -137,7 +137,7 @@ export default defineComponent({
             rowsNumber: 10000,
         });
 
-        const enableLiveTransactions = ref<boolean>(true);
+        const enableLiveTransactions = ref<boolean>(props.toggleEnabled);
         const currentFirstAction = ref<number>(0);
 
         // actions filter
diff --git a/src/components/WorldMap.vue b/src/components/WorldMap.vue
index 6a3d6cab..68537674 100644
--- a/src/components/WorldMap.vue
+++ b/src/components/WorldMap.vue
@@ -22,74 +22,6 @@ import { useStore } from 'src/store';
 import VectorImageLayer from 'ol/layer/VectorImage';
 import { getCssVar } from 'quasar';
 
-// Map core style
-const style = new Style({
-    image: new CircleStyle({
-        fill: new Fill({
-            color: '#FFFFFF'
-        }),
-        radius: 5
-    }),
-    fill: new Fill({
-        color: getCssVar('color-map')
-    }),
-    stroke: new Stroke({
-        color: getCssVar('color-map'),
-        width: 1
-    }),
-    zIndex: 50
-});
-
-// BP location feature style with zIndex biggetr that map
-const producerStyle = new Style({
-    image: new CircleStyle({
-        fill: new Fill({
-            color: '#8276d2'
-        }),
-        stroke: new Stroke({
-            color: '#63C9EF',
-            width: 3
-        }),
-        radius: 5
-    }),
-    zIndex: 51
-});
-
-const top21Style = new Style({
-    image: new CircleStyle({
-        fill: new Fill({
-            color: '#8276d2'
-        }),
-        stroke: new Stroke({
-            color: '#FFFFFF',
-            width: 3
-        }),
-        radius: 5
-    }),
-    zIndex: 51
-});
-
-// Map source uses vectorLayer with vector source
-const source = new VectorSource({
-    wrapX: false,
-    url: 'https://openlayers.org/data/vector/ecoregions.json',
-    format: new GeoJSON()
-});
-
-const vectorLayer = new VectorImageLayer({
-    imageRatio: 1,
-    source: source,
-    style: style
-});
-
-const vectorSource = new VectorSource({
-    wrapX: false
-});
-
-const vector = new VectorLayer({
-    source: vectorSource
-});
-
 export default defineComponent({
     name: 'WorldMap',
     components: {
@@ -142,6 +74,74 @@ export default defineComponent({
     async mounted() {
         await this.updateBpList();
 
+        // ---- Map Styles ----
+        const style = new Style({
+            image: new CircleStyle({
+                fill: new Fill({
+                    color: '#FFFFFF'
+                }),
+                radius: 5
+            }),
+            fill: new Fill({
+                color: getCssVar('color-map')
+            }),
+            stroke: new Stroke({
+                color: getCssVar('color-map'),
+                width: 1
+            }),
+            zIndex: 50
+        });
+
+        // BP location feature style with zIndex biggetr that map
+        const producerStyle = new Style({
+            image: new CircleStyle({
+                fill: new Fill({
+                    color: '#8276d2'
+                }),
+                stroke: new Stroke({
+                    color: '#63C9EF',
+                    width: 3
+                }),
+                radius: 5
+            }),
+            zIndex: 51
+        });
+
+        const top21Style = new Style({
+            image: new CircleStyle({
+                fill: new Fill({
+                    color: '#8276d2'
+                }),
+                stroke: new Stroke({
+                    color: '#FFFFFF',
+                    width: 3
+                }),
+                radius: 5
+            }),
+            zIndex: 51
+        });
+
+        // Map source uses vectorLayer with vector source
+        const source = new VectorSource({
+            wrapX: false,
+            url: 'https://openlayers.org/data/vector/ecoregions.json',
+            format: new GeoJSON()
+        });
+
+        const vectorLayer = new VectorImageLayer({
+            imageRatio: 1,
+            source: source,
+            style: style
+        });
+
+        const vectorSource = new VectorSource({
+            wrapX: false
+        });
+
+        const vector = new VectorLayer({
+            source: vectorSource
+        });
+
         // ---- Overlay ----
         const container = this.$refs['popup'] as any;
         const content = this.$refs['popup-content'] as any;
diff --git a/src/components/resources/BuyRam.vue b/src/components/resources/BuyRam.vue
index 99b36d17..ff1cf88d 100644
--- a/src/components/resources/BuyRam.vue
+++ b/src/components/resources/BuyRam.vue
@@ -101,7 +101,7 @@ export default defineComponent({
                 });
             }
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }
diff --git a/src/components/resources/RefundTab.vue b/src/components/resources/RefundTab.vue
index c8d625c5..78d0e875 100644
--- a/src/components/resources/RefundTab.vue
+++ b/src/components/resources/RefundTab.vue
@@ -6,6 +6,7 @@ import { mapActions } from 'vuex';
 import ViewTransaction from 'src/components/ViewTransanction.vue';
 import { API } from '@greymass/eosio';
 import { formatCurrency } from 'src/utils/string-utils';
+import { getChain } from 'src/config/ConfigManager';
 
 export default defineComponent({
     name: 'RefundTab',
@@ -120,7 +121,7 @@ export default defineComponent({
             }
             await this.loadAccountData();
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 this.openTransaction = true;
             }
         },
diff --git a/src/components/resources/SellRam.vue b/src/components/resources/SellRam.vue
index ea9311dd..bcaa79c4 100644
--- a/src/components/resources/SellRam.vue
+++ b/src/components/resources/SellRam.vue
@@ -51,7 +51,7 @@ export default defineComponent({
                 amount: sellAmount.value,
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }
diff --git a/src/components/resources/StakeTab.vue b/src/components/resources/StakeTab.vue
index 46005fff..5d270ac0 100644
--- a/src/components/resources/StakeTab.vue
+++ b/src/components/resources/StakeTab.vue
@@ -97,7 +97,7 @@ export default defineComponent({
                         : `0.0000 ${symbol}`,
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 this.openTransaction = true;
             }
         },
diff --git a/src/components/resources/UnstakeTab.vue b/src/components/resources/UnstakeTab.vue
index 0dbb4080..89a08bbe 100644
--- a/src/components/resources/UnstakeTab.vue
+++ b/src/components/resources/UnstakeTab.vue
@@ -159,7 +159,7 @@ export default defineComponent({
                         : `0.0000 ${symbol}`,
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 this.openTransaction = true;
             }
         },
diff --git a/src/components/staking/SavingsTab.vue b/src/components/staking/SavingsTab.vue
index 17363a71..2490eaa2 100644
--- a/src/components/staking/SavingsTab.vue
+++ b/src/components/staking/SavingsTab.vue
@@ -4,6 +4,7 @@ import { useStore } from 'src/store';
 import ViewTransaction from 'src/components/ViewTransanction.vue';
 import { API } from '@greymass/eosio';
 import { assetToAmount, formatNumberWithCommas } from 'src/utils/string-utils';
+import { getChain } from 'src/config/ConfigManager';
 
 export default defineComponent({
     name: 'SavingsTab',
@@ -61,7 +62,7 @@ export default defineComponent({
                 amount: toSavingAmount.value || '0',
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }
@@ -79,7 +80,7 @@ export default defineComponent({
                 amount: fromSavingAmount.value || '0',
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }
diff --git a/src/components/staking/StakeFromResources.vue b/src/components/staking/StakeFromResources.vue
index ac0d74fd..78e9cebc 100644
--- a/src/components/staking/StakeFromResources.vue
+++ b/src/components/staking/StakeFromResources.vue
@@ -68,7 +68,7 @@ export default defineComponent({
                 netAmount: netTokens.value || '0',
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }
@@ -83,7 +83,7 @@ export default defineComponent({
                 netAmount: netWithdraw.value || '0',
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }
diff --git a/src/components/staking/StakingTab.vue b/src/components/staking/StakingTab.vue
index 05a913f3..354a93da 100644
--- a/src/components/staking/StakingTab.vue
+++ b/src/components/staking/StakingTab.vue
@@ -63,7 +63,7 @@ export default defineComponent({
                 amount: stakeTokens.value,
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }
diff --git a/src/components/staking/UnstakingTab.vue b/src/components/staking/UnstakingTab.vue
index 924c1d35..2a79fee5 100644
--- a/src/components/staking/UnstakingTab.vue
+++ b/src/components/staking/UnstakingTab.vue
@@ -55,7 +55,7 @@ export default defineComponent({
                 amount: unstakeTokens.value,
             });
 
-            if (localStorage.getItem('autoLogin') !== 'cleos') {
+            if (localStorage.getItem('autoLogin_' + getChain().getChainId()) !== 'cleos') {
                 openTransaction.value = true;
             }
         }
diff --git a/src/components/transaction/DataFormat.vue b/src/components/transaction/DataFormat.vue
index f380bffe..a8b5893a 100644
--- a/src/components/transaction/DataFormat.vue
+++ b/src/components/transaction/DataFormat.vue
@@ -29,7 +29,7 @@ export default defineComponent({
         const transferData = computed(() => actionData.value as TransferData);
         const clientHeight = computed(() => dataBox.value?.clientHeight ?? 0);
         let currentData = ref<string | unknown>(null);
-        const maxHeight = 57; // the maximum row height
+        const maxHeight = 65; // the maximum row height
         const switchHeight = 20;
         const maxHeightStyle = `calc(${maxHeight}px - ${switchHeight}px)`;
 
diff --git a/src/config/BaseChain.ts b/src/config/BaseChain.ts
index c27c7628..fe34f1a2 100644
--- a/src/config/BaseChain.ts
+++ b/src/config/BaseChain.ts
@@ -3,6 +3,69 @@ import { RpcEndpoint } from 'universal-authenticator-library';
 import { PriceChartData } from 'src/types/PriceChartData';
 import { Theme } from 'src/types/Theme';
 import { Token } from 'src/types';
+import { UiCustomization } from 'src/types/UiCustomization';
+
+export const DEFAULT_THEME = {
+    primary: '#11589e',
+    secondary: '#5d5d5d',
+    accent: '#9C27B0',
+    dark: '#1d1d1d',
+    'dark-page': '#121212',
+    positive: '#21BA45',
+    negative: '#C10015',
+    info: '#31CCEC',
+    warning: '#F2C037',
+    'color-map': '#8C8C8C',
+    'color-sidebar-selected': '#d1d1d1',
+    'color-primary-gradient': 'linear-gradient(90deg, #5d5d5d 0%, #5d5d5d 100%)',
+    'color-secondary-gradient': 'linear-gradient(180deg, #5d5d5d 0%, #5d5d5d 147.34%)',
+    'color-tertiary-gradient': 'linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)',
+    'color-progress-gradient': '#11589e',
+    'color-producer-card-background': '#f0f0f0',
+    'color-select-box-background': '#e9e9e9',
+    'color-separator-background': 'rgba(138, 101, 212, 0.1)',
+    'color-card-shadow': 'rgba(37, 42, 97, 0.3)',
+    'color-dropdown-card': '#172c6c',
+    'color-header-background': '#4C4C4C',
+    'color-header-text': '#FFFFFF',
+    'color-header-border': '#777777',
+    'color-header-support-background': 'linear-gradient(180deg, #4C4C4C 0%, #3B3B3B 147.34%)',
+    'color-graph-shadow': '#3f65c228',
+    'color-footer-background': '#000000',
+};
+
+export const baseUiConfiguration: UiCustomization = {
+    footerLinks: [
+        { label: 'LEGAL', url: 'https://telos.net/legal' },
+        { label: 'PRIVACY', url: 'https://telos.net/privacy-policy' },
+        { label: 'REPOSITORY', url: 'https://github.com/telosnetwork/open-block-explorer' },
+    ],
+    headerSettings: {
+        hideLoginHandler: false,
+
+        hideNetworkTab: false,
+        hideWalletTab: false,
+        hideVoteTab: false,
+        hideProposalTab: false,
+    },
+    accountPageSettings: {
+        hideCpuInfo: false,
+        hideNetInfo: false,
+        hideRamInfo: false,
+        hideRexInfo: false,
+        hideRefundingInfo: false,
+        hideDelegatedInfo: false,
+
+        hideResourcesControl: false,
+        hideRexControl: false,
+
+        hideTransactionTab: false,
+        hideTokensTab: false,
+        hideKeysTab: false,
+        hideChildrenTab: false,
+        hideContractsTab: false,
+    },
+};
 
 export default abstract class BaseChain implements Chain {
   protected name: string;
@@ -35,6 +98,11 @@ export default abstract class BaseChain implements Chain {
   abstract getUsdPrice(): Promise<number>;
   abstract getMapDisplay(): boolean;
   abstract getTheme(): Theme;
+
+  getUiCustomization(): UiCustomization {
+      return baseUiConfiguration;
+  }
+
   abstract getFiltersSupported(prop: string): boolean;
 
   isTestnet(): boolean {
diff --git a/src/config/ConfigManager.ts b/src/config/ConfigManager.ts
index 61a8fbbf..4bfb994a 100644
--- a/src/config/ConfigManager.ts
+++ b/src/config/ConfigManager.ts
@@ -1,79 +1,108 @@
 import chainsConfig from 'src/config/configuredChains';
 import { Chain } from 'src/types/Chain';
-import { LocalStorage } from 'quasar';
 
 export function getChain(): Chain {
     return ConfigManager.get().getCurrentChain();
 }
 
 export default class ConfigManager {
-  public static CHAIN_LOCAL_STORAGE = 'selectedChainName';
-  private static thisManager: ConfigManager;
-  private testnets: Chain[];
-  private mainnets: Chain[];
-  private currentChain: Chain;
-
-  public constructor() {
-      this.init();
-  }
-
-  private init(): void {
-      const showMultichainSelector = process.env.SHOW_MULTICHAIN_SELECTOR;
-      const configuredChain = process.env.CHAIN_NAME;
-      this.testnets = chainsConfig.testnets;
-      this.mainnets = chainsConfig.mainnets;
-      if (showMultichainSelector) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-          const userConfiguredChain = this.getSelectedChain();
-
-          if (userConfiguredChain) {
-              this.currentChain = this.findChain(userConfiguredChain);
-
-              if (!this.currentChain) {
-                  this.currentChain = this.findChain(configuredChain);
-              }
-          } else {
-              this.currentChain = this.findChain(configuredChain);
-          }
-      } else {
-          this.currentChain = this.findChain(configuredChain);
-      }
-  }
-
-  public static get(): ConfigManager {
-      if (!ConfigManager.thisManager) {
-          ConfigManager.thisManager = new ConfigManager();
-      }
-
-      return ConfigManager.thisManager;
-  }
-
-  public getCurrentChain(): Chain {
-      return this.currentChain;
-  }
-
-  private getSelectedChain(): string {
-      return LocalStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE);
-  }
-
-  public getAllChains(): Chain[] {
-      return this.mainnets.concat(this.testnets);
-  }
-
-  public getMainnets(): Chain[] {
-      return this.mainnets;
-  }
-
-  public getTestnets(): Chain[] {
-      return this.testnets;
-  }
-
-  private findChain(chainName: string) {
-      const fromMainnet = this.mainnets.find(c => c.getName() === chainName);
-      if (fromMainnet) {
-          return fromMainnet;
-      }
-
-      return this.testnets.find(c => c.getName() === chainName);
-  }
+    public static CHAIN_LOCAL_STORAGE = 'selectedChainName';
+    public static PREFERRED_CHAIN_LOCAL_STORAGE = 'preferredChainName';
+    private static thisManager: ConfigManager;
+    private testnets: Chain[];
+    private mainnets: Chain[];
+    private currentChain: Chain;
+
+    public constructor() {
+        this.init();
+    }
+
+    private init(): void {
+        const showMultichainSelector = process.env.SHOW_MULTICHAIN_SELECTOR === 'true';
+        const configuredChain = process.env.CHAIN_NAME;
+        this.testnets = chainsConfig.testnets;
+        this.mainnets = chainsConfig.mainnets;
+        if (showMultichainSelector) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            const userConfiguredChain = this.getSelectedChain();
+
+            if (userConfiguredChain) {
+                this.currentChain = this.findChain(userConfiguredChain);
+
+                if (!this.currentChain) {
+                    this.currentChain = this.findChain(configuredChain);
+                }
+            } else {
+                this.currentChain = this.findChain(configuredChain);
+            }
+        } else {
+            this.currentChain = this.findChain(configuredChain);
+        }
+    }
+
+    public static get(): ConfigManager {
+        if (!ConfigManager.thisManager) {
+            ConfigManager.thisManager = new ConfigManager();
+        }
+
+        return ConfigManager.thisManager;
+    }
+
+    public getCurrentChain(): Chain {
+        return this.currentChain;
+    }
+
+    private getSelectedChain(): string {
+        return sessionStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE);
+    }
+
+    public setCurrentChain(chain: Chain): boolean {
+        if (!this.findChain(chain.getName())) {
+            return false;
+        }
+        sessionStorage.setItem(
+            ConfigManager.CHAIN_LOCAL_STORAGE,
+            chain.getName(),
+        );
+        this.currentChain = chain;
+        return true;
+    }
+
+    public getPreferredChain(): string {
+        return localStorage.getItem(ConfigManager.PREFERRED_CHAIN_LOCAL_STORAGE);
+    }
+
+    public setPreferredChain(chain: Chain): boolean {
+        if (!this.findChain(chain.getName())) {
+            return false;
+        }
+        localStorage.setItem(
+            ConfigManager.PREFERRED_CHAIN_LOCAL_STORAGE,
+            chain.getName(),
+        );
+        return true;
+    }
+
+    public getAllChains(): Chain[] {
+        return this.mainnets.concat(this.testnets);
+    }
+
+    public getMainnets(): Chain[] {
+        return this.mainnets;
+    }
+
+    public getTestnets(): Chain[] {
+        return this.testnets;
+    }
+
+    private findChain(chainName: string) {
+        const fromMainnet = this.mainnets.find(
+            c => c.getName() === chainName,
+        );
+        if (fromMainnet) {
+            return fromMainnet;
+        }
+
+        return this.testnets.find(c => c.getName() === chainName);
+    }
 }
diff --git a/src/config/chains/eos/index.ts b/src/config/chains/eos/index.ts
index dc8e0393..77b9e666 100644
--- a/src/config/chains/eos/index.ts
+++ b/src/config/chains/eos/index.ts
@@ -31,7 +31,7 @@ const FUEL_RPC_ENDPOINT = {
 };
 const API_ENDPOINT = 'https://example.com';
 const S3_PRODUCER_BUCKET = 'https://telos-producer-validation.s3.amazonaws.com';
-const DISPLAY_MAP = true;
+const DISPLAY_MAP = false;
 const THEME = {
     primary: '#28417c',
     secondary: '#000000', //disso
@@ -52,6 +52,7 @@ const THEME = {
     'color-header-border': '#444',
     'color-header-support-background': '#000',
     'color-graph-shadow': '#3f65c228',
+    'color-footer-background': '#000000',
 };
 
 // create vars for map colors (border, backround, countries, popup, text, popup)
diff --git a/src/config/chains/jungle/index.ts b/src/config/chains/jungle/index.ts
index 1f55311e..56df1ada 100644
--- a/src/config/chains/jungle/index.ts
+++ b/src/config/chains/jungle/index.ts
@@ -33,15 +33,15 @@ const TOKEN = {
     amount: 0,
     contract: 'eosio.token',
 } as Token;
-const HYPERION_ENDPOINT = 'https://jungle.eosusa.news';
+const HYPERION_ENDPOINT = 'https://jungle4.cryptolions.io';
 const S3_PRODUCER_BUCKET = 'https://telos-producer-validation.s3.amazonaws.com';
 const RPC_ENDPOINT = {
     protocol: 'https',
     host: 'jungle.eosusa.news',
     port: 443,
 };
-const API_ENDPOINT = 'https://example.com';
-const DISPLAY_MAP = true;
+const API_ENDPOINT = 'https://jungle4.cryptolions.io';
+const DISPLAY_MAP = false;
 const THEME = {
     primary: '#28417c',
     secondary: '#000000', //disso
@@ -62,6 +62,7 @@ const THEME = {
     'color-header-border': '#444',
     'color-header-support-background': '#000',
     'color-graph-shadow': '#3f65c228',
+    'color-footer-background': '#000000',
 };
 
 export default class TelosTestnet extends BaseChain {
diff --git a/src/config/chains/telos-testnet/index.ts b/src/config/chains/telos-testnet/index.ts
index b4c73392..cf3f5bfc 100644
--- a/src/config/chains/telos-testnet/index.ts
+++ b/src/config/chains/telos-testnet/index.ts
@@ -64,6 +64,7 @@ const THEME = {
     'color-header-border': '#8a65d41a',
     'color-header-support-background': 'linear-gradient(180deg, #071A5F 0%, #571aff 147.34%)',
     'color-graph-shadow': '#571aff28',
+    'color-footer-background': '#071A5F',
 };
 
 export default class TelosTestnet extends BaseChain {
diff --git a/src/config/chains/telos/index.ts b/src/config/chains/telos/index.ts
index fff3ab3d..9b036be7 100644
--- a/src/config/chains/telos/index.ts
+++ b/src/config/chains/telos/index.ts
@@ -71,6 +71,7 @@ const THEME = {
     'color-header-border': '#8a65d41a',
     'color-header-support-background': 'linear-gradient(180deg, #071A5F 0%, #571aff 147.34%)',
     'color-graph-shadow': '#571aff28',
+    'color-footer-background': '#071A5F',
 };
 
 export default class Telos extends BaseChain {
diff --git a/src/config/chains/ux/index.ts b/src/config/chains/ux/index.ts
index 1e6dfb99..b4f6d819 100644
--- a/src/config/chains/ux/index.ts
+++ b/src/config/chains/ux/index.ts
@@ -23,7 +23,7 @@ const RPC_ENDPOINT = {
 };
 const API_ENDPOINT = 'https://example.com';
 const S3_PRODUCER_BUCKET = 'https://telos-producer-validation.s3.amazonaws.com';
-const DISPLAY_MAP = true;
+const DISPLAY_MAP = false;
 const THEME = {};
 
 export default class UX extends BaseChain {
diff --git a/src/config/chains/wax/index.ts b/src/config/chains/wax/index.ts
index 9cfbc6ed..077af1db 100644
--- a/src/config/chains/wax/index.ts
+++ b/src/config/chains/wax/index.ts
@@ -26,7 +26,7 @@ const RPC_ENDPOINT = {
 };
 const API_ENDPOINT = 'https://example.com';
 const S3_PRODUCER_BUCKET = 'https://telos-producer-validation.s3.amazonaws.com';
-const DISPLAY_MAP = true;
+const DISPLAY_MAP = false;
 const THEME = {};
 
 export default class EOS extends BaseChain {
diff --git a/src/css/quasar.variables.sass b/src/css/quasar.variables.sass
index af358c46..3cb5cc93 100644
--- a/src/css/quasar.variables.sass
+++ b/src/css/quasar.variables.sass
@@ -28,4 +28,6 @@ $warning   : #F2C037
   --q-color-header-border: #777777
   --q-color-header-support-background: linear-gradient(180deg, #4C4C4C 0%, #3B3B3B 147.34%)
   --q-color-graph-shadow: #3f65c228
+
+  --q-color-footer-background: #4C4C4C
   
diff --git a/src/index.template.html b/src/index.template.html
index 0022987e..3bc09f8d 100644
--- a/src/index.template.html
+++ b/src/index.template.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Block Explorer</title>
+    <title>Open Block Explorer</title>
 
     <meta charset="utf-8">
     <meta name="description" content="<%= productDescription %>">
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 6be106f7..8f8a8dad 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,14 +1,56 @@
 <script lang="ts">
 import AppFooter from 'components/Footer.vue';
 import AppHeader from 'components/Header.vue';
+import { setCssVar } from 'quasar';
+import { getChain } from 'src/config/ConfigManager';
+import { themeProps } from 'src/types/Theme';
+import { DEFAULT_THEME } from 'src/config/BaseChain';
+import { defineComponent, onMounted, watch } from 'vue';
+import { useRouteDataNetwork } from 'src/router';
 
-export default {
+export default defineComponent({
     name: 'MainLayout',
     components: {
         AppHeader,
         AppFooter,
     },
-};
+    setup() {
+        const networkChain = useRouteDataNetwork();
+
+        function setTheme(): void {
+            const theme = getChain().getTheme();
+            for (let themeVar of themeProps) {
+                if (theme[themeVar]) {
+                    setCssVar(themeVar, theme[themeVar]);
+                } else {
+                    setCssVar(themeVar, DEFAULT_THEME[themeVar]);
+                }
+            }
+        }
+
+        function setMetaData(): void {
+            const chainName = getChain().getName();
+            let link = document.querySelector('link[rel~="icon"]');
+            (link as HTMLLinkElement).href = `chains/${chainName}/favicon.png`;
+
+            document.title = chainName;
+        }
+
+        watch(networkChain, () => {
+            setTheme();
+            setMetaData();
+        });
+
+        onMounted(() => {
+            setTheme();
+            setMetaData();
+        });
+
+        return {
+            networkChain,
+        };
+    },
+});
 </script>
 
 <template>
diff --git a/src/pages/Account.vue b/src/pages/Account.vue
index 05f27d88..89d1ce86 100644
--- a/src/pages/Account.vue
+++ b/src/pages/Account.vue
@@ -9,6 +9,7 @@ import ContractTabs from 'components/contract/ContractTabs.vue';
 import { api } from 'src/api';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'src/store';
+import ConfigManager from 'src/config/ConfigManager';
 
 export default defineComponent({
     name: 'AccountPage',
@@ -24,6 +25,8 @@ export default defineComponent({
         const store = useStore();
         const route = useRoute();
         const router = useRouter();
+        const accountPageSettings = computed(() => ConfigManager.get().getCurrentChain().getUiCustomization().accountPageSettings);
+
         const tab = ref<string>((route.query['tab'] as string) || 'transactions');
         const account = computed(() => (route.params.account as string) || '');
         const abi = computed(() => store.state.account.abi.abi);
@@ -47,6 +50,7 @@ export default defineComponent({
             account,
             abi,
             tokenList,
+            accountPageSettings,
         };
     },
 });
@@ -59,27 +63,27 @@ export default defineComponent({
             <AccountCard class="account-card" :account="account" :tokens="tokenList"/>
         </div>
         <q-tabs v-model="tab" class="account-view tabs" no-caps>
-            <q-tab name="transactions" label="Transactions"/>
-            <q-tab v-if="abi" name="contract" label="Contract"/>
-            <q-tab name="tokens" label="Tokens"/>
-            <q-tab name="keys" label="Keys"/>
-            <q-tab name="children" label="Children"/>
+            <q-tab v-if="!accountPageSettings.hideTransactionTab" name="transactions" label="Transactions"/>
+            <q-tab v-if="!accountPageSettings.hideContractsTab && abi" name="contract" label="Contract"/>
+            <q-tab v-if="!accountPageSettings.hideTokensTab" name="tokens" label="Tokens"/>
+            <q-tab v-if="!accountPageSettings.hideKeysTab" name="keys" label="Keys"/>
+            <q-tab v-if="!accountPageSettings.hideChildrenTab" name="children" label="Children"/>
         </q-tabs>
     </div>
     <q-tab-panels v-model="tab" class="col-12">
-        <q-tab-panel name="transactions">
+        <q-tab-panel v-if="!accountPageSettings.hideTransactionTab" name="transactions">
             <TransactionsTable :account="account" :showTransferLabel="true" :show-pagination-extras="true" />
         </q-tab-panel>
-        <q-tab-panel v-if="abi" name="contract">
+        <q-tab-panel v-if="!accountPageSettings.hideContractsTab && abi" name="contract">
             <ContractTabs/>
         </q-tab-panel>
-        <q-tab-panel name="tokens">
+        <q-tab-panel v-if="!accountPageSettings.hideTokensTab" name="tokens">
             <TokensPanel :account="account"/>
         </q-tab-panel>
-        <q-tab-panel name="keys">
+        <q-tab-panel v-if="!accountPageSettings.hideKeysTab" name="keys">
             <KeysPanel :account="account"/>
         </q-tab-panel>
-        <q-tab-panel name="children">
+        <q-tab-panel v-if="!accountPageSettings.hideChildrenTab" name="children">
             <ChildrenPanel :account="account"/>
         </q-tab-panel>
     </q-tab-panels>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
new file mode 100644
index 00000000..9dcc4b53
--- /dev/null
+++ b/src/pages/Home.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import ChainsListSelector from 'src/components/ChainsListSelector.vue';
+import ConfigManager from 'src/config/ConfigManager';
+import { Chain } from 'src/types/Chain';
+
+export default defineComponent({
+    name: 'HomePage',
+    components: {
+        ChainsListSelector,
+    },
+    setup() {
+        function onChainSelected(chain: Chain) {
+            ConfigManager.get().setPreferredChain(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">
+        <ChainsListSelector :on-chain-selected="onChainSelected" />
+    </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/Network.vue b/src/pages/Network.vue
index 8a270cf1..da2f4018 100644
--- a/src/pages/Network.vue
+++ b/src/pages/Network.vue
@@ -131,7 +131,7 @@ export default defineComponent({
         <div v-if="mapDisplay && !showMap" class="col-12 map-data-position">
             <MapData :mapVisible="showMap" />
         </div>
-        <PriceChart v-if='mapDisplay' class="price-box-position" :class="{'overlap-map' : mapDisplay && showMap}"/>
+        <PriceChart class="price-box-position" :class="{'overlap-map' : mapDisplay && showMap}"/>
         <TransactionsTable/>
     </div>
 </div>
diff --git a/src/pages/TransactionPage.vue b/src/pages/TransactionPage.vue
index 3f2fc49b..6a5db67a 100644
--- a/src/pages/TransactionPage.vue
+++ b/src/pages/TransactionPage.vue
@@ -103,7 +103,7 @@ export default defineComponent({
             <q-separator color="grey-8"/>
             <q-tab-panels v-model="tab" class="tab-panel">
                 <q-tab-panel name="actions">
-                    <TransactionsTable :account="Array.isArray(transaction) ? transaction[0] : transaction" />
+                    <TransactionsTable :account="Array.isArray(transaction) ? transaction[0] : transaction" :toggleEnabled="false" />
                 </q-tab-panel>
                 <q-tab-panel name="traces" class="container-max-width">
                     <TraceTree/>
diff --git a/src/router/index.ts b/src/router/index.ts
index 21b3554d..52c66058 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,6 +2,10 @@ import { route } from 'quasar/wrappers';
 import { createRouter, createWebHistory } from 'vue-router';
 import { StateInterface } from 'src/store';
 import routes from 'src/router/routes';
+import ConfigManager from 'src/config/ConfigManager';
+import { ComputedRef, computed, reactive } from 'vue';
+
+const configMgr = ConfigManager.get();
 
 /*
  * If not building with SSR mode, you can
@@ -12,6 +16,15 @@ import routes from 'src/router/routes';
  * with the Router instance.
  */
 
+const routeData = reactive({ network: '' });
+
+const updateSelectedChain = (chainName: string) => {
+    const chains = configMgr.getAllChains();
+    const chain = chains.filter(chain => chain.getName() === chainName)[0];
+    routeData.network = chain.getName();
+    configMgr.setCurrentChain(chain);
+};
+
 export default route<StateInterface>(function (/* { store, ssrContext } */) {
     const createHistory = createWebHistory;
     const Router = createRouter({
@@ -23,5 +36,86 @@ export default route<StateInterface>(function (/* { store, ssrContext } */) {
         history: createHistory(process.env.VUE_ROUTER_BASE),
     });
 
+    Router.beforeEach((to, from) => {
+        const chains = configMgr.getAllChains();
+        const selectedChainOnStore = sessionStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE);
+        const preferredChainName = configMgr.getPreferredChain();
+        const isMultichain = process.env.SHOW_MULTICHAIN_SELECTOR === 'true';
+
+        if(isMultichain) {
+            if (to.path === '/') { // if attempting to go to home page
+                if (to.query.network) { // if there is network param, proceed to network with the param
+                    return ({
+                        path: 'network',
+                        query: to.query,
+                    });
+                } else if (selectedChainOnStore) { // if there is no network param and local storage has current network
+                    return ({
+                        path: 'network',
+                        query: {
+                            network: selectedChainOnStore,
+                        },
+                    });
+                } else if (preferredChainName) { // if there is no network param and local storage has preferred network selected
+                    updateSelectedChain(preferredChainName);
+                    return ({
+                        path: 'network',
+                        query: {
+                            network: preferredChainName,
+                        },
+                    });
+                }
+                // else, will proceed to home page
+            } else {
+                if (!to.query.network) { // if doesn't have network param
+                    if (selectedChainOnStore) {
+                        return ({
+                            ...to,
+                            query: {
+                                ...to.query,
+                                network: selectedChainOnStore,
+                            },
+                        });
+                    } else if (preferredChainName) { // if has a preferred chain selected on sotre
+                        updateSelectedChain(preferredChainName);
+                        return ({
+                            ...to,
+                            query: {
+                                ...to.query,
+                                network: preferredChainName,
+                            },
+                        });
+                    } else { // if doesn't have a preferred chain selected on store, go to home page (landing page)
+                        return ({
+                            path: '/',
+                        });
+                    }
+                } else if (chains.filter(chain => chain.getName() === to.query.network).length === 0) { // check if the network is not part of the system
+                    if (preferredChainName) { // if has a preferred chain selected on sotre
+                        updateSelectedChain(preferredChainName);
+                        return ({
+                            ...to,
+                            query: {
+                                ...to.query,
+                                network: preferredChainName,
+                            },
+                        });
+                    } else { // if doesn't have a preferred chain selected on store, go to home page (landing page)
+                        return ({
+                            path: '/',
+                        });
+                    }
+                } else if ((from.query.network && from.query.network !== to.query.network) || selectedChainOnStore !== to.query.network) { // if i'm changing from network
+                    updateSelectedChain(Array.isArray(to.query.network) ? to.query.network[0] : to.query.network);
+                    setTimeout(() => location.reload(), 500);
+                }
+            }
+        }
+    });
+
     return Router;
 });
+
+export function useRouteDataNetwork(): ComputedRef<string> {
+    return computed(() => routeData.network);
+}
diff --git a/src/router/routes.ts b/src/router/routes.ts
index a3cf8e6f..f3b8e3ea 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,11 +1,19 @@
 import { RouteRecordRaw } from 'vue-router';
 
+const isMultichain = process.env.SHOW_MULTICHAIN_SELECTOR === 'true';
+
 const routes: RouteRecordRaw[] = [
     {
         path: '/',
         name: 'home',
-        component: () => import('layouts/MainLayout.vue'),
-        children: [{ path: '', component: () => import('pages/Network.vue') }],
+        component: () => import('pages/Home.vue'),
+        beforeEnter:(to, from, next) => {
+            if (!isMultichain) {
+                next('/network');
+            } else {
+                next();
+            }
+        },
     },
     {
         path: '/account/:account',
diff --git a/src/store/account/actions.ts b/src/store/account/actions.ts
index d8d5dda5..3da93bcd 100644
--- a/src/store/account/actions.ts
+++ b/src/store/account/actions.ts
@@ -35,21 +35,22 @@ export const actions: ActionTree<AccountStateInterface, StateInterface> = {
             commit('setUser', account);
             commit('setIsAuthenticated', true);
             commit('setAccountName', accountName);
+            commit('setChainId', (authenticator as Authenticator).chains[0].chainId);
 
-            localStorage.setItem('account', accountName);
+            localStorage.setItem(`account_${(authenticator as Authenticator).chains[0].chainId}`, accountName);
             localStorage.setItem(
-                'autoLogin',
+                `autoLogin_${(authenticator as Authenticator).chains[0].chainId}`,
                 (authenticator as Authenticator).getName(),
             );
         }
     },
-    logout({ commit }) {
+    logout({ commit, state }) {
         commit('setIsAuthenticated', false);
         commit('setAccountName', '');
         commit('setUser', null);
 
-        localStorage.removeItem('account');
-        localStorage.removeItem('autoLogin');
+        localStorage.removeItem(`account_${state.chainId}`);
+        localStorage.removeItem(`autoLogin_${state.chainId}`);
     },
     async loadAccountData({ commit, state }) {
         try {
diff --git a/src/store/account/mutations.ts b/src/store/account/mutations.ts
index f31e5d63..656f47fb 100644
--- a/src/store/account/mutations.ts
+++ b/src/store/account/mutations.ts
@@ -71,4 +71,7 @@ export const mutations: MutationTree<AccountStateInterface> = {
     setRexFund(state: AccountStateInterface, fund: number) {
         state.rexfund = fund;
     },
+    setChainId(state: AccountStateInterface, id: string) {
+        state.chainId = id;
+    },
 };
diff --git a/src/store/account/state.ts b/src/store/account/state.ts
index 3938ee22..97349134 100644
--- a/src/store/account/state.ts
+++ b/src/store/account/state.ts
@@ -27,6 +27,7 @@ export interface AccountStateInterface {
   savingsRex: string;
   tlosRexRatio: number;
   rexfund: number;
+  chainId: string;
 }
 
 export function state(): AccountStateInterface {
@@ -80,5 +81,6 @@ export function state(): AccountStateInterface {
         savingsRex: `0 ${chain.getSystemToken().symbol}`,
         tlosRexRatio: 1,
         rexfund: 0,
+        chainId: '',
     };
 }
diff --git a/src/types/Chain.d.ts b/src/types/Chain.d.ts
index 77db0e11..c086d3b0 100644
--- a/src/types/Chain.d.ts
+++ b/src/types/Chain.d.ts
@@ -2,6 +2,7 @@ import { RpcEndpoint } from 'universal-authenticator-library';
 import { PriceChartData } from 'src/types/PriceChartData';
 import { Theme } from 'src/types/Theme';
 import { Token } from 'src/types/Actions';
+import { UiCustomization } from 'src/types/UiCustomization';
 
 export interface Chain {
   getName(): string;
@@ -19,6 +20,7 @@ export interface Chain {
   getUsdPrice(): Promise<number>;
   getMapDisplay(): boolean;
   getTheme(): Theme;
+  getUiCustomization(): UiCustomization;
   getFiltersSupported(prop: string): boolean;
   isTestnet(): boolean;
 }
diff --git a/src/types/Theme.ts b/src/types/Theme.ts
index a88fdc24..20fd746e 100644
--- a/src/types/Theme.ts
+++ b/src/types/Theme.ts
@@ -19,6 +19,7 @@ export interface Theme {
   'color-header-border'?: string;
   'color-header-support-background'?: string;
   'color-graph-shadow'?: string;
+  'color-footer-background'?: string;
 }
 
 export const themeProps: (keyof Theme)[] = [
@@ -42,4 +43,5 @@ export const themeProps: (keyof Theme)[] = [
     'color-header-border',
     'color-header-support-background',
     'color-graph-shadow',
+    'color-footer-background',
 ];
diff --git a/src/types/UiCustomization.ts b/src/types/UiCustomization.ts
new file mode 100644
index 00000000..ca213460
--- /dev/null
+++ b/src/types/UiCustomization.ts
@@ -0,0 +1,37 @@
+export interface FooterLink {
+    label: string;
+    url: string;
+}
+
+export interface HeaderSettings {
+    hideLoginHandler: boolean;
+
+    hideNetworkTab: boolean;
+    hideWalletTab: boolean;
+    hideVoteTab: boolean;
+    hideProposalTab: boolean;
+}
+
+export interface AccountPageSettings {
+    hideCpuInfo: boolean;
+    hideNetInfo: boolean;
+    hideRamInfo: boolean;
+    hideRexInfo: boolean;
+    hideRefundingInfo: boolean;
+    hideDelegatedInfo: boolean;
+
+    hideResourcesControl: boolean;
+    hideRexControl: boolean;
+
+    hideTransactionTab: boolean;
+    hideTokensTab: boolean;
+    hideKeysTab: boolean;
+    hideChildrenTab: boolean;
+    hideContractsTab: boolean;
+}
+
+export interface UiCustomization {
+    footerLinks: FooterLink[];
+    headerSettings: HeaderSettings;
+    accountPageSettings: AccountPageSettings;
+}
diff --git a/test/jest/__tests__/store/account/actions.spec.ts b/test/jest/__tests__/store/account/actions.spec.ts
index af344163..e7512228 100644
--- a/test/jest/__tests__/store/account/actions.spec.ts
+++ b/test/jest/__tests__/store/account/actions.spec.ts
@@ -88,16 +88,23 @@ jest.mock('@greymass/eosio', () => ({
 import { actions } from 'src/store/account/actions';
 import { User } from 'universal-authenticator-library';
 
+const chainIdMock = 'chainIdMock';
+
 describe('Store - Account Actions', () => {
     let commit: jest.Mock;
     let state: AccountStateInterface;
     let users: User[] = [];
 
+
+    // commit('setChainId', (authenticator as Authenticator).chains[0].chainId);
     const newAuthenticatorMock = (requestName = false) => ({
         init: jest.fn(),
         shouldRequestAccountName: jest.fn().mockResolvedValue(new Promise(resolve => resolve(requestName))),
         login: jest.fn().mockResolvedValue(new Promise(resolve => resolve(users))),
         getName: jest.fn().mockReturnValue('autoLogin'),
+        chains: [{
+            chainId: chainIdMock,
+        }],
     });
     let authenticator = newAuthenticatorMock();
 
@@ -116,6 +123,7 @@ describe('Store - Account Actions', () => {
             user: null,
             accountName: '',
             accountPermission: '',
+            chainId: chainIdMock,
         } as AccountStateInterface;
 
     });
@@ -162,8 +170,8 @@ describe('Store - Account Actions', () => {
             expect(commit).toHaveBeenCalledWith('setUser', expect.any(FuelUserWrapper));
             expect(commit).toHaveBeenCalledWith('setIsAuthenticated', true);
             expect(commit).toHaveBeenCalledWith('setAccountName', 'john.doe');
-            expect(localStorageMock.setItem).toHaveBeenCalledWith('account', 'john.doe');
-            expect(localStorageMock.setItem).toHaveBeenCalledWith('autoLogin', 'autoLogin');
+            expect(localStorageMock.setItem).toHaveBeenCalledWith('account_' + chainIdMock, 'john.doe');
+            expect(localStorageMock.setItem).toHaveBeenCalledWith('autoLogin_' + chainIdMock, 'autoLogin');
 
         });
 
@@ -183,8 +191,8 @@ describe('Store - Account Actions', () => {
             expect(commit).toHaveBeenCalledWith('setUser', expect.any(FuelUserWrapper));
             expect(commit).toHaveBeenCalledWith('setIsAuthenticated', true);
             expect(commit).toHaveBeenCalledWith('setAccountName', 'john.doe');
-            expect(localStorageMock.setItem).toHaveBeenCalledWith('account', 'john.doe');
-            expect(localStorageMock.setItem).toHaveBeenCalledWith('autoLogin', 'autoLogin');
+            expect(localStorageMock.setItem).toHaveBeenCalledWith('account_' + chainIdMock, 'john.doe');
+            expect(localStorageMock.setItem).toHaveBeenCalledWith('autoLogin_' + chainIdMock, 'autoLogin');
         });
 
     });
@@ -199,8 +207,8 @@ describe('Store - Account Actions', () => {
             expect(commit).toHaveBeenCalledWith('setAccountName', '');
             expect(commit).toHaveBeenCalledWith('setUser', null);
 
-            expect(localStorageMock.removeItem).toHaveBeenCalledWith('account');
-            expect(localStorageMock.removeItem).toHaveBeenCalledWith('autoLogin');
+            expect(localStorageMock.removeItem).toHaveBeenCalledWith('account_' + chainIdMock);
+            expect(localStorageMock.removeItem).toHaveBeenCalledWith('autoLogin_' + chainIdMock);
         });
     });
 });
diff --git a/yarn.lock b/yarn.lock
index e1f6e8e5..6b82fe7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3455,15 +3455,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001332:
-  version "1.0.30001342"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001342.tgz#87152b1e3b950d1fbf0093e23f00b6c8e8f1da96"
-  integrity sha512-bn6sOCu7L7jcbBbyNhLg0qzXdJ/PMbybZTH/BA6Roet9wxYRm6Tr9D0s0uhLkOZ6MSG+QU6txUgdpr3MXIVqjA==
-
-caniuse-lite@^1.0.30001317:
-  version "1.0.30001320"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001320.tgz#8397391bec389b8ccce328636499b7284ee13285"
-  integrity sha512-MWPzG54AGdo3nWx7zHZTefseM5Y1ccM7hlQKHRqJkPozUaw3hNbBTMmLn16GG2FUzjR13Cr3NPfhIieX5PzXDA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001317, caniuse-lite@^1.0.30001332:
+  version "1.0.30001515"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001515.tgz"
+  integrity sha512-eEFDwUOZbE24sb+Ecsx3+OvNETqjWIdabMy52oOkIgcUtAsQifjUG9q4U9dgTHJM2mfk4uEPxc0+xuFdJ629QA==
 
 canvg@^3.0.6:
   version "3.0.10"
@@ -7986,15 +7981,10 @@ mute-stream@0.0.8, mute-stream@~0.0.4:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
-nanoid@^3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557"
-  integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==
-
-nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -9155,21 +9145,12 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.1.10:
-  version "8.4.12"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
-  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
-  dependencies:
-    nanoid "^3.3.1"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-postcss@^8.2.15, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.4:
-  version "8.4.14"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
-  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+postcss@^8.1.10, postcss@^8.2.15, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.4:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
-    nanoid "^3.3.4"
+    nanoid "^3.3.6"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"