diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
index e5329cab2..9d32fabcf 100644
--- a/src/components/assets/Account.vue
+++ b/src/components/assets/Account.vue
@@ -111,6 +111,7 @@ import { getEvmMappedSs58Address, setAddressMapping } from 'src/hooks/helper/add
 import { useStore } from 'src/store';
 import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
+import AuIcon from '../header/modals/account-unification/AuIcon.vue';
 
 export default defineComponent({
   components: {
diff --git a/src/components/header/modals/Account.vue b/src/components/header/modals/Account.vue
new file mode 100644
index 000000000..9fcb23a63
--- /dev/null
+++ b/src/components/header/modals/Account.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="wrapper--account-detail">
+    <div class="box--account">
+      <div v-if="accountName" class="row--account">
+        <div class="account-name">
+          {{ accountName }}
+        </div>
+      </div>
+      <div class="row--account">
+        <div class="address">
+          {{ getShortenAddress(accountAddress) }}
+        </div>
+      </div>
+      <div v-if="showBalance" class="row--balance-icons">
+        <div>
+          <span v-if="showBalanceValue" class="text--balance">
+            {{ $n(getBalance(accountAddress)) }}
+            {{ nativeTokenSymbol }}
+          </span>
+          <span v-else class="text--balance-hide"> ----- {{ nativeTokenSymbol }} </span>
+        </div>
+      </div>
+    </div>
+    <div class="icons">
+      <button class="box--share btn--primary" @click="copyAddress(accountAddress)">
+        <div class="icon--primary">
+          <astar-icon-copy />
+        </div>
+        <q-tooltip>
+          <span class="text--tooltip">{{ $t('copy') }}</span>
+        </q-tooltip>
+      </button>
+      <a :href="explorerUrl + accountAddress" target="_blank" rel="noopener noreferrer">
+        <button class="box--share btn--primary">
+          <div class="icon--primary">
+            <astar-icon-external-link />
+          </div>
+          <q-tooltip>
+            <span class="text--tooltip">{{ $t('assets.explorer') }}</span>
+          </q-tooltip>
+        </button>
+      </a>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { getShortenAddress } from '@astar-network/astar-sdk-core';
+import copy from 'copy-to-clipboard';
+import { useStore } from 'src/store';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+  props: {
+    accountName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    accountAddress: {
+      type: String,
+      required: true,
+    },
+    explorerUrl: {
+      type: String,
+      required: true,
+    },
+    showBalanceValue: {
+      type: Boolean,
+      required: true,
+    },
+    showBalance: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    nativeTokenSymbol: {
+      type: String,
+      required: true,
+    },
+    getBalance: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup() {
+    const store = useStore();
+    const { t } = useI18n();
+
+    const copyAddress = (address: string): void => {
+      copy(address);
+      store.dispatch('general/showAlertMsg', {
+        msg: t('toast.copyAddressSuccessfully'),
+        alertType: 'copied',
+      });
+    };
+
+    return { getShortenAddress, copyAddress };
+  },
+});
+</script>
+<style lang="scss" scoped>
+@use 'src/components/header/styles/modal-account.scss';
+</style>
diff --git a/src/components/header/modals/ModalAccount.vue b/src/components/header/modals/ModalAccount.vue
index 9b5c36503..d66dce316 100644
--- a/src/components/header/modals/ModalAccount.vue
+++ b/src/components/header/modals/ModalAccount.vue
@@ -53,53 +53,26 @@
                   class="radio-btn"
                   @change="selAccount = account.address"
                 />
-                <div class="wrapper--account-detail">
-                  <div class="box--account">
-                    <div class="row--account">
-                      <div class="account-name">
-                        <span>
-                          {{ account.name }}
-                        </span>
-                      </div>
-                      <div class="address">
-                        <span>
-                          {{ getShortenAddress(account.address, 4) }}
-                        </span>
-                      </div>
-                    </div>
-                    <div class="row--balance-icons">
-                      <div>
-                        <span v-if="isShowBalance && !isLoadingBalance" class="text--balance">
-                          {{ $n(displayBalance(account.address)) }}
-                          {{ nativeTokenSymbol }}
-                        </span>
-                        <span v-else class="text--balance-hide">
-                          ----- {{ nativeTokenSymbol }}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="icons">
-                    <button class="box--share btn--primary" @click="copyAddress(account.address)">
-                      <div class="icon--primary">
-                        <astar-icon-copy />
-                      </div>
-                      <q-tooltip>
-                        <span class="text--tooltip">{{ $t('copy') }}</span>
-                      </q-tooltip>
-                    </button>
-                    <a :href="subScan + account.address" target="_blank" rel="noopener noreferrer">
-                      <button class="box--share btn--primary">
-                        <div class="icon--primary">
-                          <astar-icon-external-link />
-                        </div>
-                        <q-tooltip>
-                          <span class="text--tooltip">{{ $t('subscan') }}</span>
-                        </q-tooltip>
-                      </button>
-                    </a>
-                  </div>
-                </div>
+                <account
+                  v-if="!account.evmAddress"
+                  :account-name="account.name"
+                  :account-address="account.address"
+                  :explorer-url="subScan"
+                  :native-token-symbol="nativeTokenSymbol"
+                  :show-balance-value="isShowBalance && !isLoadingBalance"
+                  :get-balance="displayBalance"
+                />
+                <unified-account
+                  v-else
+                  :native-address="account.address"
+                  :evm-address="account.evmAddress ?? ''"
+                  :account-name="account.name"
+                  :show-balance="isShowBalance && !isLoadingBalance"
+                  :native-token-symbol="nativeTokenSymbol"
+                  :explorer-url="subScan"
+                  :avatar-url="account.avatarUrl ?? ''"
+                  :get-balance="displayBalance"
+                />
                 <div v-if="index === previousSelIdx" class="dot" />
               </label>
             </li>
@@ -146,13 +119,17 @@ import { useStore } from 'src/store';
 import { SubstrateAccount } from 'src/store/general/state';
 import { computed, defineComponent, PropType, ref, watch, onUnmounted, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useBreakpoints, useNetworkInfo } from 'src/hooks';
+import { useBreakpoints, useNetworkInfo, useAccount } from 'src/hooks';
 import { Ledger } from '@polkadot/hw-ledger';
 import { astarChain } from 'src/config/chain';
+import UnifiedAccount from './UnifiedAccount.vue';
+import Account from './Account.vue';
 
 export default defineComponent({
   components: {
     SelectedWallet,
+    UnifiedAccount,
+    Account,
   },
   props: {
     isOpen: {
@@ -207,6 +184,7 @@ export default defineComponent({
     const { t } = useI18n();
     const { width, screenSize } = useBreakpoints();
     const { currentNetworkChain } = useNetworkInfo();
+    const { checkIfUnified } = useAccount();
 
     const substrateAccounts = computed<SubstrateAccount[]>(() => {
       const accounts: SubstrateAccount[] = accountBalanceMap.value || [];
@@ -300,11 +278,21 @@ export default defineComponent({
       isLoadingBalance.value = true;
       const updatedAccountMap = await Promise.all(
         substrateAccountsAll.value.map(async (it) => {
-          const balance = await fetchNativeBalance({
-            api: $api as ApiPromise,
-            address: it.address,
-          });
-          return { ...it, balance };
+          const [balance, unifiedAccount] = await Promise.all([
+            fetchNativeBalance({
+              api: $api as ApiPromise,
+              address: it.address,
+            }),
+            checkIfUnified(it.address, false),
+          ]);
+
+          return {
+            ...it,
+            balance,
+            evmAddress: unifiedAccount?.evmAddress,
+            name: unifiedAccount?.name ?? it.name,
+            avatarUrl: unifiedAccount?.avatarUrl,
+          };
         })
       );
       // Memo: we use local `accountBalanceMap` state because updating global `substrateAccounts` state triggers UI bug on this drawer
diff --git a/src/components/header/modals/UnifiedAccount.vue b/src/components/header/modals/UnifiedAccount.vue
new file mode 100644
index 000000000..6c5edfa6a
--- /dev/null
+++ b/src/components/header/modals/UnifiedAccount.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="container--account">
+    <div class="row--account--header">
+      <div class="row--icon">
+        <au-icon :icon-url="avatarUrl" :native-address="nativeAddress" class="icon" />
+        <div class="account-name">
+          {{ accountName }}
+        </div>
+      </div>
+      <div class="row--balance-icons row--balance">
+        <div>
+          <span v-if="showBalance" class="text--balance">
+            {{ $n(getBalance(nativeAddress)) }}
+            {{ nativeTokenSymbol }}
+          </span>
+          <span v-else class="text--balance-hide"> ----- {{ nativeTokenSymbol }} </span>
+        </div>
+      </div>
+    </div>
+    <div class="container--addresses">
+      <div class="container--address">
+        <img :src="walletIcons.substrate" alt="Wallet icon" />
+        <account
+          :account-address="nativeAddress"
+          :explorer-url="explorerUrl"
+          :native-token-symbol="nativeTokenSymbol"
+          :show-balance-value="false"
+          :show-balance="false"
+          :get-balance="getBalance"
+        />
+      </div>
+      <div class="container--address container--address--eth">
+        <img :src="walletIcons.evm" alt="Wallet icon" />
+        <account
+          :account-address="evmAddress"
+          :explorer-url="blockScout"
+          :native-token-symbol="nativeTokenSymbol"
+          :show-balance-value="false"
+          :show-balance="false"
+          :get-balance="getBalance"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, computed, PropType } from 'vue';
+import { getShortenAddress } from '@astar-network/astar-sdk-core';
+import Account from './Account.vue';
+import { providerEndpoints } from 'src/config/chainEndpoints';
+import { useNetworkInfo } from 'src/hooks';
+import AuIcon from './account-unification/AuIcon.vue';
+
+export default defineComponent({
+  components: {
+    Account,
+    AuIcon,
+  },
+  props: {
+    accountName: {
+      type: String,
+      required: true,
+    },
+    nativeAddress: {
+      type: String,
+      required: true,
+    },
+    evmAddress: {
+      type: String,
+      required: true,
+    },
+    showBalance: {
+      type: Boolean,
+      required: true,
+    },
+    nativeTokenSymbol: {
+      type: String,
+      required: true,
+    },
+    explorerUrl: {
+      type: String,
+      required: true,
+    },
+    avatarUrl: {
+      type: String,
+      required: true,
+    },
+    getBalance: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { currentNetworkIdx } = useNetworkInfo();
+    const walletIcons = {
+      substrate: require('/src/assets/img/logo-polkadot-js.png'),
+      evm: require('/src/assets/img/ethereum.png'),
+    };
+
+    const blockScout = computed<string>(
+      () => `${providerEndpoints[currentNetworkIdx.value].blockscout}/address/`
+    );
+
+    return { getShortenAddress, blockScout, walletIcons };
+  },
+});
+</script>
+<style lang="scss" scoped>
+@use 'src/components/header/styles/modal-account.scss';
+@import 'src/css/quasar.variables.scss';
+
+.container--addresses {
+  width: 100%;
+  padding: 12px 16px;
+  background-color: $gray-1;
+  border-radius: 6px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  color: $gray-3;
+}
+
+.container--account {
+  width: 100%;
+}
+
+.container--address {
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 16px;
+    height: 16px;
+    margin-right: 12px;
+  }
+}
+
+.container--address--eth {
+  margin-top: 12px;
+}
+
+.row--balance {
+  margin-left: auto;
+}
+
+.row--icon {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 12px;
+}
+
+.row--account--header {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.body--dark {
+  .container--addresses {
+    background-color: $navy-2;
+  }
+}
+</style>
diff --git a/src/components/header/styles/modal-account.scss b/src/components/header/styles/modal-account.scss
index 6729b98f0..dbb4cd797 100644
--- a/src/components/header/styles/modal-account.scss
+++ b/src/components/header/styles/modal-account.scss
@@ -103,7 +103,6 @@
   display: flex;
   align-items: flex-start;
   column-gap: 8px;
-  margin-top: 10px;
 }
 
 .row--account {
@@ -124,12 +123,11 @@
 }
 
 .address {
-  color: $gray-4;
+  color: $gray-3;
   font-weight: 510;
   font-size: 12px;
   line-height: 20px;
   text-align: left;
-  margin-top: 4px;
   position: relative;
   @media (min-width: $sm) {
     margin-top: 0px;
@@ -210,8 +208,9 @@
 }
 
 .dot {
-  position: relative;
-  top: -30px;
+  margin-top: 12px;
+  margin-left: 8px;
+  align-self: flex-start;
   height: 7px;
   width: 8px;
   border-radius: 90%;
@@ -221,7 +220,7 @@
 .text--balance {
   font-weight: 500;
   font-size: 12px;
-  color: $gray-5;
+  color: $gray-3;
 }
 
 .text--balance-hide {
@@ -271,4 +270,8 @@
   .text--balance {
     color: white;
   }
+
+  .account-name {
+    color: $gray-1;
+  }
 }
diff --git a/src/hooks/useAccount.ts b/src/hooks/useAccount.ts
index 459e45b4c..9a276e667 100644
--- a/src/hooks/useAccount.ts
+++ b/src/hooks/useAccount.ts
@@ -4,7 +4,7 @@ import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { SupportMultisig, SupportWallet } from 'src/config/wallets';
 import { Multisig } from 'src/modules/multisig';
 import { useStore } from 'src/store';
-import { SubstrateAccount } from 'src/store/general/state';
+import { SubstrateAccount, UnifiedAccount } from 'src/store/general/state';
 import { container } from 'src/v2/common';
 import { IEventAggregator, UnifyAccountMessage } from 'src/v2/messaging';
 import { IdentityRepository } from 'src/v2/repositories/implementations/IdentityRepository';
@@ -76,7 +76,10 @@ export const useAccount = () => {
     });
   };
 
-  const checkIfUnified = async (address: string): Promise<void> => {
+  const checkIfUnified = async (
+    address: string,
+    persistState = true
+  ): Promise<UnifiedAccount | undefined> => {
     const service = container.get<IAccountUnificationService>(Symbols.AccountUnificationService);
 
     const isEvmAddress = isValidEvmAddress(address);
@@ -107,26 +110,32 @@ export const useAccount = () => {
         }
       }
 
-      if (isValidEvmAddress(address)) {
-        store.commit('general/setUnifiedAccount', {
-          nativeAddress: mapped,
-          evmAddress: address,
-          name,
-          avatarUrl,
-          avatarMetadata: { ...nft, image: avatarUrl },
-        });
-      } else {
-        store.commit('general/setUnifiedAccount', {
-          nativeAddress: address,
-          evmAddress: mapped,
-          name,
-          avatarUrl,
-          avatarMetadata: { ...nft, image: avatarUrl },
-        });
+      const account: UnifiedAccount = {
+        nativeAddress: isEvmAddress ? mapped : address,
+        evmAddress: isEvmAddress ? address : mapped,
+        name,
+        avatarUrl,
+        avatarMetadata: {
+          name: nft?.name || '',
+          description: nft?.description || '',
+          image: avatarUrl || '',
+          contractAddress: nft?.contractAddress || '',
+          tokenId: nft?.tokenId || '',
+          tokenUri: nft?.tokenUri || '',
+          ownerAddress: nft?.ownerAddress || '',
+        },
+      };
+
+      if (persistState) {
+        store.commit('general/setUnifiedAccount', account);
       }
+
+      return account;
     } else {
       store.commit('general/setUnifiedAccount', undefined);
     }
+
+    return undefined;
   };
 
   const showAccountUnificationModal = (): void => {
diff --git a/src/store/general/state.ts b/src/store/general/state.ts
index 6f1e046a6..208d405f7 100644
--- a/src/store/general/state.ts
+++ b/src/store/general/state.ts
@@ -9,6 +9,8 @@ export type SubstrateAccount = {
   name: string;
   source: string;
   balance?: string;
+  evmAddress?: string;
+  avatarUrl?: string;
 };
 
 export enum AlertType {
diff --git a/src/v2/repositories/implementations/NftRepository.ts b/src/v2/repositories/implementations/NftRepository.ts
index 2b217ac03..b7da2e4b5 100644
--- a/src/v2/repositories/implementations/NftRepository.ts
+++ b/src/v2/repositories/implementations/NftRepository.ts
@@ -21,7 +21,7 @@ export class NftRepository implements INftRepository {
     tokenId: string
   ): Promise<NftMetadata | undefined> {
     const metadataUri = `${TOKEN_API_URL}/v1/${network}/nft/metadata/${contractAddress}/${tokenId}`;
-    const result = await axios.get(metadataUri);
+    const result = await axios.get<NftMetadata>(metadataUri);
 
     return result.data ?? undefined;
   }