diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts
index c34e02a84..0f982bf1b 100644
--- a/packages/common/src/types.ts
+++ b/packages/common/src/types.ts
@@ -5,6 +5,7 @@ import type { ethers } from 'ethers'
 export type { TypedData as EIP712TypedData } from 'eip-712'
 import type { Signer } from '@polkadot/types/types'
 import type { RequestArguments } from "@walletconnect/universal-provider";
+import { InjectedMetadata } from "@polkadot/extension-inject/types";
 
 /**
  * Types for request patching methods. Ethereum RPC request is mapped to
@@ -196,8 +197,9 @@ export interface WalletModule {
   getInterface: (helpers: GetInterfaceHelpers) =>
       Promise<WalletInterface | WalletInterfaceSubstrate>
 
-  signer ?: Signer | undefined
+  signer ?: Signer
 
+  metadata ?: InjectedMetadata
 }
 
 export type GetInterfaceHelpers = {
@@ -415,6 +417,7 @@ export interface EIP1193Provider extends SimpleEventEmitter {
 export interface SubstrateProvider extends SimpleEventEmitter{
   enable () : Promise<{
     signer ?: Signer,
+    metadata ?: InjectedMetadata
     address : AccountAddress[] } | undefined>,
   signDummy( address : string, data : string ,
              wallet ?: Signer  ) :
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 883d45538..426dcbd9f 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,5 +1,5 @@
 import type { SvelteComponent } from 'svelte'
-
+import type { InjectedMetadata } from '@polkadot/extension-inject/types';
 import type {
   AppMetadata,
   Device,
@@ -143,7 +143,8 @@ export interface WalletState {
   // is connected to multiple chains at once
   chains: ConnectedChain[]
   instance?: unknown,
-  signer ?: Signer | undefined
+  signer ?: Signer | undefined,
+  metadata ?: InjectedMetadata,
   type : 'evm' | 'substrate'
 }
 
@@ -588,6 +589,7 @@ export type WalletPermission = {
 
 export type WalletConnectState = {
   signer ?: Signer,
+  metadata ?: InjectedMetadata
   address : AccountAddress[]
 }
 
diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
index 268b5c36a..7e1fba88d 100644
--- a/packages/core/src/views/connect/Index.svelte
+++ b/packages/core/src/views/connect/Index.svelte
@@ -250,7 +250,7 @@
     const { provider, label , type } = selectedWallet
     cancelPreviousConnect$.next()
     try {
-      const { address, signer } = await Promise.race([
+      const { address, signer, metadata } = await Promise.race([
         // resolved account
         type === 'evm' ? await requestAccounts(provider as EIP1193Provider) : await enable(provider as SubstrateProvider) ,
         // or connect wallet is called again whilst waiting for response
@@ -329,11 +329,12 @@
         }
       }
 
-      const update: Pick<WalletState, 'accounts' | 'chains' | 'signer' > = {
+      const update: Pick<WalletState, 'accounts' | 'chains' | 'signer' | 'metadata'> = {
         accounts: addressFilter.map((address) =>
                 ({ address, ens: null, uns: null, balance: null })),
         chains: [{ namespace: type, id: chain }],
-        signer : signer
+        signer : signer,
+        metadata: metadata
       }
 
       addWallet({ ...selectedWallet, ...update })
diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
index 8d9e06335..86b1246cd 100644
--- a/packages/demo/src/App.tsx
+++ b/packages/demo/src/App.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import { HashRouter, Route, Routes } from 'react-router-dom';
 
 import Layout from "./components/layout/Layout";
-import Welcome from './components/Welcome';
+import Welcome from './pages/Welcome';
 import WalletInfo from './pages/WalletInfo';
 
 require('./App.scss');
diff --git a/packages/demo/src/components/AccountList.scss b/packages/demo/src/components/AccountList.scss
deleted file mode 100644
index 7f5722db4..000000000
--- a/packages/demo/src/components/AccountList.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.account-list {
-  position: relative;
-}
-
-.account-item {
-  padding: 16px 20px;
-  border: 2px solid #151A30;
-  border-radius: 8px;
-  margin-bottom: 16px;
-
-  .info {
-    margin-bottom: 16px;
-  }
-}
-
-.account-item-info {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.account-item__title {
-  font-size: 15px;
-  line-height: 26px;
-  font-weight: 500;
-  padding-right: 5px;
-}
-
-.account-item__content {
-
-  font-size: 15px;
-  line-height: 26px;
-  color: #7B8098;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
\ No newline at end of file
diff --git a/packages/demo/src/components/WalletMetadata.scss b/packages/demo/src/components/WalletMetadata.scss
deleted file mode 100644
index d4e59461e..000000000
--- a/packages/demo/src/components/WalletMetadata.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.metadata-item {
-  border: 2px solid #151A30;
-  padding: 16px 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-  overflow: hidden;
-}
-
-.metadata-item-info {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.metadata-item__title {
-  font-size: 15px;
-  line-height: 26px;
-  font-weight: 500;
-  padding-right: 5px;
-}
-
-.metadata-item__content {
-  font-size: 15px;
-  line-height: 26px;
-  color: #7B8098;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
\ No newline at end of file
diff --git a/packages/demo/src/components/WalletMetadata.tsx b/packages/demo/src/components/WalletMetadata.tsx
deleted file mode 100644
index abda9bc14..000000000
--- a/packages/demo/src/components/WalletMetadata.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-// Copyright 2019-2022 @subwallet/sub-connect authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-
-import React from 'react';
-
-
-
-require('./WalletMetadata.scss');
-
-function WalletMetadata (): React.ReactElement {
-  // const [{ wallet }] = useConnectWallet()
-  // const [injectedMetas, setInjectedMetas] = useState<InjectedMetadataKnown[]>([]);
-  //
-  // const loadMetadata = useCallback(
-  //   () => {
-  //     const metadata = wallet?.metadata;
-  //     console.log(metadata)
-  //     if (metadata) {
-  //       (metadata as InjectedMetadata).get().then((rs) => {
-  //         setInjectedMetas(rs);
-  //       });
-  //     }
-  //   },
-  //   [wallet]
-  // );
-  //
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     loadMetadata();
-  //   }, 300);
-  // }, [loadMetadata, wallet]);
-  //
-  // const addMetadata = useCallback(
-  //   () => {
-  //     const metadata = wallet?.metadata;
-  //
-  //     if (metadata) {
-  //       const newMetaDef: MetadataDef = {
-  //         chain: 'SubWallet Connect Demo',
-  //         genesisHash: '0x1bf2a278799868de66ea8610f2ce7c8c43706561b6476031315f6640fe38e888',
-  //         icon: 'substrate',
-  //         ss58Format: 0,
-  //         chainType: 'substrate',
-  //         color: '#F0F0F0',
-  //         specVersion: Math.floor(Date.now() / 1000),
-  //         tokenDecimals: 12,
-  //         tokenSymbol: 'SWCC',
-  //         types: {}
-  //       };
-  //       const key = 'add-metadata';
-  //
-  //       message.loading({ content: 'Adding Metadata', key });
-  //         (metadata as InjectedMetadata).provide(newMetaDef)
-  //         .then((rs) => {
-  //           message.success({ content: 'Add Metadata Successfully!', key });
-  //           loadMetadata();
-  //         })
-  //         .catch((error) => {
-  //           console.error(error);
-  //           message.warning({ content: 'Add Metadata Failed or Cancelled!', key });
-  //         });
-  //     }
-  //   },
-  //   [loadMetadata, wallet?.metadata]
-  // );
-
-  return (
-    <div className={'wallet-metadata'}>
-    {/*<div className={'metadata-list'}>*/}
-    {/*  {injectedMetas.map((meta) =>*/}
-    {/*    <div*/}
-    {/*      className='metadata-item'*/}
-    {/*      key={meta.genesisHash}*/}
-    {/*    >*/}
-    {/*      <div className='metadata-item-info'>*/}
-    {/*        <span className='metadata-item__title'>Genesis Hash:</span>*/}
-    {/*        <span className='metadata-item__content'>{meta.genesisHash}</span>*/}
-    {/*      </div>*/}
-    {/*      <div className='metadata-item-info'>*/}
-    {/*        <span className='metadata-item__title'>Spec Version:</span>*/}
-    {/*        <span className='metadata-item__content'>{meta.specVersion}</span>*/}
-    {/*      </div>*/}
-    {/*    </div>)}*/}
-    {/*</div>*/}
-    {/*<Button*/}
-    {/*  className='sub-wallet-btn sub-wallet-icon-btn'*/}
-    {/*  icon={<PlusCircleOutlined />}*/}
-    {/*  onClick={addMetadata}*/}
-    {/*  type={'primary'}*/}
-    {/*>Add Example Metadata</Button>*/}
-  </div>);
-}
-
-export default WalletMetadata;
diff --git a/packages/demo/src/components/AccountList.tsx b/packages/demo/src/components/account/AccountList.tsx
similarity index 94%
rename from packages/demo/src/components/AccountList.tsx
rename to packages/demo/src/components/account/AccountList.tsx
index 67628c665..793ee1bd3 100644
--- a/packages/demo/src/components/AccountList.tsx
+++ b/packages/demo/src/components/account/AccountList.tsx
@@ -8,14 +8,14 @@ import React, {useCallback, useEffect, useState} from 'react';
 
 import {useConnectWallet, useNotifications, useSetChain} from "@subwallet_connect/react";
 import {EIP1193Provider, SubstrateProvider} from "@subwallet_connect/common";
