diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
index c99626d6b..e46d148ba 100644
--- a/packages/core/src/views/connect/Index.svelte
+++ b/packages/core/src/views/connect/Index.svelte
@@ -186,7 +186,7 @@
 
       connectingErrorMessage = ''
       scrollToTop()
-      setTimeout(() => setStep('connectingWallet'), 1)
+      setStep('connectingWallet')
     } catch (error) {
       const { message } = error as { message: string }
       connectingErrorMessage = message
@@ -496,7 +496,7 @@
     //     return;
     //   }
     // }
-    setTimeout(() => connectWallet$.next({ inProgress: false }), 100)
+    connectWallet$.next({ inProgress: false })
   }
 
 
@@ -682,6 +682,12 @@
       display: none;
     }
   }
+
+  @media  all and ( max-width: 768px) {
+    .content {
+      padding: 2rem 1rem 2rem 1rem;
+    }
+  }
 </style>
 
 <svelte:window bind:innerWidth={windowWidth} />
diff --git a/packages/core/src/views/connect/WalletButton.svelte b/packages/core/src/views/connect/WalletButton.svelte
index a0285bca5..fe9229ff0 100644
--- a/packages/core/src/views/connect/WalletButton.svelte
+++ b/packages/core/src/views/connect/WalletButton.svelte
@@ -180,6 +180,12 @@
     /*  flex-direction: column;*/
     /*}*/
   }
+  @media screen and (max-width: 768px) {
+    button.wallet-button-styling {
+      min-width: 80px;
+    }
+  }
+
 </style>
 
 <svelte:window bind:innerWidth={windowWidth} />
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 7f852b6a2..ca8a0405c 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -77,7 +77,8 @@
     "usehooks-ts": "^2.15.1",
     "bignumber.js": "^9.1.2",
     "@types/bn.js": "^5.1.5",
-    "bn.js": "^4.11.9"
+    "bn.js": "^4.11.9",
+    "eventemitter3": "^4.0.7"
   },
   "devDependencies": {
     "@types/jest": "^29.5.8",
diff --git a/packages/demo/src/components/account/AccountBriefInfo.tsx b/packages/demo/src/components/account/AccountBriefInfo.tsx
index 9e9f96303..25ad4be26 100644
--- a/packages/demo/src/components/account/AccountBriefInfo.tsx
+++ b/packages/demo/src/components/account/AccountBriefInfo.tsx
@@ -1,6 +1,6 @@
 import { Typography } from '@subwallet/react-ui';
 import SwAvatar from '@subwallet/react-ui/es/sw-avatar';
-import React, { useMemo } from 'react';
+import React, {useContext, useMemo} from 'react';
 import styled from 'styled-components';
 
 import type { ThemeProps } from '../../types';
@@ -49,6 +49,7 @@ const AccountBriefInfo = styled(Component)<Props>(({ theme: { token } }: Props)
     },
 
     '.account-name': {
+      whiteSpace: 'nowrap',
       fontWeight: token.headingFontWeight,
       fontSize: token.fontSizeHeading5,
       lineHeight: token.lineHeightHeading5,
@@ -56,10 +57,11 @@ const AccountBriefInfo = styled(Component)<Props>(({ theme: { token } }: Props)
     },
 
     '.account-address': {
+      whiteSpace: 'nowrap',
       fontSize: token.fontSizeHeading6,
       lineHeight: token.lineHeightHeading6,
       color: token.colorTextDescription
-    }
+    },
   };
 });
 
