diff --git a/.env.example b/.env.example
index 316c048d..6ab31983 100644
--- a/.env.example
+++ b/.env.example
@@ -5,6 +5,6 @@ APP_NAME=OBE
 # default network
 CHAIN_NAME=telos-testnet
 
-# enable sidebar to switch chains
-#SHOW_SIDEBAR=true
+# enable selector on header to switch chains
+#SHOW_MULTICHAIN_SELECTOR=true
 
diff --git a/package.json b/package.json
index 88fdf85c..b272aff7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "open-block-explorer",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "..",
   "productName": "Telos Block Explorer",
   "author": "DonaldPeat <don@caleos.io>",
diff --git a/public/chains/eos/eos.png b/public/chains/eos/eos.png
index 2550424b..0440d78f 100644
Binary files a/public/chains/eos/eos.png and b/public/chains/eos/eos.png differ
diff --git a/public/chains/eos/eos_large.png b/public/chains/eos/eos_large.png
index 16a18e0a..1fb715f6 100644
Binary files a/public/chains/eos/eos_large.png and b/public/chains/eos/eos_large.png differ
diff --git a/public/chains/eos/favicon.png b/public/chains/eos/favicon.png
index 2550424b..0440d78f 100644
Binary files a/public/chains/eos/favicon.png and b/public/chains/eos/favicon.png differ
diff --git a/public/chains/jungle/eos.png b/public/chains/jungle/eos.png
index 2550424b..0440d78f 100644
Binary files a/public/chains/jungle/eos.png and b/public/chains/jungle/eos.png differ
diff --git a/public/chains/jungle/eos_large.png b/public/chains/jungle/eos_large.png
index 16a18e0a..1fb715f6 100644
Binary files a/public/chains/jungle/eos_large.png and b/public/chains/jungle/eos_large.png differ
diff --git a/public/chains/jungle/favicon.png b/public/chains/jungle/favicon.png
index 2550424b..0440d78f 100644
Binary files a/public/chains/jungle/favicon.png and b/public/chains/jungle/favicon.png differ
diff --git a/public/chains/ux/favicon.png b/public/chains/ux/favicon.png
index 0dfda988..62161332 100644
Binary files a/public/chains/ux/favicon.png and b/public/chains/ux/favicon.png differ
diff --git a/public/chains/ux/logo_lg.png b/public/chains/ux/logo_lg.png
deleted file mode 100644
index f1a8358c..00000000
Binary files a/public/chains/ux/logo_lg.png and /dev/null differ
diff --git a/public/chains/ux/logo_sm.jpeg b/public/chains/ux/logo_sm.jpeg
deleted file mode 100644
index 0dfda988..00000000
Binary files a/public/chains/ux/logo_sm.jpeg and /dev/null differ
diff --git a/public/chains/ux/logo_sm.png b/public/chains/ux/logo_sm.png
new file mode 100644
index 00000000..62161332
Binary files /dev/null and b/public/chains/ux/logo_sm.png differ
diff --git a/public/chains/ux/logo_sm.svg b/public/chains/ux/logo_sm.svg
deleted file mode 100644
index deb25ad1..00000000
--- a/public/chains/ux/logo_sm.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="136.731" height="62" viewBox="0 0 136.731 62">
-  <g id="Group_659" data-name="Group 659" transform="translate(-992 -937)">
-    <g id="Group_660" data-name="Group 660" transform="translate(992 939)">
-      <!-- <g id="Group_310" data-name="Group 310" transform="translate(0 -2)">
-        <g id="Group_260" data-name="Group 260" transform="translate(0 0)">
-          <text id="powered_by" data-name="powered by" transform="translate(28 9)" fill="#fff" font-size="9" font-family="Barlow-LightItalic, Barlow" font-weight="300" font-style="italic" letter-spacing="0.05em"><tspan x="-27.738" y="0">POWERED BY</tspan></text>
-        </g>
-      </g> -->
-      <g id="Group_322" data-name="Group 322" transform="translate(0.487 21.082)">
-        <g id="Group_320" data-name="Group 320" transform="translate(0 0)">
-          <path id="Path_98" data-name="Path 98" d="M218.553,92.813v-1.27l-1.038,1.27-6.124,7.493,6.908,8.47.254.311V92.813Z" transform="translate(-185.039 -81.335)" fill="#fff"/>
-          <path id="Path_99" data-name="Path 99" d="M201.207,104.089l-4.377-5.427-.011.014-7.027-8.671,0-.011-1.511-1.868-3.673-4.541h4.868l3.715,4.541,3.748,4.58,3.735-4.58,2.75-3.373-13.727-8.1-16.757,9.893v19.132l9.118,5.383,5.654-6.968,5.778-7.12,2.344,2.894-3.447,4.227-7.193,8.82,4.5,2.657,14.066-8.3ZM187.014,98.4c0,3.212-2.753,3.584-4.824,3.584-2.227,0-4.783-.407-4.783-3.584V92.041h2.671v6.02c0,1.012,0,1.353,2.133,1.353s2.134-.34,2.134-1.35V92.041h2.67Z" transform="translate(-172.943 -76.649)" fill="#fff"/>
-        </g>
-        <g id="Group_321" data-name="Group 321" transform="translate(44.355 14.518)">
-          <path id="Path_100" data-name="Path 100" d="M246.626,97.831h1.583V108.38h-1.876l-7.091-8.439v8.439h-1.583V97.831h1.876l7.091,8.44Z" transform="translate(-237.659 -97.831)" fill="#fff"/>
-          <path id="Path_101" data-name="Path 101" d="M266.232,99.414h-8.087v2.9h6.506V103.9h-6.506v2.9h8.087v1.582h-9.67V97.831h9.67Z" transform="translate(-243.606 -97.831)" fill="#fff"/>
-          <path id="Path_102" data-name="Path 102" d="M284.817,97.831v1.583h-4.484v8.967h-1.582V99.414h-4.484V97.831Z" transform="translate(-249.177 -97.831)" fill="#fff"/>
-          <path id="Path_103" data-name="Path 103" d="M309.013,97.831l-3.839,10.549h-1.289l-3-8.22-2.988,8.22-.029-.014.014.014H296.6l-3.839-10.549h1.685l2.8,7.693,2.8-7.693h1.685l2.8,7.693,2.8-7.693Z" transform="translate(-254.996 -97.831)" fill="#fff"/>
-          <path id="Path_104" data-name="Path 104" d="M327.475,97.831a1.9,1.9,0,0,1,1.905,1.9v6.74a1.9,1.9,0,0,1-1.905,1.9h-6.739a1.9,1.9,0,0,1-1.9-1.9v-6.74a1.9,1.9,0,0,1,1.9-1.9Zm0,8.967a.326.326,0,0,0,.323-.323v-6.74a.326.326,0,0,0-.323-.322h-6.739a.325.325,0,0,0-.322.322v6.74a.325.325,0,0,0,.322.323Z" transform="translate(-263.198 -97.831)" fill="#fff"/>
-          <path id="Path_105" data-name="Path 105" d="M348.711,102.717a1.91,1.91,0,0,1-1.9,1.9h-1.069l2.974,3.545v.22h-1.875l-3.164-3.765h-3.6a2.245,2.245,0,0,1-.323-.029v3.794h-1.582V97.853h8.644a1.91,1.91,0,0,1,1.9,1.9Zm-1.9.322a.325.325,0,0,0,.323-.322V99.758a.325.325,0,0,0-.323-.322h-6.739a.325.325,0,0,0-.323.322v2.959a.325.325,0,0,0,.323.322Z" transform="translate(-269.279 -97.838)" fill="#fff"/>
-          <path id="Path_106" data-name="Path 106" d="M367.068,97.831v.22l-4.234,5.055,4.234,5.055v.22h-1.875l-3.765-4.483H358.5v4.483h-1.583V97.831H358.5v4.484h2.93l3.765-4.484Z" transform="translate(-275.18 -97.831)" fill="#fff"/>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/src/boot/ual.ts b/src/boot/ual.ts
index feb11567..8a2c0b43 100644
--- a/src/boot/ual.ts
+++ b/src/boot/ual.ts
@@ -147,12 +147,14 @@ function getMainChain() {
 const authenticators: Authenticator[] = [];
 
 export const getAuthenticators = () => {
+    // we initialize the authenticators inside this function on demand
     if (authenticators.length === 0) {
-        // we initialize the authenticators inside this function on demand
+        // UAL is not looking at the chain when checking the localstorage 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 })),
+        authenticators.push(new Anchor([mainChain], { appName: `${process.env.APP_NAME}_${mainChain.chainId}` })),
         authenticators.push(new CleosAuthenticator([mainChain], {
-            appName: process.env.APP_NAME,
+            appName: `${process.env.APP_NAME}_${mainChain.chainId}`,
             loginHandler,
             signHandler: signHandlerForMainChain,
         }));
diff --git a/src/components/AccountCard.vue b/src/components/AccountCard.vue
index adf633c7..04b31522 100644
--- a/src/components/AccountCard.vue
+++ b/src/components/AccountCard.vue
@@ -140,10 +140,9 @@ export default defineComponent({
         };
 
         const loadBalances = async () => {
-            const { staked, profits } = await getRexBalance();
+            const total  = await getRexBalance();
             rexDeposits.value = await getRexFund();
-            rexStaked.value = staked;
-            rexProfits.value = profits;
+            rexStaked.value = total;
         };
 
         const loadResources = () => {
@@ -254,14 +253,11 @@ export default defineComponent({
 
             const rexBal = ((await api.getTableRows(paramsrexbal)) as RexbalRows)
                 .rows[0];
+
             const totalRexBalance =
                 rexBal?.rex_balance
                     ? Number(rexBal.rex_balance.split(' ')[0])
                     : 0;
-            const staked =
-                rexBal?.vote_stake
-                    ? Number(rexBal.vote_stake.split(' ')[0])
-                    : 0;
 
             const paramsrexpool = {
                 code: 'eosio',
@@ -279,12 +275,7 @@ export default defineComponent({
             const tlosRexRatio = totalRex > 0 ? totalLendable / totalRex : 1;
 
             const total = totalRex > 0 ? tlosRexRatio * totalRexBalance : 0.0;
-            const profits = total - staked;
-            return {
-                total,
-                profits,
-                staked,
-            };
+            return total;
         };
 
         const fixDec = (val: number): number => parseFloat(val.toFixed(3));
@@ -349,7 +340,6 @@ export default defineComponent({
             totalTokens.value = '--';
             stakedResources.value = delegatedByOthers.value = 0;
             rexStaked.value = 0;
-            rexProfits.value = 0;
             rexDeposits.value = 0;
         };
 
@@ -395,7 +385,6 @@ export default defineComponent({
             totalValueString,
             rex,
             rexStaked,
-            rexProfits,
             rexDeposits,
             none,
             system_account,
@@ -560,10 +549,6 @@ export default defineComponent({
                         <td class="text-left">REX staked (includes savings)</td>
                         <td class="text-right">{{ formatAsset(rexStaked) }}</td>
                     </tr>
-                    <tr>
-                        <td class="text-left">REX profits</td>
-                        <td class="text-right">{{ formatAsset(rexProfits) }}</td>
-                    </tr>
                     <tr>
                         <td class="text-left">REX liquid deposits</td>
                         <td class="text-right">{{ formatAsset(rexDeposits) }}</td>
diff --git a/src/components/ChainsSidebar.vue b/src/components/ChainsMenu.vue
similarity index 59%
rename from src/components/ChainsSidebar.vue
rename to src/components/ChainsMenu.vue
index 54b3d8a8..2ee774f2 100644
--- a/src/components/ChainsSidebar.vue
+++ b/src/components/ChainsMenu.vue
@@ -1,13 +1,20 @@
 <script lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, defineComponent, onMounted, ref } from 'vue';
 import ConfigManager from 'src/config/ConfigManager';
 import { Chain } from 'src/types/Chain';
+import { useStore } from 'src/store';
+import { getAuthenticators } from 'src/boot/ual';
 
 const configMgr = ConfigManager.get();
 
-export default {
-    name: 'ChainsSidebar',
+export default defineComponent({
+    name: 'ChainsMenu',
     setup() {
+        const menuOpened = ref(false);
+        const store = useStore();
+        const account = computed(() => store.state.account);
+
+        const menuIcon = computed(() => menuOpened.value ? 'expand_less' : 'expand_more');
         const mainnets = computed(() => sortChainsUsingName(configMgr.getMainnets()));
         const testnets = computed(() => sortChainsUsingName(configMgr.getTestnets()));
 
@@ -21,6 +28,19 @@ export default {
             return localStorage.getItem(ConfigManager.CHAIN_LOCAL_STORAGE) === chain.getName();
         }
 
+        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;
@@ -30,6 +50,11 @@ export default {
                 ConfigManager.CHAIN_LOCAL_STORAGE,
                 chain.getName(),
             );
+
+            if (account.value) {
+                void logout();
+            }
+
             location.reload();
         }
 
@@ -43,30 +68,23 @@ export default {
         });
 
         return {
-            miniState: ref(true),
+            menuOpened,
+            menuIcon,
             mainnets,
             testnets,
             chainSelected,
             isSelected,
         };
     },
-};
+});
 </script>
 
 <template>
-
-<q-drawer
-    show-if-above
-    :mini="miniState"
-    mini-to-overlay
-    :width="175"
-    :breakpoint="500"
-    bordered
-    @mouseover="miniState = false"
-    @mouseout="miniState = true"
->
-    <q-scroll-area class="fit">
+<q-btn v-if="testnets.length > 0 || mainnets.length > 0" 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}`"
@@ -79,7 +97,8 @@ export default {
                     <div class="q-pl-md">{{ chain.getDisplay() }}</div>
                 </q-item-section>
             </q-item>
-            <q-separator class="separator"/>
+            <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}`"
@@ -90,45 +109,57 @@ export default {
             >
                 <div class="testnet-logo-container">
                     <img class="sidebar-logo sidebar-logo--testnet" :src="chain.getSmallLogoPath()">
-                    <div class="testnet-text">Testnet</div>
+                    <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>
-    </q-scroll-area>
-</q-drawer>
-
+    </q-menu>
+</q-btn>
 </template>
 
 <style lang="sass" scoped>
+.chain-button
+    padding: 0px 4px
+
 .q-item
-  &:hover, &.selected
-    background-color: var(--q-color-sidebar-selected)
-  padding-left: 4px
-  padding-top: 4px
+    &: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
-  margin-left: 5px
-  min-height: 5px
-  min-width: 0
-  width: calc(100% - 10px)
-  background: var(--q-color-sidebar-selected)
+    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: 48px
-  max-width: 48px
-  object-fit: contain
+    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: 48px
-    width: 48px
+    height: 32px
+    width: 32px
 
 .testnet-text, .sidebar-logo--testnet
     position: absolute
@@ -140,7 +171,7 @@ export default {
 
 .testnet-text
     color: white
-    font-size: 12px
+    font-size: 6px
     width: min-content
     height: min-content
     padding: 0 2px
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4a4e598c..7430c75f 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -3,6 +3,7 @@ import { defineComponent, computed } 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 { useStore } from 'src/store';
 
@@ -11,6 +12,7 @@ export default defineComponent({
     components: {
         LoginHandler,
         HeaderSearch,
+        ChainsMenu,
     },
     setup() {
         const $q = useQuasar();
@@ -18,11 +20,13 @@ export default defineComponent({
         const store = useStore();
         const account = computed(() => store.state.account.accountName);
         const isLarge = computed((): boolean => $q.screen.gt.sm);
+        const showMultichainSelector = computed(() => process.env.SHOW_MULTICHAIN_SELECTOR === 'true');
 
         return {
             account,
             isLarge: isLarge,
             chain,
+            showMultichainSelector,
         };
     },
 });
@@ -31,15 +35,21 @@ export default defineComponent({
 <template>
 <div class="header-background">
     <div class="row text-center q-pt-sm justify-between q-pt-md">
-        <div class="logo-container col-xs-2 col-sm-2 col-md-2 col-lg-2">
+        <div class="logo-container col-xs-3 col-sm-2 col-md-2 col-lg-2">
             <div class="q-px-xs-xs q-px-sm-xs q-px-md-md q-px-lg-md">
-                <a class="float-left q-ml-sm" href="/">
-                    <img v-if="isLarge" class="logo" :src="chain.getLargeLogoPath()">
-                    <img v-else class="logo-token" :src="chain.getSmallLogoPath()">
-                </a>
+                <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()">
+                        </a>
+                        <ChainsMenu v-if="showMultichainSelector"/>
+                    </div>
+                    <div v-if="chain.isTestnet()" class="testnet-text">TESTNET</div>
+                </div>
             </div>
         </div>
-        <div class="col-xs-5 col-sm-6 col-md-4 col-lg-6">
+        <div class="col-xs-4 col-sm-6 col-md-4 col-lg-6">
             <div class="q-px-xs-xs q-px-sm-xs q-px-md-md q-px-lg-md">
                 <div class="row justify-center full-width">
                     <div class="col-12">
@@ -90,25 +100,57 @@ export default defineComponent({
 
 <style lang="sass" scoped>
 .q-tab
-  text-transform: unset
-  font-size: 18px
+    text-transform: unset
+    font-size: 18px
+
+.logo-header-container
+    position: relative
+    display: flex
+    flex-direction: column
+    gap: 8px
+    width: fit-content
+
+.logo-chain-selector-container
+    padding-left: 4px
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    a
+        margin-right: 4px
 
 .logo
   width: 104px
   height:40px
+  object-fit: contain
+
 .logo-token
   width: 40px
   height: 40px
+  object-fit: contain
+
+.testnet-text
+    position: absolute
+    bottom: -20px
+    color: white
+    font-size: 10px
+    width: 100%
+    height: min-content
+    padding: 4px 8px
+    border-radius: 4px
+    background-color: rgba(white, 0.1)
 
 .active-tab
   text-decoration: none
-  color: #ffffff
+  color: var(--q-color-header-text)
   opacity: 1 !important
 
 .deactive
-  opacity: 0.3
+  opacity: 0.65
   font-size: 18px
 
 .header-background
-  background: var(--q-secondary)
+  border-bottom: 2px solid var(--q-color-header-border)
+  background: var(--q-color-header-background)
+
+
 </style>
diff --git a/src/components/HeaderSearch.vue b/src/components/HeaderSearch.vue
index 51cf34d4..fda8e414 100644
--- a/src/components/HeaderSearch.vue
+++ b/src/components/HeaderSearch.vue
@@ -253,7 +253,7 @@ export default defineComponent({
 
 <style lang="sass">
 .search-input
-  background: rgba(255, 255, 255, 0.05)
+  background: rgba(255, 255, 255, 0.15)
   border-radius: 4px
 
 .search-input .q-select__dropdown-icon
diff --git a/src/components/PermissionCard.vue b/src/components/PermissionCard.vue
index 14f2cedb..b3540be8 100644
--- a/src/components/PermissionCard.vue
+++ b/src/components/PermissionCard.vue
@@ -2,6 +2,7 @@
 import { defineComponent, PropType, computed, toRefs } from 'vue';
 import { Permission } from 'src/types';
 import KeyToggle from 'src/components/KeyToggle.vue';
+import moment from 'moment';
 
 export default defineComponent({
     name: 'PermissionCard',
@@ -40,11 +41,17 @@ export default defineComponent({
             type: 'account' | 'transaction' | 'block',
         ): string => `<a href="/${type}/${name}" class="hover-dec">${name}</a>`;
 
+        const formatWait = (wait: number): string =>
+            // we use moment js to format the wait time
+            moment.duration(wait, 'seconds').humanize() + ' wait'
+        ;
+
         return {
             branchTopClass,
             branchBottomClass,
             permissionCardClass,
             formatAccount,
+            formatWait,
             permissionLocal,
         };
     },
@@ -70,6 +77,9 @@ export default defineComponent({
                     <div v-for="a in permissionLocal.required_auth.accounts" :key="`${a.permission.actor}-${a.permission.permission}`">
                         <div><span>{{`+${a.weight} &nbsp; &nbsp; `}}</span><span class="text-bold" v-html="formatAccount(a.permission.actor?.toString(), 'account')"></span><span> @{{a.permission.permission}}</span></div>
                     </div>
+                    <div v-for="w in permissionLocal.required_auth.waits" :key="`${w.wait_sec}-${w.weight}`">
+                        <div><span>{{`+${w.weight} &nbsp; &nbsp; `}}</span><span>{{ formatWait(w.wait_sec.value) }}</span></div>
+                    </div>
                 </q-card-section>
                 <q-card-section v-if="permissionLocal.permission_links.length > 0" class="permission-action-section">
                     <div v-for="link in permissionLocal.permission_links" :key="link.action">{{link.code}}::{{link.action}}</div>
diff --git a/src/components/PriceChart.vue b/src/components/PriceChart.vue
index 0f8afb2b..7f80b240 100644
--- a/src/components/PriceChart.vue
+++ b/src/components/PriceChart.vue
@@ -56,10 +56,7 @@ export default defineComponent({
                         },
                         stops: [
                             // [0, '#571AFF'],
-                            [0, 'rgba(234 , 227 , 252 , 0.6)'],
-                            [1, 'rgba(87, 26, 255, 0.003)'],
-                            [2, 'rgba(87, 26, 255, 0.0001)'],
-                            [3, 'rgba(87, 26, 255, 0)'],
+                            [0, getCssVar('color-graph-shadow')],
                         ],
                     },
                     marker: {
diff --git a/src/components/ProposalSuccess.vue b/src/components/ProposalSuccess.vue
index 8ea62c35..3698779c 100644
--- a/src/components/ProposalSuccess.vue
+++ b/src/components/ProposalSuccess.vue
@@ -33,7 +33,7 @@ export default defineComponent({
 
 <template>
 <q-dialog v-model="value" maximized>
-    <q-card class="gradient-box">
+    <q-card class="header-support">
         <q-card-section class="full-height row justify-center items-center">
             <div class="proposal-success__section-wrapper">
                 <header class="q-mb-lg">
diff --git a/src/components/WorldMap.vue b/src/components/WorldMap.vue
index fa6d8fb8..6a3d6cab 100644
--- a/src/components/WorldMap.vue
+++ b/src/components/WorldMap.vue
@@ -416,7 +416,7 @@ export default defineComponent({
     v-model="producerToggle"
     label="Show Active BP"
     left-label
-    color="cyan-4"
+    color="white"
     @update:model-value="(val)=> updateToggleOption(val)"
   />
 </div>
diff --git a/src/components/contract/ContractActions.vue b/src/components/contract/ContractActions.vue
index 96623219..112d5b5b 100644
--- a/src/components/contract/ContractActions.vue
+++ b/src/components/contract/ContractActions.vue
@@ -26,7 +26,7 @@ export default defineComponent({
 
         async function signAction() {
             await store.dispatch('account/sendAction', {
-                action: action.value,
+                name: action.value,
                 actor: actor.value,
                 permission: permission.value,
                 data: memo.value,
diff --git a/src/components/validators/ValidatorData.vue b/src/components/validators/ValidatorData.vue
index a601ba78..29798af2 100644
--- a/src/components/validators/ValidatorData.vue
+++ b/src/components/validators/ValidatorData.vue
@@ -185,95 +185,95 @@ export default defineComponent({
 </script>
 
 <template>
-
-<div>
-    <div class="q-pa-md">
-        <div class="row q-col-gutter-md q-pt-md">
-            <div class="col-md-8 col-sm-12 col-xs-12">
-                <q-card class="full-height card-gradient" flat>
-                    <q-card-section>
-                        <div class="row q-pa-md text-h5 text-weight-light">Voting Statistics</div>
-                        <div class="row q-pa-md">
-                            <div class="col-12">
-                                <q-linear-progress
-                                    class="gradient-color q-mt-sm"
-                                    size="120px"
-                                    rounded
-                                    :value="votesProgress"
-                                />
-                            </div>
+<div class="q-pa-md header-support">
+    <div class="row q-col-gutter-md q-pt-md container-max-width">
+        <div class="col-md-8 col-sm-12 col-xs-12">
+            <q-card class="full-height" >
+                <q-card-section>
+                    <div class="row q-pa-md text-h5 text-weight-light">Voting Statistics</div>
+                    <div class="row q-pa-md">
+                        <div class="col-12">
+                            <q-linear-progress
+                                class="gradient-color q-mt-sm"
+                                size="120px"
+                                rounded
+                                :value="votesProgress"
+                            />
                         </div>
-                        <div class="row q-pa-md">
-                            <div class="col-12">
-                                <div class="row">
-                                    <div class="col-6 text-uppercase text-weight-light text-grey-4">Total votes</div>
-                                    <div class="col-6">
-                                        <div class="float-right text-uppercase text-weight-light text-grey-4">Total Supply</div>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col-6">{{ amount_voted.toLocaleString(undefined, {minimumFractionDigits: 4,maximumFractionDigits: 4,}) }}</div>
-                                    <div class="col-6">
-                                        <div class="float-right">{{ supply.toLocaleString(undefined, {minimumFractionDigits: 4,maximumFractionDigits: 4,}) }}</div>
-                                    </div>
+                    </div>
+                    <div class="row q-pa-md">
+                        <div class="col-12">
+                            <div class="row">
+                                <div class="col-6 text-uppercase text-grey">Total votes</div>
+                                <div class="col-6">
+                                    <div class="float-right text-uppercase text-grey">Total Supply</div>
                                 </div>
                             </div>
-                        </div>
-                    </q-card-section>
-                </q-card>
-            </div>
-            <div v-if="accountValid" class="col-md-4 col-sm-12 col-xs-12">
-                <q-card class="full-height card-gradient" flat>
-                    <q-card-section class="card-gradient">
-                        <div class="row full-width justify-center">
-                            <div class="text-h6 q-py-md text-weight-light text-grey-4">Current Vote Weight</div>
-                            <q-icon
-                                class="info-icon"
-                                name="info"
-                                color="white"
-                                size="20px"
-                            >
-                                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">Voting is inversley weighted and increases the more validators you vote for (up to 30).</q-tooltip>
-                            </q-icon>
-                        </div>
-                        <div class="row full-width justify-center text-h5">{{ balance }}</div>
-                        <div class="row full-width justify-center text-h6 q-py-md text-weight-light text-grey-4">{{account}}</div>
-                    </q-card-section>
-                    <q-separator color="primary" size="2px"/>
-                    <q-card-section>
-                        <div class="row full-width justify-center subtitle2 q-py-md text-weight-light text-grey-4 q-pt-lg">SELECTED {{currentVote.length}} BLOCK PRODUCERS</div>
-                        <div class="row full-width justify-center">
-                            <q-btn
-                                class="full-width q-pa-sm"
-                                label="Vote for Block Producers"
-                                color="primary"
-                                @click="sendVoteTransaction"
-                            />
-                        </div>
-                    </q-card-section>
-                </q-card>
-            </div>
-            <div v-else class="col-md-4 col-sm-12 col-xs-12">
-                <q-card class="full-height card-gradient" flat>
-                    <q-card-section class="full-height">
-                        <div class="column justify-center full-height">
                             <div class="row">
-                                <div class="col-12 subtitle2 q-pb-md text-weight-light text-grey-4 q-pt-lg text-center">SELECTED {{currentVote.length}} BLOCK PRODUCERS</div>
-                                <div class="col-12">
-                                    <q-btn
-                                        class="full-width q-pa-sm"
-                                        label="Vote for Block Producers"
-                                        color="primary"
-                                        @click="sendVoteTransaction"
-                                    />
+                                <div class="col-6">{{ amount_voted.toLocaleString(undefined, {minimumFractionDigits: 4,maximumFractionDigits: 4,}) }}</div>
+                                <div class="col-6">
+                                    <div class="float-right">{{ supply.toLocaleString(undefined, {minimumFractionDigits: 4,maximumFractionDigits: 4,}) }}</div>
                                 </div>
                             </div>
                         </div>
-                    </q-card-section>
-                </q-card>
-            </div>
+                    </div>
+                </q-card-section>
+            </q-card>
+        </div>
+        <div v-if="accountValid" class="col-md-4 col-sm-12 col-xs-12">
+            <q-card>
+                <q-card-section>
+                    <div class="row full-width justify-center">
+                        <div class="text-h6 q-py-md text-weight-regular text-grey">Current Vote Weight</div>
+                        <q-icon
+                            class="info-icon"
+                            name="info"
+                            color="white"
+                            size="20px"
+                        >
+                            <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">Voting is inversley weighted and increases the more validators you vote for (up to 30).</q-tooltip>
+                        </q-icon>
+                    </div>
+                    <div class="row full-width justify-center text-h5">{{ balance }}</div>
+                    <div class="row full-width justify-center text-h6 q-py-md text-weight-regular text-grey">{{account}}</div>
+                </q-card-section>
+                <q-separator />
+                <q-card-section>
+                    <div class="row full-width justify-center subtitle2 q-py-md text-weight-regular text-grey q-pt-lg">SELECTED {{currentVote.length}} BLOCK PRODUCERS</div>
+                    <div class="row full-width justify-center">
+                        <q-btn
+                            class="full-width q-pa-sm"
+                            label="Vote for Block Producers"
+                            color="primary"
+                            @click="sendVoteTransaction"
+                        />
+                    </div>
+                </q-card-section>
+            </q-card>
+        </div>
+
+        <div v-else class="col-md-4 col-sm-12 col-xs-12">
+            <q-card class="full-height">
+                <q-card-section class="full-height">
+                    <div class="column justify-center full-height">
+                        <div class="row">
+                            <div class="col-12 subtitle2 q-pb-md text-weight-regular text-grey q-pt-lg text-center">SELECTED {{currentVote.length}} BLOCK PRODUCERS</div>
+                            <div class="col-12">
+                                <q-btn
+                                    class="full-width q-pa-sm"
+                                    label="Vote for Block Producers"
+                                    color="primary"
+                                    @click="sendVoteTransaction"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </q-card-section>
+            </q-card>
         </div>
     </div>
+</div>
+<div class="container-max-width">
     <ValidatorDataTable ref="ValidatorDataTable" :top21pay24h="top21pay24h"/>
     <ViewTransaction
         v-model="openTransaction"
@@ -281,11 +281,14 @@ export default defineComponent({
         :transactionError="transactionError || ''"
         message="transaction complete"
     />
-    <WalletModal v-model="showWalletModal"/>
 </div>
+<WalletModal v-model="showWalletModal"/>
 </template>
 
 <style lang="sass" scoped>
+.header-support
+  height: auto
+
 .card-gradient
   background: var(--q-color-secondary-gradient)
   color: white
diff --git a/src/config/BaseChain.ts b/src/config/BaseChain.ts
index 29c3f001..c27c7628 100644
--- a/src/config/BaseChain.ts
+++ b/src/config/BaseChain.ts
@@ -36,4 +36,8 @@ export default abstract class BaseChain implements Chain {
   abstract getMapDisplay(): boolean;
   abstract getTheme(): Theme;
   abstract getFiltersSupported(prop: string): boolean;
+
+  isTestnet(): boolean {
+      return false;
+  }
 }
diff --git a/src/config/ConfigManager.ts b/src/config/ConfigManager.ts
index ee673945..61a8fbbf 100644
--- a/src/config/ConfigManager.ts
+++ b/src/config/ConfigManager.ts
@@ -18,11 +18,11 @@ export default class ConfigManager {
   }
 
   private init(): void {
-      const showSidebar = process.env.SHOW_SIDEBAR;
+      const showMultichainSelector = process.env.SHOW_MULTICHAIN_SELECTOR;
       const configuredChain = process.env.CHAIN_NAME;
       this.testnets = chainsConfig.testnets;
       this.mainnets = chainsConfig.mainnets;
-      if (showSidebar) {
+      if (showMultichainSelector) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
           const userConfiguredChain = this.getSelectedChain();
 
diff --git a/src/config/chains/eos/index.ts b/src/config/chains/eos/index.ts
index 4da2870c..dc8e0393 100644
--- a/src/config/chains/eos/index.ts
+++ b/src/config/chains/eos/index.ts
@@ -32,7 +32,29 @@ 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 THEME = {};
+const THEME = {
+    primary: '#28417c',
+    secondary: '#000000', //disso
+    accent: '#9C27B0',
+    dark: '#1d1d1d',
+    positive: '#21BA45',
+    negative: '#ff0000',
+    info: '#31CCEC',
+    warning: '#F2C037',
+    'color-map': '#19284e', //disso
+    'color-primary-gradient': 'linear-gradient(90deg, #0c3964 0%, #1876d2 100%)',
+    'color-secondary-gradient':
+    'linear-gradient(180deg, #0c3964 0%, #1876d2 147.34%)',
+    'color-tertiary-gradient':
+    'linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)',
+    'color-progress-gradient': '#28417c',
+    'color-header-background': '#000000',
+    'color-header-border': '#444',
+    'color-header-support-background': '#000',
+    'color-graph-shadow': '#3f65c228',
+};
+
+// create vars for map colors (border, backround, countries, popup, text, popup)
 
 export default class EOS extends BaseChain {
     getName(): string {
diff --git a/src/config/chains/jungle/index.ts b/src/config/chains/jungle/index.ts
index 35326508..1f55311e 100644
--- a/src/config/chains/jungle/index.ts
+++ b/src/config/chains/jungle/index.ts
@@ -42,7 +42,27 @@ const RPC_ENDPOINT = {
 };
 const API_ENDPOINT = 'https://example.com';
 const DISPLAY_MAP = true;
-const THEME = {};
+const THEME = {
+    primary: '#28417c',
+    secondary: '#000000', //disso
+    accent: '#9C27B0',
+    dark: '#1d1d1d',
+    positive: '#21BA45',
+    negative: '#ff0000',
+    info: '#31CCEC',
+    warning: '#F2C037',
+    'color-map': '#19284e', //disso
+    'color-primary-gradient': 'linear-gradient(90deg, #0c3964 0%, #1876d2 100%)',
+    'color-secondary-gradient':
+    'linear-gradient(180deg, #0c3964 0%, #1876d2 147.34%)',
+    'color-tertiary-gradient':
+    'linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)',
+    'color-progress-gradient': '#28417c',
+    'color-header-background': '#000000',
+    'color-header-border': '#444',
+    'color-header-support-background': '#000',
+    'color-graph-shadow': '#3f65c228',
+};
 
 export default class TelosTestnet extends BaseChain {
     getName(): string {
@@ -111,4 +131,8 @@ export default class TelosTestnet extends BaseChain {
         }
         return true;
     }
+
+    isTestnet(): boolean {
+        return true;
+    }
 }
diff --git a/src/config/chains/telos-testnet/index.ts b/src/config/chains/telos-testnet/index.ts
index 0e8bf183..b4c73392 100644
--- a/src/config/chains/telos-testnet/index.ts
+++ b/src/config/chains/telos-testnet/index.ts
@@ -57,10 +57,13 @@ const THEME = {
     'linear-gradient(180deg, #071A5F 0%, #571aff 147.34%)',
     'color-tertiary-gradient':
     'linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)',
-    'color-progress-gradient':
-    'linear-gradient(90deg, #571AFF 0%, #A088F9 48.44%, #CBCAF5 100%)',
+    'color-progress-gradient': '#571aff',
     'color-producer-card-background': '#f5f4fe',
     'color-select-box-background': '#e0dffb',
+    'color-header-background': '#071A5F',
+    'color-header-border': '#8a65d41a',
+    'color-header-support-background': 'linear-gradient(180deg, #071A5F 0%, #571aff 147.34%)',
+    'color-graph-shadow': '#571aff28',
 };
 
 export default class TelosTestnet extends BaseChain {
@@ -130,4 +133,8 @@ export default class TelosTestnet extends BaseChain {
         }
         return true;
     }
+
+    isTestnet(): boolean {
+        return true;
+    }
 }
diff --git a/src/config/chains/telos/index.ts b/src/config/chains/telos/index.ts
index 81134c34..fff3ab3d 100644
--- a/src/config/chains/telos/index.ts
+++ b/src/config/chains/telos/index.ts
@@ -64,10 +64,13 @@ const THEME = {
     'linear-gradient(180deg, #071A5F 0%, #571aff 147.34%)',
     'color-tertiary-gradient':
     'linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)',
-    'color-progress-gradient':
-    'linear-gradient(90deg, #571AFF 0%, #A088F9 48.44%, #CBCAF5 100%)',
+    'color-progress-gradient': '#571aff',
     'color-producer-card-background': '#f5f4fe',
     'color-select-box-background': '#e0dffb',
+    'color-header-background': '#071A5F',
+    'color-header-border': '#8a65d41a',
+    'color-header-support-background': 'linear-gradient(180deg, #071A5F 0%, #571aff 147.34%)',
+    'color-graph-shadow': '#571aff28',
 };
 
 export default class Telos extends BaseChain {
diff --git a/src/config/chains/ux/index.ts b/src/config/chains/ux/index.ts
index 1f232089..1e6dfb99 100644
--- a/src/config/chains/ux/index.ts
+++ b/src/config/chains/ux/index.ts
@@ -72,11 +72,11 @@ export default class UX extends BaseChain {
     }
 
     getLargeLogoPath(): string {
-        return 'chains/ux/logo_sm.jpeg';
+        return 'chains/ux/logo_sm.png';
     }
 
     getSmallLogoPath(): string {
-        return 'chains/ux/logo_sm.jpeg';
+        return 'chains/ux/logo_sm.png';
     }
 
     getMapDisplay(): boolean {
diff --git a/src/css/app.sass b/src/css/app.sass
index 259e5c8a..c83c189c 100644
--- a/src/css/app.sass
+++ b/src/css/app.sass
@@ -35,11 +35,11 @@ body
 .flex-grow-1
     flex-grow: 1
 
-.gradient-box
+.header-support
     min-height: 350px
     height: 70vh
     width: 100%
-    background: var(--q-color-secondary-gradient)
+    background: var(--q-color-header-support-background)
 
 .gradient-color
     .q-linear-progress__model--determinate
diff --git a/src/css/quasar.variables.sass b/src/css/quasar.variables.sass
index 0e567125..af358c46 100644
--- a/src/css/quasar.variables.sass
+++ b/src/css/quasar.variables.sass
@@ -1,6 +1,6 @@
 // global sass quasar variables
-$primary   : #1976d2
-$secondary : #26A69A
+$primary   : #11589e
+$secondary : #5d5d5d
 $accent    : #9C27B0
 $dark      : #1d1d1d
 $dark-page : #121212
@@ -11,15 +11,21 @@ $warning   : #F2C037
 
 // custom definitions to enable quasar overriding
 :root 
-  --q-color-map: #1976d2
+  --q-color-map: #8C8C8C
   --q-color-sidebar-selected: #d1d1d1
-  --q-color-primary-gradient: linear-gradient(90deg, #26A69A 0%, #1976d2 100%)
-  --q-color-secondary-gradient: linear-gradient(180deg, #26A69A 0%, #1976d2 147.34%)
+  --q-color-primary-gradient: linear-gradient(90deg, #5d5d5d 0%, #5d5d5d 100%)
+  --q-color-secondary-gradient: linear-gradient(180deg, #5d5d5d 0%, #5d5d5d 147.34%)
   --q-color-tertiary-gradient: linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)
-  --q-color-progress-gradient: linear-gradient(90deg, #1976d2 0%, #A088F9 48.44%, #CBCAF5 100%)
-  --q-color-producer-card-background: #f5f4fe
-  --q-color-select-box-background: #e0dffb
+  --q-color-progress-gradient: #11589e
+  --q-color-producer-card-background: #f0f0f0
+  --q-color-select-box-background: #e9e9e9
   --q-color-seperator-background: rgba(138, 101, 212, 0.1)
   --q-color-card-shadow: rgba(37, 42, 97, 0.3)
   --q-color-dropdown-card: #172c6c
+
+  --q-color-header-background: #4C4C4C
+  --q-color-header-text: #FFFFFF
+  --q-color-header-border: #777777
+  --q-color-header-support-background: linear-gradient(180deg, #4C4C4C 0%, #3B3B3B 147.34%)
+  --q-color-graph-shadow: #3f65c228
   
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 1feb39d1..6be106f7 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,19 +1,12 @@
 <script lang="ts">
 import AppFooter from 'components/Footer.vue';
 import AppHeader from 'components/Header.vue';
-import ChainsSidebar from 'components/ChainsSidebar.vue';
 
 export default {
     name: 'MainLayout',
     components: {
         AppHeader,
         AppFooter,
-        ChainsSidebar,
-    },
-    setup() {
-        return {
-            showSidebar: () => process.env.SHOW_SIDEBAR === 'true',
-        };
     },
 };
 </script>
@@ -23,9 +16,7 @@ export default {
 <q-layout view="lHh lpR lff">
     <q-header>
         <AppHeader/>
-        <q-separator class="separator"/>
     </q-header>
-    <ChainsSidebar v-if="showSidebar()"/>
     <q-page-container>
         <router-view/>
     </q-page-container>
@@ -36,9 +27,4 @@ export default {
 </template>
 
 <style lang="sass" scoped>
-.q-header
-  background-color: var(--q-secondary)
-.separator
-  height: 2px
-  min-height: 2px
 </style>
diff --git a/src/pages/Account.vue b/src/pages/Account.vue
index b105a519..05f27d88 100644
--- a/src/pages/Account.vue
+++ b/src/pages/Account.vue
@@ -54,7 +54,7 @@ export default defineComponent({
 
 <template>
 <div class="row col-12">
-    <div class="column col-12 gradient-box">
+    <div class="column col-12 header-support">
         <div class="row">
             <AccountCard class="account-card" :account="account" :tokens="tokenList"/>
         </div>
diff --git a/src/pages/Block.vue b/src/pages/Block.vue
index 38f02c71..7bbe418f 100644
--- a/src/pages/Block.vue
+++ b/src/pages/Block.vue
@@ -60,7 +60,7 @@ export default defineComponent({
 <template>
 
 <div class="row">
-    <div class="col-12 gradient-box q-pb-lg">
+    <div class="col-12 header-support q-pb-lg">
         <BlockCard v-if="found" class="q-pa-lg" :block="block"/>
         <div v-else class="q-pa-lg">
             <div class="row full-width justify-center">
diff --git a/src/pages/Network.vue b/src/pages/Network.vue
index e696dd60..8a270cf1 100644
--- a/src/pages/Network.vue
+++ b/src/pages/Network.vue
@@ -104,7 +104,7 @@ export default defineComponent({
 <template>
 <div class="row">
     <div class="col-12">
-        <div v-if="mapDisplay" class="row gradient-box justify-center render-container" :class="{'show-map' : showMap}">
+        <div v-if="mapDisplay" class="row header-support justify-center render-container" :class="{'show-map' : showMap}">
             <div class="row full-width chevron-toggle hide" @click="toggleMap">
                 <div v-if="showMap" class="items-center arrow-button" >
                     <q-icon class="fas fa-chevron-up q-pr-lg chevron" size="17px"/>
diff --git a/src/pages/ProposalItem.vue b/src/pages/ProposalItem.vue
index 590d721f..f3405660 100644
--- a/src/pages/ProposalItem.vue
+++ b/src/pages/ProposalItem.vue
@@ -458,7 +458,7 @@ export default defineComponent({
 </script>
 
 <template>
-<div class="proposal-item full-width row justify-center items-center gradient-box">
+<div class="proposal-item full-width row justify-center items-center header-support">
     <div v-if="isLoading" class="col text-center">
         <q-spinner color="white" size="2em"/>
     </div>
diff --git a/src/pages/TransactionPage.vue b/src/pages/TransactionPage.vue
index e8858666..3f2fc49b 100644
--- a/src/pages/TransactionPage.vue
+++ b/src/pages/TransactionPage.vue
@@ -47,7 +47,7 @@ export default defineComponent({
 <template>
 
 <div class="row">
-    <div class="col-12 gradient-box">
+    <div class="col-12 header-support">
         <TransactionCard v-if="found" class="q-pa-lg" />
         <div v-else class="q-pa-lg">
             <div class="row full-width justify-center">
diff --git a/src/pages/Vote.vue b/src/pages/Vote.vue
index 186c94e4..c850be6c 100644
--- a/src/pages/Vote.vue
+++ b/src/pages/Vote.vue
@@ -25,5 +25,5 @@ export default defineComponent({
 });
 </script>
 <template>
-<ValidatorData class="container-max-width"/>
+<ValidatorData />
 </template>
diff --git a/src/types/Chain.d.ts b/src/types/Chain.d.ts
index f3ed4ab1..77db0e11 100644
--- a/src/types/Chain.d.ts
+++ b/src/types/Chain.d.ts
@@ -20,4 +20,5 @@ export interface Chain {
   getMapDisplay(): boolean;
   getTheme(): Theme;
   getFiltersSupported(prop: string): boolean;
+  isTestnet(): boolean;
 }
diff --git a/src/types/Theme.ts b/src/types/Theme.ts
index b444a221..a88fdc24 100644
--- a/src/types/Theme.ts
+++ b/src/types/Theme.ts
@@ -14,6 +14,11 @@ export interface Theme {
   'color-progress-gradient'?: string;
   'color-producer-card-background'?: string;
   'color-select-box-background'?: string;
+  'color-header-background'?: string;
+  'color-header-text'?: string;
+  'color-header-border'?: string;
+  'color-header-support-background'?: string;
+  'color-graph-shadow'?: string;
 }
 
 export const themeProps: (keyof Theme)[] = [
@@ -32,4 +37,9 @@ export const themeProps: (keyof Theme)[] = [
     'color-progress-gradient',
     'color-producer-card-background',
     'color-select-box-background',
+    'color-header-background',
+    'color-header-text',
+    'color-header-border',
+    'color-header-support-background',
+    'color-graph-shadow',
 ];