-import {GeneralEmptyList} from "./empty";
-import {RequestArguments, ThemeProps} from "../types";
+import {GeneralEmptyList} from "../empty";
+import {RequestArguments, ThemeProps} from "../../types";
 import CN from "classnames";
 import styled from "styled-components";
 import {Maybe} from "@metamask/providers/dist/utils";
-import {evmApi} from "../utils/api/evmApi";
-import {substrateApi} from "../utils/api/substrateApi";
-import {NetworkInfo} from "../utils/network";
+import {evmApi} from "../../utils/api/evmApi";
+import {substrateApi} from "../../utils/api/substrateApi";
+import {NetworkInfo} from "../../utils/network";
 
 
 interface Props extends ThemeProps{};
@@ -165,7 +165,7 @@ function Component ({className}: Props): React.ReactElement {
         </div>
         <div className={'__account-item-info'}>
           <Button
-            className={CN('__wallet-btn', 'sub-wallet-sign-btn')}
+            className={CN('__wallet-btn', '__sub-wallet-sign-btn')}
             onClick={onSignClicked(account)}
             block={true}
           >
@@ -173,7 +173,7 @@ function Component ({className}: Props): React.ReactElement {
           </Button>
 
           <Button
-            className={CN('__wallet-btn', 'sub-wallet-transaction-btn')}
+            className={CN('__wallet-btn', '__sub-wallet-transaction-btn')}
             onClick={onTransactionClicked(account)}
             block={true}
           >
@@ -256,7 +256,7 @@ export const AccountList = styled(Component)<Props>( ({theme: {token}}) => {
         color: token.colorTextLight4
       },
 
-      '.sub-wallet-transaction-btn': {
+      '.__sub-wallet-transaction-btn': {
         backgroundColor: "#252525",
 
         '&:hover': {
diff --git a/packages/demo/src/components/metadata/WalletMetadata.tsx b/packages/demo/src/components/metadata/WalletMetadata.tsx
new file mode 100644
index 000000000..c2762b877
--- /dev/null
+++ b/packages/demo/src/components/metadata/WalletMetadata.tsx
@@ -0,0 +1,188 @@
+// Copyright 2019-2022 @subwallet/sub-connect authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+
+import React, { useCallback, useEffect, useState } from 'react';
+import styled from "styled-components";
+import { ThemeProps } from "../../types";
+import { useConnectWallet, useNotifications } from "@subwallet_connect/react";
+import { PlusCircleOutlined } from "@ant-design/icons";
+import { InjectedMetadataKnown, InjectedMetadata, MetadataDef  } from "@polkadot/extension-inject/types";
+import {Button, SwList, Web3Block} from "@subwallet/react-ui";
+import CN from "classnames";
+
+
+interface Props extends ThemeProps{};
+
+
+function Component({className}: Props): React.ReactElement {
+  const [{ wallet }] = useConnectWallet()
+  const [injectedMetas, setInjectedMetas] = useState<InjectedMetadataKnown[]>([]);
+  const customNotification = useNotifications()[1];
+
+  const loadMetadata = useCallback(
+    () => {
+      const metadata = wallet?.metadata;
+      console.log(metadata)
+      if (metadata) {
+        (metadata as InjectedMetadata).get().then((rs) => {
+          setInjectedMetas(rs);
+        });
+      }
+    },
+    [wallet]
+  );
+
+  useEffect(() => {
+    setTimeout(() => {
+      loadMetadata();
+    }, 300);
+  }, [loadMetadata, wallet]);
+
+  const addMetadata = useCallback(
+    () => {
+      const metadata = wallet?.metadata;
+
+      if (metadata) {
+        const newMetaDef: MetadataDef = {
+          chain: 'SubWallet Connect Demo',
+          genesisHash: '0x1bf2a278799868de66ea8610f2ce7c8c43706561b6476031315f6640fe38e888',
+          icon: 'substrate',
+          ss58Format: 0,
+          chainType: 'substrate',
+          color: '#F0F0F0',
+          specVersion: Math.floor(Date.now() / 1000),
+          tokenDecimals: 12,
+          tokenSymbol: 'SWCC',
+          types: {}
+        };
+
+
+        const { update, dismiss } = customNotification({
+          type: 'pending',
+          message:
+            `Adding Metadata`,
+          autoDismiss: 0
+        });
+          (metadata as InjectedMetadata).provide(newMetaDef)
+          .then((rs) => {
+            update({
+              eventCode: 'dbUpdateSuccess',
+              message: `Add Metadata Successfully!`,
+              type: 'success',
+              autoDismiss: 0
+            })
+            loadMetadata();
+          })
+          .catch((error) => {
+            console.error(error);
+            update({
+              eventCode: 'dbUpdateSuccess',
+              message: `Add Metadata Failed or Cancelled!`,
+              type: 'error',
+              autoDismiss: 0
+            })
+          });
+      }
+    },
+    [loadMetadata, wallet?.metadata]
+  );
+
+  const metadataItem = useCallback((meta: InjectedMetadataKnown)=> {
+
+
+    const _middleItem = (
+      <div className={'__metadata-item-middle'}>
+        <div className='__metadata-item-info'>
+          <span className='__metadata-item__title'>Genesis Hash:</span>
+          <span className='__metadata-item__content'>{meta.genesisHash}</span>
+        </div>
+        <div className='__metadata-item-info'>
+          <span className='__metadata-item__title'>Spec Version:</span>
+          <span className='__metadata-item__content'>{meta.specVersion}</span>
+        </div>
+        <Button
+          className='__sub-wallet-btn'
+          icon={<PlusCircleOutlined />}
+          onClick={addMetadata}
+          block={true}
+        >Add Example Metadata</Button>
+      </div>
+    )
+
+    return(
+      <Web3Block
+        key={meta.genesisHash}
+        className={'__metadata-item'}
+        middleItem={_middleItem}
+      />
+    )
+
+  }, [wallet])
+
+  return (
+    <div className={CN(className, 'wallet-metadata')}>
+    <SwList
+      className={'__metadata-list'}
+      list={injectedMetas}
+      renderWhenEmpty={<></>}
+      renderItem={metadataItem}
+    >
+    </SwList>
+  </div>);
+}
+
+const WalletMetadata = styled(Component)<Props>(({theme:{token}}: Props) => {
+  return {
+    '&.__metadata-list': {
+      position: 'relative',
+      width: '100%'
+    },
+
+    '.__metadata-item': {
+      padding: token.padding,
+      width: '100%',
+      marginBottom: token.marginSM,
+      backgroundColor: token.colorBgSecondary,
+      borderRadius: 8,
+    },
+
+    '.__metadata-item-middle': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: token.paddingSM,
+      overflow: 'hidden'
+    },
+
+    '.__metadata-item-info': {
+      display: 'flex',
+      justifyContent: 'space-between',
+      width: '100%',
+      overflow: 'hidden',
+      gap: token.paddingSM
+    },
+
+    '.__metadata-item__title': {
+      fontSize: token.fontSizeHeading6,
+      fontStyle: 'normal',
+      fontWeight: 600,
+      width: 128,
+      lineHeight: '22px',
+      overflow: 'hidden'
+    },
+
+
+    '.__metadata-item__content': {
+      textOverflow: 'ellipsis',
+      fontSize: token.fontSizeHeading6,
+      overflow: 'hidden',
+      fontStyle: 'normal',
+      fontWeight: 500,
+      lineHeight: '22px',
+      color: token.colorTextLight4
+    },
+
+  }
+})
+
+export default WalletMetadata;
diff --git a/packages/demo/src/pages/EvmWalletInfo.tsx b/packages/demo/src/pages/EvmWalletInfo.tsx
index 111ecbd07..beaa8807e 100644
--- a/packages/demo/src/pages/EvmWalletInfo.tsx
+++ b/packages/demo/src/pages/EvmWalletInfo.tsx
@@ -9,8 +9,8 @@ import {HeaderWalletInfo} from "../components/header/HeaderWalletInfo";
 import { ThemeProps } from '../types';
 import CN from "classnames";
 import styled from "styled-components";
-import AccountList from "../components/AccountList";
-import WalletMetadata from "../components/WalletMetadata";
+import AccountList from "../components/account/AccountList";
+import WalletMetadata from "../components/metadata/WalletMetadata";
 
 
 
@@ -42,10 +42,7 @@ function Component ({className}: Props): React.ReactElement {
             <AccountList />
           </div>
           <div className={'__evm-wallet-info-box'}>
-            <div className={'__evm-wallet-info-label'}>
-              Metadata
-            </div>
-            <WalletMetadata />
+
           </div>
         </div>
       </div>
diff --git a/packages/demo/src/pages/WalletInfo.tsx b/packages/demo/src/pages/WalletInfo.tsx
index b32e80327..ec173aae9 100644
--- a/packages/demo/src/pages/WalletInfo.tsx
+++ b/packages/demo/src/pages/WalletInfo.tsx
@@ -3,8 +3,8 @@
 
 import React, {useEffect} from 'react';
 
-import AccountList from '../components/AccountList';
-import WalletMetadata from '../components/WalletMetadata';
+import AccountList from '../components/account/AccountList';
+import WalletMetadata from '../components/metadata/WalletMetadata';
 import { useNavigate } from "react-router-dom";
 import { useConnectWallet } from "@subwallet_connect/react";
 import { HeaderWalletInfo } from "../components/header/HeaderWalletInfo";
@@ -36,12 +36,12 @@ function Component ({className}: Props): React.ReactElement {
         </div>
         <AccountList />
       </div>
-      <div className={'__wallet-info-box'}>
-          <div className={'__wallet-info-label'}>
-            Metadata
-          </div>
-        <WalletMetadata />
-      </div>
+      {!!wallet?.metadata && <div className={'__wallet-info-box'}>
+        <div className={'__wallet-info-label'}>
+          Metadata
+        </div>
+        <WalletMetadata/>
+      </div>}
     </div>
   </div>
   );
diff --git a/packages/demo/src/components/Welcome.tsx b/packages/demo/src/pages/Welcome.tsx
similarity index 98%
rename from packages/demo/src/components/Welcome.tsx
rename to packages/demo/src/pages/Welcome.tsx
index bcf095a73..c965e2ee4 100644
--- a/packages/demo/src/components/Welcome.tsx
+++ b/packages/demo/src/pages/Welcome.tsx
@@ -8,7 +8,7 @@ import { useConnectWallet } from "@subwallet_connect/react";
 import {Theme, ThemeProps} from "../types";
 import CN from "classnames";
 import styled, {useTheme} from "styled-components";
-import { Web3OnboardLogo, SubWalletLogo, DualLogo } from "./logo";
+import { Web3OnboardLogo, SubWalletLogo, DualLogo } from "../components/logo";
 import { Icon, Button, Anchor } from '@subwallet/react-ui';
 import { CheckCircle, Info } from "@phosphor-icons/react";
 import {INSTALL_WALLET} from "../constants/common";
diff --git a/packages/hw-common/src/views/AccountSelect.svelte b/packages/hw-common/src/views/AccountSelect.svelte
index 547ec34a4..96dfe897a 100644
--- a/packages/hw-common/src/views/AccountSelect.svelte
+++ b/packages/hw-common/src/views/AccountSelect.svelte
@@ -544,6 +544,7 @@
         />
         <AddressTable
           {accountsListObject}
+          lengthAccountSelectedDefault={10}
           {showEmptyAddresses}
           {handleAddAccount}
           bind:accountSelected
diff --git a/packages/injected/src/wallets.ts b/packages/injected/src/wallets.ts
index 309b03962..4efbccd6e 100644
--- a/packages/injected/src/wallets.ts
+++ b/packages/injected/src/wallets.ts
@@ -6,6 +6,7 @@ import type {
   WalletInterfaceSubstrate, SubstrateProvider, AccountsListener, ConnectListener, DisconnectListener, MessageListener, ProviderEvent, QrModalListener, UriListener
 } from '@subwallet_connect/common'
 import type {
+  InjectedMetadata,
   InjectedWindow
 } from '@polkadot/extension-inject/types';
 import {createEIP1193Provider, ProviderAccounts} from '@subwallet_connect/common'
@@ -992,6 +993,7 @@ const subwalletDOT: InjectedWalletModule = {
 
           return {
             signer: rawExtension.signer as Signer,
+            metadata: rawExtension.metadata as InjectedMetadata,
             address: accounts.map(
               (account: { address: string }) => account.address
             )
@@ -1069,6 +1071,7 @@ const talismanDOT: InjectedWalletModule = {
 
           return {
             signer: rawExtension.signer as Signer,
+            metadata: rawExtension.metadata as InjectedMetadata,
             address: accounts.map(
               (account: { address: string }) => account.address
             )
@@ -1147,6 +1150,7 @@ const polkadotjs: InjectedWalletModule = {
 
           return {
             signer: rawExtension.signer as Signer,
+            metadata: rawExtension.metadata as InjectedMetadata,
             address: accounts.map(
               (account: { address: string; }) => account.address
             )
diff --git a/packages/ledgerPolkadot/src/index.ts b/packages/ledgerPolkadot/src/index.ts
index 0305e6279..a0ed111a1 100644
--- a/packages/ledgerPolkadot/src/index.ts
+++ b/packages/ledgerPolkadot/src/index.ts
@@ -268,8 +268,7 @@ function ledgerPolkadot({
                                 )
                             }
                             return {
-                                address: accounts.map((account) => account.address),
-                                signer: undefined
+                                address: accounts.map((account) => account.address)
                             }
                         } catch (error) {
                             const {name} = error as { name: string }