diff --git a/packages/demo/src/components/icon/InfoIcon.tsx b/packages/demo/src/components/icon/InfoIcon.tsx
index 1056523a8..1662236ef 100644
--- a/packages/demo/src/components/icon/InfoIcon.tsx
+++ b/packages/demo/src/components/icon/InfoIcon.tsx
@@ -11,7 +11,6 @@ const InfoIcon: React.FC<Props> = (props: Props) => {
   return (
     <Icon
       phosphorIcon={Question}
-      size='md'
       {...props}
     />
   );
diff --git a/packages/demo/src/components/layout/Layout.tsx b/packages/demo/src/components/layout/Layout.tsx
index 111b0fe06..7b70516a6 100644
--- a/packages/demo/src/components/layout/Layout.tsx
+++ b/packages/demo/src/components/layout/Layout.tsx
@@ -111,11 +111,22 @@ const Layout = styled(Component)<Props>( ({ theme: { extendToken, token} }: Them
 
     },
 
+    '@media(max-width : 1660px and min-width: 768px)' : {
+      '.__main-layout': {
+        padding: '0 16px'
+      }
+
+    },
+
     '&.-isMobile':{
       '.__main-content.-isConnected': {
         padding: `0 ${token.padding}px`,
+      },
 
-      }
+      '.-upper': {
+        gap: 81,
+        marginTop: 0
+      },
     }
   }
 })
diff --git a/packages/demo/src/components/layout/WalletHeader.tsx b/packages/demo/src/components/layout/WalletHeader.tsx
index 2f68af74e..97eb3b418 100644
--- a/packages/demo/src/components/layout/WalletHeader.tsx
+++ b/packages/demo/src/components/layout/WalletHeader.tsx
@@ -109,7 +109,7 @@ function Component ({ visible, className }: Props): React.ReactElement<Props> {
               size='xs'
               type='ghost'
             >
-              Help
+             {isWebUI && 'Help'}
             </Button>
           </>
         }
@@ -158,8 +158,8 @@ const WalletHeader = styled(Component)<Props>(({theme : {token}}) => {
 
     '.__header-title': {
       fontSize: 30,
-      color: token.colorTextLight1,
-      marginLeft: 85
+      marginLeft: 30,
+      color: token.colorTextLight1
     },
 
     '.__header-action': {
@@ -182,10 +182,6 @@ const WalletHeader = styled(Component)<Props>(({theme : {token}}) => {
             paddingRight: 3
           }
         },
-
-      '.__header-title': {
-        marginLeft: 0
-      }
     },
 
     '&.-isMobile': {
@@ -198,7 +194,19 @@ const WalletHeader = styled(Component)<Props>(({theme : {token}}) => {
         flexDirection: 'column',
         alignItems: 'flex-start',
         gap: token.paddingSM
+      },
+
+      '.__header-action': {
+        width: '100%'
+      },
+
+      '.__header-title': {
+        marginLeft: 0
       }
+    },
+
+    '.__header-logo': {
+      padding: `0 ${token.padding}px`
     }
   })
 })
diff --git a/packages/demo/src/components/logo/LogoWithSubIcon.tsx b/packages/demo/src/components/logo/LogoWithSubIcon.tsx
index 14fb2ed56..8810d3666 100644
--- a/packages/demo/src/components/logo/LogoWithSubIcon.tsx
+++ b/packages/demo/src/components/logo/LogoWithSubIcon.tsx
@@ -25,13 +25,13 @@ const Component = ({className, icon, type} : Props) => {
 }
 
 
-const LogoWithSubIcon = styled(Component)<Props>(({theme}) => {
+const LogoWithSubIcon = styled(Component)<Props>(({theme: {token}}) => {
   return({
     '&.__wallet-logo': {
       position: 'relative',
+      padding: `0 ${token.padding}`,
       width: 80,
       height: 80,
-
     },
 
     '.__wallet-logo-main': {
diff --git a/packages/demo/src/components/modal/selectors/AccountSelector.tsx b/packages/demo/src/components/modal/selectors/AccountSelector.tsx
index f11e823aa..b63f34959 100644
--- a/packages/demo/src/components/modal/selectors/AccountSelector.tsx
+++ b/packages/demo/src/components/modal/selectors/AccountSelector.tsx
@@ -11,6 +11,8 @@ import { GeneralEmptyList } from '../../empty';
 import { BaseSelectModal } from '../BaseSelectModal';
 import {useConnectWallet, useSetChain, useWallets} from "@subwallet-connect/react";
 import type { Account, WalletState } from  '@subwallet-connect/core/dist/types';
+import CN from "classnames";
+import {ScreenContext} from "../../../context/ScreenContext";
 
 
 
@@ -30,6 +32,7 @@ interface WalletMapByAccountInterface {
 
 function Component ({ className }: Props): React.ReactElement<Props> {
   const wallets = useWallets();
+  const { isWebUI } = useContext(ScreenContext);
   const setPrimaryWallet = useConnectWallet()[5];
   const [ accountMap, setAccountMap ] = useState<Account[]>([]);
   const [ walletMapByAccount, setWalletMapByAccount ] = useState<WalletMapByAccountInterface>({});
@@ -91,12 +94,11 @@ function Component ({ className }: Props): React.ReactElement<Props> {
   return (
     <BaseSelectModal
       background={'default'}
-      className={className}
-      fullSizeOnMobile
+      className={CN(className)}
       id={modalId}
       ignoreScrollbarMethod='padding'
-      inputClassName={`${className} account-selector-input`}
-      inputWidth={'100%'}
+      inputClassName={CN(className, 'account-selector-input')}
+      inputWidth={isWebUI ? '100%' : '50%'}
       itemKey='address'
       items={accountMap}
       onSelect={_onSelect}
@@ -224,7 +226,8 @@ const SelectAccount = styled(Component)<Props>(({ theme }) => {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 8
-    },
+    }
+
   });
 });
 
diff --git a/packages/demo/src/components/modal/selectors/NetworkSelector.tsx b/packages/demo/src/components/modal/selectors/NetworkSelector.tsx
index ef4e98221..a7f1022ae 100644
--- a/packages/demo/src/components/modal/selectors/NetworkSelector.tsx
+++ b/packages/demo/src/components/modal/selectors/NetworkSelector.tsx
@@ -26,9 +26,7 @@ function Component (props: Props): React.ReactElement<Props> {
   const isLedgerWallet = useMemo(()=>  wallet?.label === 'Ledger' , [])
   const renderChainSelected = useCallback((item: NetworkItemType) => {
     return (
-      <>
-        { isWebUI && <div className={'__selected-item'}>{item.name}</div> }
-      </>
+       <div className={'__selected-item'}>{item.name}</div>
     );
   }, []);
 
diff --git a/packages/demo/src/components/transaction/TransactionModal.tsx b/packages/demo/src/components/transaction/TransactionModal.tsx
index 40297cad7..5d4dc873a 100644
--- a/packages/demo/src/components/transaction/TransactionModal.tsx
+++ b/packages/demo/src/components/transaction/TransactionModal.tsx
@@ -238,7 +238,8 @@ function Component ({ className, senderAccount, evmProvider, substrateProvider }
       const amount = getOutputValuesFromString(value, chainInfo.decimal || 18);
 
       if(wallet?.type === "evm"){
-        blockHash = await evmProvider?.sendTransaction(senderAccount.address, to, amount ) || ''
+        await evmProvider?.sendTransaction(senderAccount.address, to, amount )
+        evmProvider?.transactionState.on('transaction-success', (blockHash: string) => blockHash !== '' && onCloseModal())
       }else{
 
         const getSigner = async ()=>{
@@ -252,7 +253,7 @@ function Component ({ className, senderAccount, evmProvider, substrateProvider }
           if(wallet.label === 'Polkadot Vault'){
             wallet.signer = await substrateProvider?.getQrSigner(senderAccount.address, provider, chainId);
           }
-          return await substrateProvider?.sendTransaction(
+          return substrateProvider?.sendTransaction(
             senderAccount.address,
             to,
             wallet.signer,
@@ -260,15 +261,21 @@ function Component ({ className, senderAccount, evmProvider, substrateProvider }
           );
         }
 
-        await substrateProvider?.isReady()
-        blockHash = await getSigner() || '';
-
+        await substrateProvider?.isReady();
+        await getSigner();
+        substrateProvider?.transactionState.on('transaction-success', (blockHash: string) => blockHash !== '' && onCloseModal())
       }
       setLoading(false)
-      blockHash !== '' && onCloseModal();
     }catch (e) {}
   }, [wallet, chains, senderAccount, evmProvider, substrateProvider]);
 
+  useEffect(() => {
+    if(!(wallet && wallet.accounts && wallet.accounts.length > 0)){
+      substrateProvider?.transactionState.removeAllListeners('transaction-success')
+      evmProvider?.transactionState.removeAllListeners('transaction-success')
+    }
+  }, [wallet, substrateProvider, evmProvider]);
+
   const isValidInput = useCallback((input: string) => {
     return !(isNaN(parseFloat(input)) || !input.match(/^-?\d*(\.\d+)?$/));
   }, []);
diff --git a/packages/demo/src/pages/EvmWalletInfo.tsx b/packages/demo/src/pages/EvmWalletInfo.tsx
index d1cb7d537..f1d17fc66 100644
--- a/packages/demo/src/pages/EvmWalletInfo.tsx
+++ b/packages/demo/src/pages/EvmWalletInfo.tsx
@@ -82,21 +82,25 @@ function Component ({className}: Props): React.ReactElement {
             </div>
             {wallet?.accounts && wallet.accounts.length > 0 && <AccountList evmProvider={evmProvider}/>}
           </div>
-          <div className={'__evm-wallet-info-box'}>
-            <div className={'__evm-wallet-info-label'}>Permission</div>
-            <Web3Block
-              className={'__request-item'}
-              middleItem={
-              <Button
-                className='__sub-wallet-btn'
-                icon={<PlusCircleOutlined />}
-                onClick={requestPermission}
-                block={true}
-              >Request Permissions</Button>
-            }
-            />
 
-          </div>
+            <div className={'__evm-wallet-info-box'}>
+              {wallet?.label !== 'WalletConnect' &&
+                <>
+                  <div className={'__evm-wallet-info-label'}>Permission</div>
+                  <Web3Block
+                    className={'__request-item'}
+                    middleItem={
+                      <Button
+                        className='__sub-wallet-btn'
+                        icon={<PlusCircleOutlined/>}
+                        onClick={requestPermission}
+                        block={true}
+                      >Request Permissions</Button>
+                    }
+                  />
+                </>
+             }
+            </div>
         </div>
       </div>
     </div>
diff --git a/packages/demo/src/pages/Welcome.tsx b/packages/demo/src/pages/Welcome.tsx
index 648db409f..67f044568 100644
--- a/packages/demo/src/pages/Welcome.tsx
+++ b/packages/demo/src/pages/Welcome.tsx
@@ -121,7 +121,7 @@ const Welcome = styled(Component)<Props>(({theme: { token }}: ThemeProps) => {
     },
 
     '.__welcome-content__sub-text.-isMobile': {
-      padding: `0 ${token.padding}`
+      padding: `0 ${token.padding}px`
     },
 
     '.__welcome-content__btn': {
diff --git a/packages/demo/src/utils/api/evmApi.ts b/packages/demo/src/utils/api/evmApi.ts
index 441f08697..c0fa25bcf 100644
--- a/packages/demo/src/utils/api/evmApi.ts
+++ b/packages/demo/src/utils/api/evmApi.ts
@@ -6,14 +6,20 @@ import { RequestArguments } from "../../types";
 import { METHOD_MAP, SIGN_METHODS } from "../methods";
 import BigNumber from 'bignumber.js'
 import type  { TxDetails } from "@subwallet-connect/core/src/types";
+import EventEmitter from 'eventemitter3';
 
 export class evmApi {
   private readonly provider ?: Web3Provider;
+  private _transactionState = new EventEmitter();
 
   constructor (provider: EIP1193Provider){
     this.provider = new ethers.providers.Web3Provider(provider, 'any')
   }
 
+  get transactionState():  EventEmitter<string | symbol, any> {
+    return this._transactionState;
+  }
+
   public async getMaxTransfer (amount: string, senderAddress: string, recipientAddress: string) {
     if(!this.provider) return '0';
 
@@ -59,6 +65,7 @@ export class evmApi {
     }
     const sendTransaction = async (fn: (hash: string) => void) => {
       const tx = await signer.sendTransaction(txDetails);
+      this._transactionState.emit('transaction-success', tx.hash);
       fn(tx.hash);
       return tx.hash;
     }
diff --git a/packages/demo/src/utils/api/substrateApi.ts b/packages/demo/src/utils/api/substrateApi.ts
index e54f928d2..66b495ab3 100644
--- a/packages/demo/src/utils/api/substrateApi.ts
+++ b/packages/demo/src/utils/api/substrateApi.ts
@@ -8,8 +8,11 @@ import { LedgerSignature } from "@polkadot/hw-ledger/types";
 import { blake2AsU8a } from '@polkadot/util-crypto';
 import { BN_HUNDRED, BN_ZERO, isFunction, nextTick } from '@polkadot/util';
 import BN from 'bn.js';
+import EventEmitter from 'eventemitter3';
+import status from "@subwallet-connect/injected-wallets/dist/icons/status";
 export class substrateApi {
   private readonly api ?: ApiPromise;
+  private _transactionState = new EventEmitter();
 
 
   constructor (chainEndpoint: string){
@@ -18,6 +21,10 @@ export class substrateApi {
     });
   }
 
+  get transactionState():  EventEmitter<string | symbol, any> {
+    return this._transactionState;
+  }
+
   public async isReady(){
     return this.api?.isReady
   }
@@ -60,6 +67,7 @@ export class substrateApi {
         await transferExtrinsic.signAndSend(senderAddress, { signer }, ({ status, txHash }) => {
           if (status.isInBlock) {
             fn(txHash.toString());
+            this._transactionState.emit('transaction-success', txHash.toString());
             console.log(`Completed at block hash #${status.asInBlock.toString()}`);
           } else {
             console.log(`Current status: ${status.type}`);
diff --git a/packages/injected/src/icons/talisman.ts b/packages/injected/src/icons/talisman.ts
index 3670e2a0b..465a8f794 100644
--- a/packages/injected/src/icons/talisman.ts
+++ b/packages/injected/src/icons/talisman.ts
@@ -1,5 +1,5 @@
 export default `
-<svg width="100%" height="100%" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="100%" height="100%" viewBox="0 0 82 82" fill="none" style="border-radius: 13px" xmlns="http://www.w3.org/2000/svg">
     <rect width="100%" height="100%" rx="12" fill="#d5ff5c"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M59.117 44.663c.608 1.325 2.398 1.792 3.428.762l1.89-1.89a5 5 0 0 1 7.072 7.071L56.234 65.879C52.565 70.233 47.07 73 40.932 73c-6.403 0-12.102-3.008-15.763-7.689L10.464 50.607a5 5 0 0 1 7.071-7.071l1.861 1.86c1.008 1.009 2.759.555 3.354-.74a1.94 1.94 0 0 0 .182-.813V21a5 5 0 0 1 10 0v11.557c0 .994 1.018 1.669 1.966 1.37.6-.19 1.034-.737 1.034-1.366V14a5 5 0 0 1 10 0v18.561c0 .63.433 1.176 1.033 1.365.948.3 1.966-.375 1.966-1.37V21a5 5 0 1 1 10 0v22.835c0 .287.066.567.186.828z" fill="#fd4848"/>
     <path d="M56.933 55s-7.164 10-16 10c-8.837 0-16-10-16-10s7.163-10 16-10c8.836 0 16 10 16 10z" fill="#d5ff5c"/>
diff --git a/packages/ledgerPolkadot/src/icon.ts b/packages/ledgerPolkadot/src/icon.ts
index 3b68e7002..e11a5e071 100644
--- a/packages/ledgerPolkadot/src/icon.ts
+++ b/packages/ledgerPolkadot/src/icon.ts
@@ -1,5 +1,5 @@
 export default `
-<svg width="100%" height="100%" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="100%" height="100%" viewBox="0 0 160 160" style="border-radius: 13px" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="160" height="160" rx="16" fill="#00000D"/>
 <path d="M93.1482 119.207V125H135V98.8769H128.902V119.207H93.1482ZM93.1482 33V38.792H128.902V59.1231H135V33H93.1482ZM74.0104 59.1231H67.9125V98.8769H95.4153V93.6539H74.0104V59.1231ZM26 98.8769V125H67.8518V119.207H32.0979V98.8769H26ZM26 33V59.1231H32.0979V38.792H67.8518V33H26Z" fill="white"/>
 </svg>`
diff --git a/packages/polkadotVault/src/icon/closeCircle.ts b/packages/polkadotVault/src/icon/closeCircle.ts
new file mode 100644
index 000000000..66ec82f65
--- /dev/null
+++ b/packages/polkadotVault/src/icon/closeCircle.ts
@@ -0,0 +1,6 @@
+export default `
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" fill="none">
+  <path d="M18.1678 16.8326L18.1676 16.8323L15.3245 14L18.1676 11.1677L18.1678 11.1679L18.1718 11.1631C18.3211 10.9811 18.3975 10.75 18.3859 10.5149C18.3744 10.2797 18.2758 10.0572 18.1093 9.89074C17.9428 9.72425 17.7203 9.62564 17.4851 9.61409C17.25 9.60254 17.0189 9.67888 16.8369 9.82825L16.8367 9.82801L16.8323 9.83245L14 12.6755L11.1677 9.83245L11.1679 9.83223L11.1631 9.82825C10.9811 9.67888 10.75 9.60254 10.5149 9.61409C10.2797 9.62564 10.0572 9.72425 9.89075 9.89074C9.72426 10.0572 9.62565 10.2797 9.6141 10.5149C9.60255 10.75 9.67888 10.9811 9.82826 11.1631L9.82801 11.1633L9.83246 11.1677L12.6755 14L9.83246 16.8323L9.83216 16.8326C9.65626 17.0102 9.55758 17.25 9.55758 17.5C9.55758 17.75 9.65626 17.9898 9.83216 18.1674L9.83312 18.1684C10.012 18.3414 10.2511 18.4381 10.5 18.4381C10.7489 18.4381 10.988 18.3414 11.1669 18.1684L11.1677 18.1675L14 15.3245L16.8323 18.1675L16.8323 18.1676L16.8331 18.1684C17.012 18.3414 17.2511 18.4381 17.5 18.4381C17.7489 18.4381 17.988 18.3414 18.1669 18.1684L18.1678 18.1674C18.3437 17.9898 18.4424 17.75 18.4424 17.5C18.4424 17.25 18.3437 17.0102 18.1678 16.8326ZM7.71512 4.594C9.57543 3.35098 11.7626 2.68751 13.9999 2.6875C16.9985 2.69327 19.8725 3.88697 21.9928 6.00724C24.113 8.12752 25.3068 11.0016 25.3125 14.0001C25.3125 16.2375 24.649 18.4246 23.406 20.2849C22.163 22.1452 20.3962 23.5952 18.3291 24.4514C16.262 25.3076 13.9875 25.5316 11.793 25.0951C9.59864 24.6586 7.58294 23.5812 6.00086 21.9991C4.41878 20.4171 3.34137 18.4014 2.90487 16.207C2.46838 14.0125 2.6924 11.738 3.54862 9.67089C4.40483 7.6038 5.85479 5.83703 7.71512 4.594Z" fill="white" stroke="white" stroke-width="0.125"/>
+</svg>
+
+`
diff --git a/packages/polkadotVault/src/icon/index.ts b/packages/polkadotVault/src/icon/index.ts
index cde3dd038..2a70c7acf 100644
--- a/packages/polkadotVault/src/icon/index.ts
+++ b/packages/polkadotVault/src/icon/index.ts
@@ -4,3 +4,4 @@ export { default as logoWallet } from  './logoWallet.js';
 export { default as imageSquareIcon } from './imageSquare.js';
 export { default as qrCodeIcon } from './qrCode.js';
 export { default as errorIcon } from './error.js';
+export { default as closeCircleIcon } from './closeCircle.js'
diff --git a/packages/polkadotVault/src/views/ScanQRCode.svelte b/packages/polkadotVault/src/views/ScanQRCode.svelte
index 990351d3f..5953a5c1f 100644
--- a/packages/polkadotVault/src/views/ScanQRCode.svelte
+++ b/packages/polkadotVault/src/views/ScanQRCode.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import jsQR from 'jsqr';
-  import { imageSquareIcon, errorIcon } from '../icon/index.js';
+  import {imageSquareIcon, errorIcon, closeCircleIcon} from '../icon/index.js';
 
 
   type optionsType = {
@@ -153,10 +153,6 @@
 </div>
 
 <div class='action-footer'>
-    <button class="button-neutral-solid" on:click={onBack}>
-        {isBack ? 'BACK' : 'Cancel'}
-    </button>
-
     {#if enableQRCodeReaderButton}
         <label for="upload-qrcode-image" class="button-neutral-solid label-upload-img">
             {@html imageSquareIcon} Upload from photos
@@ -170,7 +166,9 @@
         />
     {/if}
 
-
+    <button class="button-neutral-solid" on:click={onBack}>
+        {@html closeCircleIcon}
+    </button>
 </div>
 
 
@@ -220,6 +218,7 @@
     .label-upload-img{
         cursor: pointer;
         display: flex;
+        padding: 13px;
         align-items: center;
         gap: var(--spacing-5);
     }
diff --git a/packages/talisman/src/icon.ts b/packages/talisman/src/icon.ts
index 3670e2a0b..465a8f794 100644
--- a/packages/talisman/src/icon.ts
+++ b/packages/talisman/src/icon.ts
@@ -1,5 +1,5 @@
 export default `
-<svg width="100%" height="100%" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="100%" height="100%" viewBox="0 0 82 82" fill="none" style="border-radius: 13px" xmlns="http://www.w3.org/2000/svg">
     <rect width="100%" height="100%" rx="12" fill="#d5ff5c"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M59.117 44.663c.608 1.325 2.398 1.792 3.428.762l1.89-1.89a5 5 0 0 1 7.072 7.071L56.234 65.879C52.565 70.233 47.07 73 40.932 73c-6.403 0-12.102-3.008-15.763-7.689L10.464 50.607a5 5 0 0 1 7.071-7.071l1.861 1.86c1.008 1.009 2.759.555 3.354-.74a1.94 1.94 0 0 0 .182-.813V21a5 5 0 0 1 10 0v11.557c0 .994 1.018 1.669 1.966 1.37.6-.19 1.034-.737 1.034-1.366V14a5 5 0 0 1 10 0v18.561c0 .63.433 1.176 1.033 1.365.948.3 1.966-.375 1.966-1.37V21a5 5 0 1 1 10 0v22.835c0 .287.066.567.186.828z" fill="#fd4848"/>
     <path d="M56.933 55s-7.164 10-16 10c-8.837 0-16-10-16-10s7.163-10 16-10c8.836 0 16 10 16 10z" fill="#d5ff5c"/>