diff --git a/packages/neuron-ui/public/css/fonts.css b/packages/neuron-ui/public/css/fonts.css
index f461d01884..3f63aff9a7 100644
--- a/packages/neuron-ui/public/css/fonts.css
+++ b/packages/neuron-ui/public/css/fonts.css
@@ -25,3 +25,15 @@
   src: url('../fonts/D-DIN-PRO-500-Medium.otf') format('opentype'),
       url('../fonts/D-DIN-PRO-500-Medium.ttf') format('opentype');
 }
+
+@font-face {
+  font-family: 'JetBrains Mono Medium';
+  src: url('../fonts/JetBrainsMonoNL-Medium.otf') format('opentype'),
+      url('../fonts/JetBrainsMonoNL-Medium.ttf') format('opentype');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('../fonts/JetBrainsMonoNL-Regular.otf') format('opentype'),
+      url('../fonts/JetBrainsMonoNL-Regular.ttf') format('opentype');
+}
diff --git a/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Medium.otf b/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Medium.otf
new file mode 100644
index 0000000000..ec04820464
Binary files /dev/null and b/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Medium.otf differ
diff --git a/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Medium.ttf b/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Medium.ttf
new file mode 100644
index 0000000000..3d866abd42
Binary files /dev/null and b/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Medium.ttf differ
diff --git a/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Regular.otf b/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Regular.otf
new file mode 100644
index 0000000000..6aca7701fd
Binary files /dev/null and b/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Regular.otf differ
diff --git a/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Regular.ttf b/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Regular.ttf
new file mode 100644
index 0000000000..1aa91ec265
Binary files /dev/null and b/packages/neuron-ui/public/fonts/JetBrainsMonoNL-Regular.ttf differ
diff --git a/packages/neuron-ui/src/components/ClearCache/index.tsx b/packages/neuron-ui/src/components/ClearCache/index.tsx
index e70e9b1726..adda04f928 100644
--- a/packages/neuron-ui/src/components/ClearCache/index.tsx
+++ b/packages/neuron-ui/src/components/ClearCache/index.tsx
@@ -81,11 +81,7 @@ const ClearCache = ({ dispatch }: { dispatch: StateDispatch }) => {
       <div className={styles.clearedDate}>{t('settings.data.cache-cleared-on', { date: clearedDate })}</div>
       <Button label={t('settings.data.clear-cache')} onClick={showDialog} disabled={isClearing}>
         {isClearing ? (
-          <Spinner
-            label={t('settings.data.clearing-cache')}
-            labelPosition="right"
-            styles={{ root: { marginRight: 5 } }}
-          />
+          <Spinner label={t('settings.data.clearing-cache')} labelPosition="right" />
         ) : (
           (t('settings.data.clear-cache') as string)
         )}
diff --git a/packages/neuron-ui/src/components/DataSetting/index.tsx b/packages/neuron-ui/src/components/DataSetting/index.tsx
index 195fd1c676..0708b36440 100644
--- a/packages/neuron-ui/src/components/DataSetting/index.tsx
+++ b/packages/neuron-ui/src/components/DataSetting/index.tsx
@@ -52,11 +52,7 @@ const SetItem = () => {
             onClick={onConfirm}
           >
             {isSaving && savingType === 'move' ? (
-              <Spinner
-                label={t('settings.data.move-data-finish')}
-                labelPosition="right"
-                styles={{ root: { marginRight: 5 }, label: { color: '#FFF' } }}
-              />
+              <Spinner label={t('settings.data.move-data-finish')} labelPosition="right" />
             ) : (
               (t('settings.data.move-data-finish') as string)
             )}
@@ -70,11 +66,7 @@ const SetItem = () => {
             onClick={onConfirm}
           >
             {isSaving && savingType === 'resync' ? (
-              <Spinner
-                label={t('settings.data.re-sync')}
-                labelPosition="right"
-                styles={{ root: { marginRight: 5 }, label: { color: '#FFF' } }}
-              />
+              <Spinner label={t('settings.data.re-sync')} labelPosition="right" />
             ) : (
               (t('settings.data.re-sync') as string)
             )}
diff --git a/packages/neuron-ui/src/components/DepositDialog/index.tsx b/packages/neuron-ui/src/components/DepositDialog/index.tsx
index 0ddb4aaa8a..f6fef5484b 100644
--- a/packages/neuron-ui/src/components/DepositDialog/index.tsx
+++ b/packages/neuron-ui/src/components/DepositDialog/index.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useCallback, useRef } from 'react'
-import { Slider, SpinnerSize } from 'office-ui-fabric-react'
+import { Slider } from 'office-ui-fabric-react'
 import { useTranslation, Trans } from 'react-i18next'
 import TextField from 'widgets/TextField'
-import Spinner from 'widgets/Spinner'
+import Spinner, { SpinnerSize } from 'widgets/Spinner'
 import Button from 'widgets/Button'
 import { ReactComponent as Attention } from 'widgets/Icons/Attention.svg'
 import { openExternal } from 'services/remote'
diff --git a/packages/neuron-ui/src/components/GeneralSetting/index.tsx b/packages/neuron-ui/src/components/GeneralSetting/index.tsx
index 6b973b5834..b4230df27b 100644
--- a/packages/neuron-ui/src/components/GeneralSetting/index.tsx
+++ b/packages/neuron-ui/src/components/GeneralSetting/index.tsx
@@ -112,11 +112,7 @@ const GeneralSetting = ({ updater }: GeneralSettingProps) => {
               disabled={updater.checking}
             >
               {updater.checking ? (
-                <Spinner
-                  styles={{ root: { marginRight: 5 } }}
-                  label={t('updates.checking-updates')}
-                  labelPosition="right"
-                />
+                <Spinner label={t('updates.checking-updates')} labelPosition="right" />
               ) : (
                 (t('updates.check-updates') as string)
               )}
diff --git a/packages/neuron-ui/src/components/LaunchScreen/index.tsx b/packages/neuron-ui/src/components/LaunchScreen/index.tsx
index ccf9a53c9f..4e76b68d03 100644
--- a/packages/neuron-ui/src/components/LaunchScreen/index.tsx
+++ b/packages/neuron-ui/src/components/LaunchScreen/index.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Panel, PanelType, SpinnerSize } from 'office-ui-fabric-react'
+import { Panel, PanelType } from 'office-ui-fabric-react'
 import { useState as useGlobalState } from 'states'
 import { RoutePath } from 'utils'
-import Spinner from 'widgets/Spinner'
+import Spinner, { SpinnerSize } from 'widgets/Spinner'
 
 export const LaunchScreen = () => {
   const {
diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx
index d845f8fc6e..47d066b4f5 100644
--- a/packages/neuron-ui/src/components/Overview/index.tsx
+++ b/packages/neuron-ui/src/components/Overview/index.tsx
@@ -94,7 +94,7 @@ const TransactionStatus = ({
   }
   return (
     <div className={styles.txStatus} data-status={status}>
-      {status === 'confirming' ? <Confirming className={styles.confirm} /> : null}
+      {status === 'confirming' ? <Confirming /> : null}
       <span>{t(`overview.statusLabel.${status}`)}</span>
       {confirmations ? <span className={styles.confirmText}>{confirmations}</span> : null}
     </div>
@@ -320,7 +320,6 @@ const Overview = () => {
             title: t('overview.status'),
             dataIndex: 'status',
             align: 'left',
-            className: styles.txStatusTh,
             render(_, __, item) {
               return (
                 <TransactionStatus
diff --git a/packages/neuron-ui/src/components/Overview/overview.module.scss b/packages/neuron-ui/src/components/Overview/overview.module.scss
index 13e95aee6a..86484a6230 100644
--- a/packages/neuron-ui/src/components/Overview/overview.module.scss
+++ b/packages/neuron-ui/src/components/Overview/overview.module.scss
@@ -83,14 +83,9 @@
   }
 }
 
-.txStatusTh {
-  padding-left: 34px !important;
-}
-
 .txStatus {
   display: flex;
   position: relative;
-  padding-left: 16px;
   align-items: center;
 
   .confirmText {
@@ -99,9 +94,8 @@
     margin-left: 4px;
   }
 
-  .confirm {
-    position: absolute;
-    left: -4px;
+  & > svg {
+    margin-right: 4px;
   }
 
   &[data-status="failed"] {
diff --git a/packages/neuron-ui/src/components/PageContainer/index.tsx b/packages/neuron-ui/src/components/PageContainer/index.tsx
index af006c8c9e..09eff85fa9 100755
--- a/packages/neuron-ui/src/components/PageContainer/index.tsx
+++ b/packages/neuron-ui/src/components/PageContainer/index.tsx
@@ -35,7 +35,11 @@ const getNetworkTypeLable = (type: 'ckb' | 'ckb_testnet' | 'ckb_dev' | string) =
   }
 }
 
-type ComponentProps = { head: React.ReactNode; notice?: State.PageNotice; className?: string }
+type ComponentProps = {
+  head: React.ReactNode
+  notice?: State.PageNotice
+  className?: string
+} & React.AllHTMLAttributes<HTMLDivElement>
 const PageContainer: React.FC<ComponentProps> = props => {
   const {
     app: { showWaitForFullySynced },
@@ -61,7 +65,7 @@ const PageContainer: React.FC<ComponentProps> = props => {
         setTheme(res.result ? 'dark' : 'light')
       }
     })
-  })
+  }, [])
   const onSetTheme = useCallback(() => {
     const newTheme = theme === 'dark' ? 'light' : 'dark'
     setThemeAPI(newTheme).then(res => {
diff --git a/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss b/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
index 9b85f459bf..7ff8d82ae9 100755
--- a/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
+++ b/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
@@ -103,6 +103,12 @@
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
+
+    @media (prefers-color-scheme: dark) {
+      path {
+        fill: #8DA394;
+      }
+    }
   }
 }
 
diff --git a/packages/neuron-ui/src/components/Receive/hooks.ts b/packages/neuron-ui/src/components/Receive/hooks.ts
new file mode 100644
index 0000000000..5b2ddcbde1
--- /dev/null
+++ b/packages/neuron-ui/src/components/Receive/hooks.ts
@@ -0,0 +1,50 @@
+import { AddressPrefix, addressToScript, bech32Address } from '@nervosnetwork/ckb-sdk-utils'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { copyCanvas, downloadCanvas } from 'widgets/QRCode'
+
+export const useCopyAndDownloadQrCode = () => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const onDownloadQrCode = useCallback(() => {
+    const canvasElement = ref.current?.querySelector('canvas')
+    if (canvasElement) {
+      downloadCanvas(canvasElement)
+    }
+  }, [ref])
+  const [showCopySuccess, setShowCopySuccess] = useState(false)
+  const onCopyQrCode = useCallback(() => {
+    setShowCopySuccess(false)
+    const canvasElement = ref.current?.querySelector('canvas')
+    if (canvasElement) {
+      copyCanvas(canvasElement)
+      setTimeout(() => {
+        setShowCopySuccess(true)
+      }, 1)
+    }
+  }, [ref])
+  return {
+    ref,
+    onDownloadQrCode,
+    onCopyQrCode,
+    showCopySuccess,
+  }
+}
+
+const toShortAddr = (addr: string) => {
+  try {
+    const script = addressToScript(addr)
+    const isMainnet = addr.startsWith('ckb')
+    return bech32Address(script.args, { prefix: isMainnet ? AddressPrefix.Mainnet : AddressPrefix.Testnet })
+  } catch {
+    return ''
+  }
+}
+
+export const useSwitchAddress = (address: string) => {
+  const [isInShortFormat, setIsInShortFormat] = useState(false)
+  const showAddress = useMemo(() => (isInShortFormat ? toShortAddr(address) : address), [address, isInShortFormat])
+  return {
+    address: showAddress,
+    isInShortFormat,
+    setIsInShortFormat,
+  }
+}
diff --git a/packages/neuron-ui/src/components/Receive/index.tsx b/packages/neuron-ui/src/components/Receive/index.tsx
index 215e8fae85..dca6732d24 100644
--- a/packages/neuron-ui/src/components/Receive/index.tsx
+++ b/packages/neuron-ui/src/components/Receive/index.tsx
@@ -1,108 +1,47 @@
-import React, { useCallback, useMemo, useState } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
+import React, { useMemo } from 'react'
+import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { addressToScript, bech32Address, AddressPrefix } from '@nervosnetwork/ckb-sdk-utils'
-import Button from 'widgets/Button'
-import QRCode from 'widgets/QRCode'
-import CopyZone from 'widgets/CopyZone'
-import { RoutePath } from 'utils'
-import { useState as useGlobalState, useDispatch } from 'states'
-import { ReactComponent as AddressToggleIcon } from 'widgets/Icons/AddressTransform.svg'
-import VerifyHardwareAddress from 'components/VerifyHardwareAddress'
-import styles from './receive.module.scss'
-
-const toShortAddr = (addr: string) => {
-  try {
-    const script = addressToScript(addr)
-    const isMainnet = addr.startsWith('ckb')
-    return bech32Address(script.args, { prefix: isMainnet ? AddressPrefix.Mainnet : AddressPrefix.Testnet })
-  } catch {
-    return ''
-  }
-}
+import { useState as useGlobalState } from 'states'
+import PageContainer from 'components/PageContainer'
+import SignleAddressReceive from './singleAddressReceive'
+import MultiAddressReceive from './multiAddressReceive'
 
 const Receive = () => {
-  const { wallet } = useGlobalState()
-  const dispatch = useDispatch()
+  const {
+    app: { pageNotice },
+    wallet,
+  } = useGlobalState()
   const [t] = useTranslation()
   const { address } = useParams<{ address: string }>()
-  const navigate = useNavigate()
-  const [displayVerifyDialog, setDisplayVerifyDialog] = useState(false)
-  const [isInShortFormat, setIsInShortFormat] = useState(false)
-  const { addresses } = wallet
+  const { addresses, id: walletId } = wallet
   const isSingleAddress = addresses.length === 1
 
   const accountAddress = useMemo(() => {
-    let addr = ''
     if (isSingleAddress) {
-      addr = addresses[0].address
-    } else {
-      addr = (address || addresses.find(a => a.type === 0 && a.txCount === 0)?.address) ?? ''
+      return addresses[0].address
     }
-    return isInShortFormat ? toShortAddr(addr) : addr
-  }, [address, addresses, isSingleAddress, isInShortFormat])
-
-  const onAddressBookClick = useCallback(() => {
-    navigate(RoutePath.Addresses)
-  }, [navigate])
-
-  const onVerifyAddressClick = useCallback(() => {
-    setDisplayVerifyDialog(true)
-  }, [])
+    return (address || addresses.find(a => a.type === 0 && a.txCount === 0)?.address) ?? ''
+  }, [address, addresses, isSingleAddress])
 
   if (!accountAddress) {
     return <div>{t('receive.address-not-found')}</div>
   }
 
   return (
-    <div
+    <PageContainer
       onContextMenu={e => {
         e.stopPropagation()
         e.preventDefault()
       }}
+      head={t('receive.title')}
+      notice={pageNotice}
     >
-      <div className={styles.title}>{t('receive.title')}</div>
-      <QRCode value={accountAddress} size={220} includeMargin dispatch={dispatch} />
-      <div className={styles.address}>
-        <CopyZone content={accountAddress} name={t('receive.copy-address')} style={{ lineHeight: '1.625rem' }}>
-          {accountAddress}
-        </CopyZone>
-        <button
-          type="button"
-          className={styles.addressToggle}
-          onClick={() => setIsInShortFormat(is => !is)}
-          title={t(isInShortFormat ? `receive.turn-into-full-version-fomrat` : `receive.turn-into-deprecated-format`)}
-        >
-          <AddressToggleIcon />
-        </button>
-      </div>
-      {isSingleAddress ? null : <p className={styles.notation}>{t('receive.prompt')}</p>}
-      {isSingleAddress ? null : (
-        <Button
-          type="primary"
-          className={styles.addressBook}
-          label={t('receive.address-book')}
-          onClick={onAddressBookClick}
-        />
-      )}
-      {isSingleAddress && (
-        <Button
-          type="primary"
-          className={styles.addressBook}
-          label={t('receive.verify-address')}
-          onClick={onVerifyAddressClick}
-        />
-      )}
-      {displayVerifyDialog && (
-        <VerifyHardwareAddress
-          address={accountAddress}
-          wallet={wallet}
-          onDismiss={() => {
-            setDisplayVerifyDialog(false)
-          }}
-        />
+      {isSingleAddress ? (
+        <SignleAddressReceive address={accountAddress} wallet={wallet} />
+      ) : (
+        <MultiAddressReceive address={accountAddress} addresses={addresses} walletId={walletId} />
       )}
-    </div>
+    </PageContainer>
   )
 }
 
diff --git a/packages/neuron-ui/src/components/Receive/multiAddressReceive.tsx b/packages/neuron-ui/src/components/Receive/multiAddressReceive.tsx
new file mode 100644
index 0000000000..ac35a528dd
--- /dev/null
+++ b/packages/neuron-ui/src/components/Receive/multiAddressReceive.tsx
@@ -0,0 +1,186 @@
+import React, { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from 'widgets/Button'
+import CopyZone from 'widgets/CopyZone'
+import QRCode from 'widgets/QRCode'
+import { AddressTransform, Copy } from 'widgets/Icons/icon'
+import { ReactComponent as Edit } from 'widgets/Icons/Edit.svg'
+import Alert from 'widgets/Alert'
+import Table, { TableProps } from 'widgets/Table'
+import { shannonToCKBFormatter, useLocalDescription } from 'utils'
+import { HIDE_BALANCE } from 'utils/const'
+import Tooltip from 'widgets/Tooltip'
+import { useDispatch } from 'states'
+import styles from './receive.module.scss'
+import { useCopyAndDownloadQrCode, useSwitchAddress } from './hooks'
+
+const MultiAddressReceive = ({
+  address,
+  addresses,
+  walletId,
+}: {
+  address: string
+  addresses: State.Address[]
+  walletId: string
+}) => {
+  const [t] = useTranslation()
+  const dispatch = useDispatch()
+  const { isInShortFormat, setIsInShortFormat, address: showAddress } = useSwitchAddress(address)
+  const { ref, showCopySuccess, onCopyQrCode, onDownloadQrCode } = useCopyAndDownloadQrCode()
+  const { localDescription, onDescriptionPress, onDescriptionChange, onDescriptionSelected } = useLocalDescription(
+    'address',
+    walletId,
+    dispatch,
+    'textarea'
+  )
+  const columns = useMemo<TableProps<State.Address>['columns']>(
+    () => [
+      {
+        title: t('addresses.type'),
+        dataIndex: 'type',
+        align: 'left',
+        className: styles.addressType,
+        render(type) {
+          return type === 0 ? t('addresses.receiving-address') : t('addresses.change-address')
+        },
+      },
+      {
+        title: t('addresses.address'),
+        dataIndex: 'address',
+        align: 'left',
+        render(v: string) {
+          return (
+            <Tooltip
+              tip={
+                <CopyZone content={v} className={styles.copyTableAddress}>
+                  {v}
+                  <Copy />
+                </CopyZone>
+              }
+              showTriangle
+              isTriggerNextToChild
+            >
+              <div className={styles.address}>
+                <span className={styles.overflow}>{address.slice(0, -6)}</span>
+                <span>...</span>
+                <span>{address.slice(-6)}</span>
+              </div>
+            </Tooltip>
+          )
+        },
+      },
+      {
+        title: t('addresses.balance'),
+        dataIndex: 'balance',
+        align: 'left',
+        isBalance: true,
+        className: styles.balance,
+        render(balance: string, _, __, showBalance: boolean) {
+          if (!showBalance) {
+            return `${HIDE_BALANCE} CKB`
+          }
+          return (
+            <CopyZone content={shannonToCKBFormatter(balance, false, '')} className={styles.copyBalance}>
+              <span className="textOverflow">{`${shannonToCKBFormatter(balance)} CKB`}</span>
+            </CopyZone>
+          )
+        },
+      },
+      {
+        title: t('addresses.transactions'),
+        dataIndex: 'txCount',
+        align: 'center',
+      },
+      {
+        title: t('addresses.description'),
+        dataIndex: 'description',
+        align: 'center',
+        render(description: string, _idx, item) {
+          const isSelected = localDescription.key === item.address
+          return (
+            <Tooltip
+              tip={
+                <div className={styles.descTipRoot}>
+                  <div className={styles.autoHeight}>
+                    <textarea
+                      className={styles.descInput}
+                      data-is-selected={isSelected}
+                      data-description-key={item.address}
+                      value={isSelected ? localDescription.description : description}
+                      onChange={onDescriptionChange}
+                      onKeyDown={onDescriptionPress}
+                    />
+                    <Edit
+                      data-description-key={item.address}
+                      data-description-value={item.description}
+                      onClick={onDescriptionSelected}
+                    />
+                  </div>
+                  <div className={styles.hidden}>
+                    {isSelected ? localDescription.description : description}
+                    <Edit />
+                  </div>
+                </div>
+              }
+              showTriangle
+              isTriggerNextToChild
+              className={styles.description}
+            >
+              <div className={styles.descText}>{description || t('addresses.default-description')}</div>
+            </Tooltip>
+          )
+        },
+      },
+    ],
+    [t, localDescription]
+  )
+  const stopPropagation = useCallback((e: React.SyntheticEvent) => {
+    e.stopPropagation()
+  }, [])
+  return (
+    <div className={styles.multiAddressRoot}>
+      <div className={styles.qrCodeContainer}>
+        <Alert status="warn" className={styles.alert}>
+          {t('receive.prompt')}
+        </Alert>
+        <div className={styles.qrCode} data-copy-success={showCopySuccess} data-copy-success-text={t('common.copied')}>
+          <QRCode value={showAddress} size={128} includeMargin ref={ref} />
+        </div>
+        <CopyZone content={showAddress} name={t('receive.copy-address')} className={styles.copyAddress}>
+          {showAddress}
+          <button
+            type="button"
+            className={styles.addressToggle}
+            onClick={() => setIsInShortFormat(is => !is)}
+            title={t(isInShortFormat ? `receive.turn-into-full-version-fomrat` : `receive.turn-into-deprecated-format`)}
+            onFocus={stopPropagation}
+            onMouseOver={stopPropagation}
+            onMouseUp={stopPropagation}
+          >
+            <AddressTransform />
+          </button>
+        </CopyZone>
+        <div className={styles.actions}>
+          <Button
+            type="primary"
+            className={styles.addressBook}
+            label={t('receive.save-qr-code')}
+            onClick={onDownloadQrCode}
+          />
+          <Button className={styles.addressBook} label={t('receive.copy-qr-code')} onClick={onCopyQrCode} />
+        </div>
+      </div>
+      <Table
+        head={t('receive.address-book')}
+        columns={columns}
+        dataSource={addresses}
+        className={styles.addresses}
+        isFixedTable
+      />
+    </div>
+  )
+}
+
+MultiAddressReceive.displayName = 'MultiAddressReceive'
+
+export default MultiAddressReceive
diff --git a/packages/neuron-ui/src/components/Receive/receive.module.scss b/packages/neuron-ui/src/components/Receive/receive.module.scss
index d6708e814b..433a651673 100644
--- a/packages/neuron-ui/src/components/Receive/receive.module.scss
+++ b/packages/neuron-ui/src/components/Receive/receive.module.scss
@@ -1,58 +1,287 @@
 @import '../../styles/mixin.scss';
 
-.title {
-  font-size: 1.375rem;
-  font-weight: 700;
-  line-height: 28px;
-  margin-bottom: 20px;
-}
-
-.address {
-  margin: 20px auto 0;
+.multiAddressRoot {
   display: flex;
-  justify-content: center;
+  min-height: 504px;
+  height: 100%;
+  gap: 16px;
+
+  .qrCodeContainer {
+    width: 354px;
+    @include card;
+    flex-shrink: 0;
+    .qrCode {
+      margin-top: 48px;
+    }
+  }
+
+  .alert {
+    margin: 16px;
+    background: rgba(255, 246, 235, 0.2);
+    padding: 8px;
+    border: 1px solid rgba(252, 136, 0, 0.2);
+    border-radius: 4px;
+    color: #FF9737;
+    text-align: center;
+    font-size: 12px;
+    line-height: 20px;
+    font-weight: 500;
+
+    & > svg {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      background: rgba(255, 140, 0, 0.2);
+      color: #F78C2A;
+      & > svg {
+        path {
+          fill: #F78C2A;
+        }
+      }
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+    align-items: center;
+  
+    & > button {
+      width: 216px;
+    }
+  }
+
+  .copyBalance {
+    height: 32px;
+    line-height: 32px;
+    min-width: 80px;
+  }
+
+  .addressType {
+    width: 100px;
+  }
+
+  .balance {
+    padding-left: 48px;
+  }
+
+  .address {
+    height: 56px;
+    display: flex;
+
+    & > span {
+      line-height: 56px;
+      font-family: 'JetBrains Mono';
+    }
+
+    .overflow {
+      word-break: break-all;
+      line-height: 56px;
+      overflow: hidden;
+    }
+
+    &:hover {
+      color: var(--activity-color);
+    }
+  }
+
+  .copyTableAddress {
+    word-break: break-all;
+    text-align: center;
+    font-family: "JetBrains Mono";
+    width: 300px;
+    white-space: normal;
+    line-height: 24px;
+
+    & > svg {
+      margin-left: 4px;
+      vertical-align: middle;
+    }
+  }
+
+  .addresses {
+    flex-grow: 1;
+    height: 100%;
+    overflow-y: hidden;
+  }
+
+  .description {
+    height: 56px;
+    line-height: 56px;
+    min-width: 100px;
+    &:hover {
+      color: var(--activity-color);
+    }
+    svg {
+      cursor: pointer;
+      margin-left: 4px;
+      g {
+        fill: var(--primary-color)
+      }
+    }
+    .descText {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  .descTipRoot {
+    position: relative;
+    .autoHeight {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+
+      & > svg {
+        position: absolute;
+        right: 0;
+        bottom: 8px;
+      }
+    }
+    .descInput {
+      border: none;
+      word-break: break-word;
+      resize: none;
+      width: 100%;
+      height: 100%;
+      line-height: 24px;
+      background-color: transparent;
+      color: var(--main-text-color);
+      caret-color: #000000;
+      @media (prefers-color-scheme: dark) {
+        caret-color: #FFF;
+      }
+    }
+    & > .hidden {
+      word-break: break-word;
+      white-space: break-spaces;
+      visibility: hidden;
+      min-width: 100px;
+      min-height: 24px;
+      padding: 2px;
+      line-height: 24px;
+    }
+  }
 }
 
-.addressToggle{
-  display: flex;
-  align-items: center;
-  appearance: none;
-  border: none;
-  background: none;
-  svg {
-    pointer-events: none;
+.qrCode {
+  position: relative;
+  @keyframes fade-away {
+    from {
+      visibility: visible;
+      opacity: 1;
+    }
+  
+    to {
+      visibility: visible;
+      opacity: 0;
+    }
   }
-  &:hover {
-    g,
-    path {
-      stroke: var(--nervos-green);
-      fill: var(--nervos-green);
+
+  &[data-copy-success="true"] {
+    &::after {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 128px;
+      height: 40px;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(1px);
+      user-select: none;
+      border-radius: 40px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 40px;
+      text-align: center;
+      content: attr(data-copy-success-text);
+      animation: 4s fade-away 1 forwards;
+      color: #FFF;
     }
   }
 }
 
-.copyBtn {
-  appearance: none;
-  border: none;
-  background: transparent;
+.copyAddress {
+  word-break: break-all;
+  text-align: center;
+  margin: 32px 16px 82px 16px;
+  line-height: 24px;
+  font-family: "JetBrains Mono";
 
-  &:hover {
-    g,
-    path {
-      stroke: var(--nervos-green);
-      fill: var(--nervos-green);
+  .addressToggle{
+    margin: 0 0 0 4px;
+    padding: 0;
+    vertical-align: sub;
+    appearance: none;
+    border: none;
+    background: none;
+    padding-right: 20px;
+    svg {
+      pointer-events: none;
+    }
+  
+    &:hover {
+      & + div {
+        display: none;
+      }
     }
   }
 }
 
-.notation {
-  width: 450px;
-  font-size: 0.75rem;
-  margin: 6px auto 0;
+.singleAddressRoot {
+  height: 100%;
+  text-align: center;
+  @include card;
+  &::before {
+    content: "";
+    display: block;
+    height: 176px;
+  }
+
+  .copyContainer {
+    width: 100%;
+    text-align: center;
+    .copyAddress {
+      width: 450px;
+      margin: 16px 0 42px 0;
+    }
+  }
+
+  .verifyAddress {
+    width: 216px;
+  }
+
+  .actions {
+    margin-top: 8px;
+
+    svg {
+      vertical-align: sub;
+      margin-right: 4px;
+    }
+  }
 }
 
-.addressBook {
-  display: block;
-  margin: 20px auto;
-  padding: 7px 15px;
+@media screen and (max-height: 600px) {
+  .singleAddressRoot {
+    &::before {
+      height: 88px;
+    }
+  }
+
+  .multiAddressRoot {
+    .qrCode {
+      margin-top: 38px;
+    }
+  
+    .addressCopy {
+      margin: 16px 16px 26px 16px;
+    }
+  }
 }
diff --git a/packages/neuron-ui/src/components/Receive/singleAddressReceive.tsx b/packages/neuron-ui/src/components/Receive/singleAddressReceive.tsx
new file mode 100644
index 0000000000..41cb989a2b
--- /dev/null
+++ b/packages/neuron-ui/src/components/Receive/singleAddressReceive.tsx
@@ -0,0 +1,80 @@
+import React, { useCallback, useState } from 'react'
+import VerifyHardwareAddress from 'components/VerifyHardwareAddress'
+import Button from 'widgets/Button'
+import { useTranslation } from 'react-i18next'
+import QRCode from 'widgets/QRCode'
+import CopyZone from 'widgets/CopyZone'
+import { AddressTransform } from 'widgets/Icons/icon'
+import { ReactComponent as Download } from 'widgets/Icons/Download.svg'
+import { ReactComponent as Copy } from 'widgets/Icons/Copy.svg'
+import { useCopyAndDownloadQrCode, useSwitchAddress } from './hooks'
+import styles from './receive.module.scss'
+
+const SignleAddressReceive = ({ address, wallet }: { address: string; wallet: State.Wallet }) => {
+  const [t] = useTranslation()
+  const [displayVerifyDialog, setDisplayVerifyDialog] = useState(false)
+  const onVerifyAddressClick = useCallback(() => {
+    setDisplayVerifyDialog(true)
+  }, [])
+  const { isInShortFormat, setIsInShortFormat, address: showAddress } = useSwitchAddress(address)
+  const { ref, showCopySuccess, onCopyQrCode, onDownloadQrCode } = useCopyAndDownloadQrCode()
+  const stopPropagation = useCallback((e: React.SyntheticEvent) => {
+    e.stopPropagation()
+  }, [])
+  return (
+    <div className={styles.singleAddressRoot}>
+      {displayVerifyDialog && (
+        <VerifyHardwareAddress
+          address={address}
+          wallet={wallet}
+          onDismiss={() => {
+            setDisplayVerifyDialog(false)
+          }}
+        />
+      )}
+      <div className={styles.qrCode} data-copy-success={showCopySuccess} data-copy-success-text={t('common.copied')}>
+        <QRCode value={showAddress} size={128} includeMargin ref={ref} />
+      </div>
+      <div className={styles.copyContainer}>
+        <CopyZone content={showAddress} name={t('receive.copy-address')} className={styles.copyAddress}>
+          {showAddress}
+          <button
+            type="button"
+            className={styles.addressToggle}
+            onClick={() => setIsInShortFormat(is => !is)}
+            title={t(isInShortFormat ? `receive.turn-into-full-version-fomrat` : `receive.turn-into-deprecated-format`)}
+            onFocus={stopPropagation}
+            onMouseOver={stopPropagation}
+            onMouseUp={stopPropagation}
+          >
+            <AddressTransform />
+          </button>
+        </CopyZone>
+      </div>
+      <Button
+        type="primary"
+        label={t('receive.verify-address')}
+        onClick={onVerifyAddressClick}
+        className={styles.verifyAddress}
+      />
+      <div className={styles.actions}>
+        <Button type="text" label={t('receive.save-qr-code')} onClick={onDownloadQrCode}>
+          <>
+            <Download />
+            {t('receive.save-qr-code')}
+          </>
+        </Button>
+        <Button type="text" label={t('receive.copy-qr-code')} onClick={onCopyQrCode}>
+          <>
+            <Copy />
+            {t('receive.copy-qr-code')}
+          </>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+SignleAddressReceive.displayName = 'SignleAddressReceive'
+
+export default SignleAddressReceive
diff --git a/packages/neuron-ui/src/components/SUDTAccountList/index.tsx b/packages/neuron-ui/src/components/SUDTAccountList/index.tsx
index 0dfe965046..a90809d23f 100644
--- a/packages/neuron-ui/src/components/SUDTAccountList/index.tsx
+++ b/packages/neuron-ui/src/components/SUDTAccountList/index.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useCallback, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { SpinnerSize, SearchBox } from 'office-ui-fabric-react'
+import { SearchBox } from 'office-ui-fabric-react'
 import SUDTAccountPile, { SUDTAccountPileProps } from 'components/SUDTAccountPile'
 import SUDTCreateDialog, { TokenInfo, AccountType } from 'components/SUDTCreateDialog'
 import SUDTUpdateDialog, { SUDTUpdateDialogProps } from 'components/SUDTUpdateDialog'
 import Experimental from 'widgets/ExperimentalRibbon'
-import Spinner from 'widgets/Spinner'
+import Spinner, { SpinnerSize } from 'widgets/Spinner'
 
 import { useState as useGlobalState, useDispatch, AppActions, NeuronWalletActions } from 'states'
 import {
diff --git a/packages/neuron-ui/src/components/SUDTReceive/index.tsx b/packages/neuron-ui/src/components/SUDTReceive/index.tsx
index d8edf6610e..1497d6afba 100644
--- a/packages/neuron-ui/src/components/SUDTReceive/index.tsx
+++ b/packages/neuron-ui/src/components/SUDTReceive/index.tsx
@@ -9,8 +9,6 @@ import Breadcrum from 'widgets/Breadcrum'
 import QRCode from 'widgets/QRCode'
 import CopyZone from 'widgets/CopyZone'
 
-import { useDispatch } from 'states'
-
 import { RoutePath, CONSTANTS } from 'utils'
 import { getDisplayName, UANTonkenSymbol } from 'components/UANDisplay'
 import styles from './sUDTReceive.module.scss'
@@ -30,7 +28,6 @@ const toShortAddr = (addr: string) => {
 }
 
 const SUDTReceive = () => {
-  const dispatch = useDispatch()
   const [t] = useTranslation()
   const { search } = useLocation()
   const [isInShortFormat, setIsInShortFormat] = useState(false)
@@ -61,7 +58,7 @@ const SUDTReceive = () => {
           <span>{getDisplayName(tokenName || DEFAULT_SUDT_FIELDS.tokenName, symbol)}</span>
         </div>
       </div>
-      <QRCode value={displayedAddr} size={220} includeMargin dispatch={dispatch} />
+      <QRCode value={displayedAddr} size={220} includeMargin />
       <div className={styles.address}>
         <CopyZone content={displayedAddr} name={t('receive.copy-address')} style={{ lineHeight: '1.625rem' }}>
           {displayedAddr}
diff --git a/packages/neuron-ui/src/components/SUDTSend/index.tsx b/packages/neuron-ui/src/components/SUDTSend/index.tsx
index 217ef6013e..48810b4f38 100644
--- a/packages/neuron-ui/src/components/SUDTSend/index.tsx
+++ b/packages/neuron-ui/src/components/SUDTSend/index.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useCallback, useReducer, useMemo, useEffect, useRef } from 'react'
 import { useParams } from 'react-router-dom'
-import { SpinnerSize } from 'office-ui-fabric-react'
 import { useTranslation } from 'react-i18next'
 import { SUDTAccount } from 'components/SUDTAccountList'
 import TransactionFeePanel from 'components/TransactionFeePanel'
@@ -8,7 +7,7 @@ import SUDTAvatar from 'widgets/SUDTAvatar'
 import TextField from 'widgets/TextField'
 import Breadcrum from 'widgets/Breadcrum'
 import Button from 'widgets/Button'
-import Spinner from 'widgets/Spinner'
+import Spinner, { SpinnerSize } from 'widgets/Spinner'
 import { ReactComponent as TooltipIcon } from 'widgets/Icons/Tooltip.svg'
 import { ReactComponent as Attention } from 'widgets/Icons/Attention.svg'
 import { getSUDTAccount, destoryAssetAccount } from 'services/remote'
diff --git a/packages/neuron-ui/src/components/VerifyHardwareAddress/index.tsx b/packages/neuron-ui/src/components/VerifyHardwareAddress/index.tsx
index b6955a052f..59abe4ab3c 100644
--- a/packages/neuron-ui/src/components/VerifyHardwareAddress/index.tsx
+++ b/packages/neuron-ui/src/components/VerifyHardwareAddress/index.tsx
@@ -2,9 +2,6 @@ import React, { useCallback, useRef, useState, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import { ControllerResponse } from 'services/remote/remoteApiWrapper'
-import Spinner from 'widgets/Spinner'
-import { ReactComponent as HardWalletIcon } from 'widgets/Icons/HardWallet.svg'
-import { ReactComponent as VerifiedIcon } from 'widgets/Icons/Success.svg'
 import {
   connectDevice,
   getDevices,
@@ -16,11 +13,13 @@ import {
 } from 'services/remote'
 import { ErrorCode, errorFormatter, isSuccessResponse, useDidMount } from 'utils'
 import { CkbAppNotFoundException, DeviceNotFoundException } from 'exceptions'
-import CopyZone from 'widgets/CopyZone'
-import { ADDRESS_LENGTH } from 'utils/const'
+// import { ADDRESS_LENGTH } from 'utils/const'
 import { AddressPrefix, addressToScript, scriptToAddress } from '@nervosnetwork/ckb-sdk-utils'
+import { ReactComponent as Device } from 'widgets/Icons/Device.svg'
+import { Close } from 'widgets/Icons/icon'
+import Alert from 'widgets/Alert'
+import CopyZoneAddress from 'widgets/CopyZoneAddress'
 import styles from './verifyHardwareAddress.module.scss'
-import VerifyError from './verify-error'
 
 export interface VerifyHardwareAddressProps {
   address: string
@@ -58,22 +57,19 @@ const VerifyHardwareAddress = ({ address, wallet, onDismiss }: VerifyHardwareAdd
   const isWin32 = useMemo(() => {
     return getPlatform() === 'win32'
   }, [])
-  const [status, setStatus] = useState('')
-  const [error, setError] = useState('')
+  const [status, setStatus] = useState<{ type: 'init' | 'success' | 'error'; message: string } | undefined>()
   const connectStatus = t('hardware-verify-address.status.connect')
   const userInputStatus = t('hardware-verify-address.status.user-input')
   const disconnectStatus = t('hardware-verify-address.status.disconnect')
-  const verifiedStatus = t('hardware-verify-address.verified')
-  const invalidStatus = t('hardware-verify-address.invalid')
   const ckbAppNotFoundStatus = t(CkbAppNotFoundException.message)
   const isNotAvailableToVerify = useMemo(() => {
-    return status === disconnectStatus || status === ckbAppNotFoundStatus
+    return status?.message === disconnectStatus || status?.message === ckbAppNotFoundStatus
   }, [status, disconnectStatus, ckbAppNotFoundStatus])
 
   const [deviceInfo, setDeviceInfo] = useState(wallet.device!)
   const [isReconnecting, setIsReconnecting] = useState(false)
   const isLoading = useMemo(() => {
-    return status === userInputStatus || isReconnecting
+    return status?.message === userInputStatus || isReconnecting
   }, [status, userInputStatus, isReconnecting])
 
   const productName = `${wallet.device!.manufacturer} ${wallet.device!.product}`
@@ -121,12 +117,12 @@ const VerifyHardwareAddress = ({ address, wallet, onDismiss }: VerifyHardwareAdd
             throw new DeviceNotFoundException()
           }
         }
-        setStatus(connectStatus)
+        setStatus({ type: 'init', message: connectStatus })
       } catch (err) {
         if (err instanceof CkbAppNotFoundException) {
-          setStatus(ckbAppNotFoundStatus)
+          setStatus({ type: 'error', message: ckbAppNotFoundStatus })
         } else {
-          setStatus(disconnectStatus)
+          setStatus({ type: 'error', message: disconnectStatus })
         }
       }
     },
@@ -149,27 +145,29 @@ const VerifyHardwareAddress = ({ address, wallet, onDismiss }: VerifyHardwareAdd
         await ensureDeviceAvailable(device)
       }
     } catch (err) {
-      setStatus(disconnectStatus)
+      setStatus({ type: 'error', message: disconnectStatus })
     } finally {
       setIsReconnecting(false)
     }
   }, [deviceInfo, disconnectStatus, ensureDeviceAvailable, wallet.id])
 
+  const [isVerifyAgain, setIsVerifyAgain] = useState(false)
   const verify = useCallback(async () => {
+    setIsVerifyAgain(true)
     await ensureDeviceAvailable(deviceInfo)
-    setStatus(userInputStatus)
+    setStatus({ type: 'init', message: userInputStatus })
     const res = await getDevicePublicKey()
     if (isSuccessResponse(res)) {
       const { result } = res
       if (verifyAddressEqual(address, result?.address)) {
-        setStatus(verifiedStatus)
+        setStatus({ type: 'success', message: t('hardware-verify-address.verified') })
       } else {
-        setStatus(invalidStatus)
+        setStatus({ type: 'error', message: t('hardware-verify-address.invalid') })
       }
     } else {
-      setError(errorFormatter(res.message, t))
+      setStatus({ type: 'error', message: errorFormatter(res.message, t) })
     }
-  }, [deviceInfo, address, userInputStatus, verifiedStatus, invalidStatus, ensureDeviceAvailable, t])
+  }, [deviceInfo, address, userInputStatus, ensureDeviceAvailable, t])
 
   useDidMount(() => {
     // @ts-ignore
@@ -177,85 +175,51 @@ const VerifyHardwareAddress = ({ address, wallet, onDismiss }: VerifyHardwareAdd
     ensureDeviceAvailable(deviceInfo)
   })
 
-  const dialogClass = `${styles.dialog}`
-
-  let container = (
-    <div className={styles.container}>
-      <header className={styles.title}>{t('hardware-verify-address.title')}</header>
-      <section className={styles.main}>
-        <table>
-          <tbody>
-            <tr>
-              <td className={styles.first}>{t('hardware-verify-address.device')}</td>
-              <td>
-                <HardWalletIcon />
-                <span>{productName}</span>
-              </td>
-            </tr>
-            <tr>
-              <td className={styles.first}>{t('hardware-verify-address.address')}</td>
-              <td className={isNotAvailableToVerify ? styles.warning : ''}>
-                <CopyZone
-                  content={address}
-                  name={t('hardware-verify-address.actions.copy-address')}
-                  style={{ lineHeight: '1.625rem', width: '400px', display: 'flex' }}
-                >
-                  {address.length > ADDRESS_LENGTH ? (
-                    <>
-                      <span className={styles.addressOverflow}>{address.slice(0, -21)}</span>
-                      <span>...</span>
-                      <span>{address.slice(-20)}</span>
-                    </>
-                  ) : (
-                    address
-                  )}
-                </CopyZone>
-              </td>
-            </tr>
-            <tr>
-              <td className={styles.first}>{t('hardware-verify-address.status.label')}</td>
-              <td className={isNotAvailableToVerify ? styles.warning : ''}>
-                {status === verifiedStatus && <VerifiedIcon />}
-                <span>{status}</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <footer className={styles.footer}>
-        <div className={styles.right}>
+  return (
+    <dialog ref={dialogRef} className={styles.dialog}>
+      <header className={styles.title}>
+        {t('hardware-verify-address.title')}
+        <Close onClick={onCancel} />
+      </header>
+      <div className={styles.divider} />
+      <div className={styles.body}>
+        <section className={styles.main}>
+          <header>{t('hardware-verify-address.device')}</header>
+          <input value={productName} className={styles.productName} disabled />
+          <header>{t('hardware-verify-address.address')}</header>
+          <CopyZoneAddress fullPayload={address} className={styles.address} />
+          {status ? (
+            <Alert status={status.type} className={styles.alert}>
+              {status.message === connectStatus ? <Device /> : null}
+              {status.message}
+            </Alert>
+          ) : null}
+        </section>
+        <footer className={styles.footer}>
           <Button type="cancel" label={t('hardware-verify-address.actions.close')} onClick={onCancel} />
           {isNotAvailableToVerify ? (
             <Button
-              label={t('hardware-verify-address.actions.rescan')}
+              label={t('hardware-verify-address.actions.reconnect')}
               type="submit"
-              disabled={isLoading}
               onClick={reconnect}
+              loading={isLoading}
             >
-              {isLoading ? <Spinner /> : (t('hardware-verify-address.actions.rescan') as string)}
+              {t('hardware-verify-address.actions.reconnect')}
             </Button>
           ) : (
             <Button
               label={t('hardware-verify-address.actions.verify')}
               type="submit"
-              disabled={isLoading}
+              loading={isLoading}
               onClick={verify}
             >
-              {isLoading ? <Spinner /> : (t('hardware-verify-address.actions.verify') as string)}
+              {isVerifyAgain
+                ? t('hardware-verify-address.actions.verify-again')
+                : t('hardware-verify-address.actions.verify')}
             </Button>
           )}
-        </div>
-      </footer>
-    </div>
-  )
-
-  if (error) {
-    container = <VerifyError onCancel={onCancel} error={error} />
-  }
-
-  return (
-    <dialog ref={dialogRef} className={dialogClass}>
-      {container}
+        </footer>
+      </div>
     </dialog>
   )
 }
diff --git a/packages/neuron-ui/src/components/VerifyHardwareAddress/verify-error.tsx b/packages/neuron-ui/src/components/VerifyHardwareAddress/verify-error.tsx
deleted file mode 100644
index 948396d9c0..0000000000
--- a/packages/neuron-ui/src/components/VerifyHardwareAddress/verify-error.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import Button from 'widgets/Button'
-import { ReactComponent as FailedInfo } from 'widgets/Icons/FailedInfo.svg'
-import { errorFormatter } from 'utils'
-import CopyZone from 'widgets/CopyZone'
-
-import styles from './verifyHardwareAddress.module.scss'
-
-const VerifyError = ({ error, onCancel }: { error: string; onCancel: () => void }) => {
-  const [t] = useTranslation()
-  const errorMsg = errorFormatter(error, t)
-  return (
-    <div className={styles.container}>
-      <section className={styles.action}>
-        <span>
-          <FailedInfo />
-        </span>
-        <div className={styles.message}>
-          <CopyZone content={errorMsg}>{errorMsg}</CopyZone>
-        </div>
-      </section>
-      <footer className={styles.footer}>
-        <Button type="cancel" label={t('hardware-verify-address.actions.close')} onClick={onCancel} />
-      </footer>
-    </div>
-  )
-}
-
-VerifyError.displayName = 'VerifyError'
-
-export default VerifyError
diff --git a/packages/neuron-ui/src/components/VerifyHardwareAddress/verifyHardwareAddress.module.scss b/packages/neuron-ui/src/components/VerifyHardwareAddress/verifyHardwareAddress.module.scss
index a6634bb274..6a068a4fd9 100644
--- a/packages/neuron-ui/src/components/VerifyHardwareAddress/verifyHardwareAddress.module.scss
+++ b/packages/neuron-ui/src/components/VerifyHardwareAddress/verifyHardwareAddress.module.scss
@@ -2,15 +2,75 @@
 
 .dialog {
   @include dialog-container;
-  padding: 30px 50px;
-  min-height: 225px;
-  height: 240px;
-  width: 600px;
+  padding: 0;
+  min-height: 400px;
+  width: 680px;
+  max-width: 680px;
+  text-align: left;
+
+  .body {
+    padding: 0 16px;
+    color: var(--main-text-color);
+    .main {
+      & > header {
+        font-size: 16px;
+        margin: 16px 0;
+        font-weight: 500;
+      }
+      input, .address {
+        background-color: var(--input-disabled-color);
+        border-radius: 8px;
+        border: none;
+        width: 600px;
+        height: 56px;
+        padding: 0 32px 0 16px;
+      }
+      .productName {
+        font-family: 'ProximaNova-Regular';
+        font-weight: 600;
+        font-size: 18px;
+        color: var(--main-text-color);
+      }
+      .address {
+        span {
+          font-family: 'JetBrains Mono';
+          font-weight: 500;
+          position: relative;
+          line-height: 56px;
+        }
+        
+        &::after {
+          position: relative;
+          content: url('../../widgets/Icons/Copy.svg');
+          position: absolute;
+          right: 8px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 16px;
+          height: 16px;
+        }
+      }
+      .addressContainer {
+        position: relative;
+        & > svg {
+          position: absolute;
+          right: 16px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+      .alert {
+        justify-content: center;
+        margin: 20px 0 30px 0;
+        font-size: 16px;
+        font-weight: 500;
+        align-items: baseline;
 
-  .container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+        &::before {
+          content: ''
+        }
+      }
+    }
 
     .action {
       @extend .main;
@@ -19,41 +79,22 @@
         margin-top: 26px;
         font-weight: bold;
       }
-
+  
       +.footer {
         justify-content: center;
       }
-
+  
       svg {
         width: 56px;
         height: 56px;
       }
-
+  
       .rotating {
         svg {
           animation: rotating 3s linear infinite;
         }
       }
     }
-
-    .main {
-      flex: 1;
-      tr {
-        td {
-          font-size: 14px;
-          svg {
-            width: 14px;
-            height: 14px;
-            margin-right: 4px;
-            position: relative;
-            top: 2px;
-          }
-        }
-        .first {
-          padding-right: 30px;
-        }
-      }
-    }
   }
 
   &::backdrop {
@@ -62,131 +103,26 @@
 
   .footer {
     @include dialog-footer;
-    flex-shrink: 0;
-
-    button {
-      margin-left: 10px;
-    }
-
-    .left {
-      button {
-        margin: 0;
-      }
-    }
-
-    .right {
-      display: flex;
-      flex: 1;
-      justify-content: flex-end;
-    }
+    gap: 24px;
+    margin-bottom: 24px;
   }
 }
 
-.table {
-  overflow: auto;
-}
-
-.hd {
-  max-width: 700px;
-  width: 700px;
-  max-height: 400px;
-  height: 400px;
-}
-
-.sign {
-  table {
-    border-collapse: collapse;
-  }
-
-  thead {
-    border-bottom: 1px solid #e3e3e3;
-  }
-
-  tbody tr:hover {
-    background-color: #f5f5f5;
-  }
-
-  td {
-    height: 1.75rem;
-    word-wrap: none;
-    word-break: keep-all;
-    & > div {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      width: 100%;
-      font-size: 13px;
-    }
-  }
-
-  span,
-  td,
-  th {
-    font-size: 0.875rem;
-    letter-spacing: 0.5px;
-    padding: 0;
-  }
-
-  th,
-  td {
-    &:first-of-type {
-      padding-left: 10px;
-      width: 80px;
-    }
-
-    &:last-of-type {
-      padding-right: 10px;
-      width: 336px;
-      text-align: right;
-    }
-  }
-}
-
-.active {
-  background-color: #eeeeee;
-}
-
-.signed {
-  color: #888888;
-}
-
-.tabs {
-  width: 100%;
+.title {
+  font-size: 16px;
+  line-height: 22.4px;
+  font-weight: 500;
+  padding: 12px 16px;
   display: flex;
-  margin-top: 15px;
-  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--main-text-color);
 
-  button {
-    flex: 1;
+  svg {
     cursor: pointer;
-    font-family: 'SourceCodePro-Regular', 'SourceHanSansCN-Regular', monospace;
-    font-size: 14px;
-    border: none;
-    background: none;
-    height: 30px;
-
-    &.active {
-      font-weight: bold;
-      border-bottom: 4px solid #3cc68a;
-    }
   }
 }
 
-.warning {
-  color: #d03a3a;
-}
-
-.title {
-  font-size: 1.125rem;
-  line-height: 1.375rem;
-  font-weight: bold;
-  letter-spacing: 0.9px;
-  margin: 0;
-  margin-bottom: 26px;
-}
-
-.addressOverflow {
-  word-break: break-all;
-  height: 1.625rem;
-  overflow: hidden;
-  text-align: right;
+.divider {
+  border-top: 1px solid var(--divide-line-color);
 }
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
index 29cab50598..9e073ae290 100644
--- a/packages/neuron-ui/src/locales/en.json
+++ b/packages/neuron-ui/src/locales/en.json
@@ -93,9 +93,10 @@
       },
       "actions": {
         "close": "Close",
-        "rescan": "Rescan",
+        "rescan": "Reconnect",
         "copy-address": "Copy Address",
-        "verify": "Verify"
+        "verify": "Verify Address",
+        "verify-again": "Verify Again"
       }
     },
     "offline-sign": {
@@ -250,7 +251,9 @@
       "address": "{{network}} Address",
       "verify-address": "Verify Address",
       "turn-into-full-version-fomrat": "Turn into full version format",
-      "turn-into-deprecated-format": "Turn into deprecated format"
+      "turn-into-deprecated-format": "Turn into deprecated format",
+      "save-qr-code": "Download",
+      "copy-qr-code": "Copy"
     },
     "history": {
       "meta": "Meta",
@@ -325,7 +328,8 @@
       "change-address": "Change",
       "copy-address": "Copy Address",
       "request-payment": "Request Payment",
-      "view-on-explorer": "View on Explorer"
+      "view-on-explorer": "View on Explorer",
+      "default-description": "None"
     },
     "settings": {
       "title": {
diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json
index f0bd376ce4..3546f25079 100644
--- a/packages/neuron-ui/src/locales/zh-tw.json
+++ b/packages/neuron-ui/src/locales/zh-tw.json
@@ -76,19 +76,20 @@
       "title": "使用硬件錢包進行地址驗證",
       "device": "設備：",
       "address": "地址：",
-      "verified": "驗證通過",
+      "verified": "地址驗證通過",
       "invalid": "地址不正確",
       "status": {
         "label": "狀態：",
-        "connect": "已連接",
+        "connect": "設備已連接，點擊驗證按鈕進行地址驗證",
         "user-input": "已連接，等待確認...",
         "disconnect": "未連接，請檢查設備連接。"
       },
       "actions": {
-        "close": "關閉",
-        "rescan": "再次檢測",
+        "close": "取消",
+        "rescan": "連接設備",
         "copy-address": "复制地址",
-        "verify": "驗證"
+        "verify": "地址驗證",
+        "verify-again": "再次驗證"
       }
     },
     "offline-sign": {
@@ -243,7 +244,9 @@
       "address": "{{network}} 地址",
       "verify-address": "驗證地址",
       "turn-into-full-version-fomrat": "轉換為長地址格式",
-      "turn-into-deprecated-format": "轉換為廢棄地址格式"
+      "turn-into-deprecated-format": "轉換為廢棄地址格式",
+      "save-qr-code": "保存收款碼",
+      "copy-qr-code": "復制收款碼圖片"
     },
     "history": {
       "meta": "元信息",
@@ -318,7 +321,8 @@
       "change-address": "找零地址",
       "copy-address": "複製地址",
       "request-payment": "請求支付",
-      "view-on-explorer": "在瀏覽器中查看"
+      "view-on-explorer": "在瀏覽器中查看",
+      "default-description": "無"
     },
     "settings": {
       "title": {
diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
index 39f8a99efa..53709b00cb 100644
--- a/packages/neuron-ui/src/locales/zh.json
+++ b/packages/neuron-ui/src/locales/zh.json
@@ -76,19 +76,20 @@
       "title": "使用硬件钱包进行地址验证",
       "device": "设备：",
       "address": "地址：",
-      "verified": "验证通过",
+      "verified": "地址验证通过",
       "invalid": "地址不正确",
       "status": {
         "label": "状态：",
-        "connect": "已连接",
+        "connect": "设备已连接，点击验证按钮进行地址验证",
         "user-input": "已连接，等待确认...",
         "disconnect": "未连接，请检查设备连接。"
       },
       "actions": {
-        "close": "关闭",
-        "rescan": "再次检测",
+        "close": "取消",
+        "reconnect": "连接设备",
         "copy-address": "复制地址",
-        "verify": "验证"
+        "verify": "地址验证",
+        "verify-again": "再次验证"
       }
     },
     "offline-sign": {
@@ -243,7 +244,9 @@
       "address": "{{network}} 地址",
       "verify-address": "验证地址",
       "turn-into-full-version-fomrat": "转换为长地址格式",
-      "turn-into-deprecated-format": "转换为废弃地址格式"
+      "turn-into-deprecated-format": "转换为废弃地址格式",
+      "save-qr-code": "保存收款码",
+      "copy-qr-code": "复制收款码图片"
     },
     "history": {
       "meta": "元信息",
@@ -318,7 +321,8 @@
       "change-address": "找零地址",
       "copy-address": "复制地址",
       "request-payment": "请求支付",
-      "view-on-explorer": "在浏览器中查看"
+      "view-on-explorer": "在浏览器中查看",
+      "default-description": "无"
     },
     "settings": {
       "title": {
diff --git a/packages/neuron-ui/src/router.tsx b/packages/neuron-ui/src/router.tsx
index 22c5c68ced..c1065aa4ba 100644
--- a/packages/neuron-ui/src/router.tsx
+++ b/packages/neuron-ui/src/router.tsx
@@ -10,7 +10,6 @@ import Send from 'components/Send'
 import Receive from 'components/Receive'
 import History from 'components/History'
 import Transaction from 'components/Transaction'
-import Addresses from 'components/Addresses'
 import LaunchScreen from 'components/LaunchScreen'
 import PasswordRequest from 'components/PasswordRequest'
 import NervosDAO from 'components/NervosDAO'
@@ -171,16 +170,6 @@ const mainRouterConfig: RouteObject[] = [
         ),
         children: [offlineRouter],
       },
-      {
-        path: RoutePath.Addresses,
-        element: (
-          <>
-            <Addresses />
-            <Outlet />
-          </>
-        ),
-        children: [offlineRouter],
-      },
       {
         path: `${RoutePath.WalletWizard}*`,
         element: (
diff --git a/packages/neuron-ui/src/styles/index.scss b/packages/neuron-ui/src/styles/index.scss
index 1e3be0d41f..36b129d0e4 100755
--- a/packages/neuron-ui/src/styles/index.scss
+++ b/packages/neuron-ui/src/styles/index.scss
@@ -249,3 +249,23 @@ body {
 .main-content {
   background-color: var(--main-background-color);
 }
+
+::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  width: 6px;
+  background: #CCCCCC;
+  border-radius: 48px;
+}
+@media (prefers-color-scheme: dark) {
+  ::-webkit-scrollbar-thumb {
+    background: #000;
+    border: 1px solid #343E3C;
+    border-radius: 48px;
+  }
+}
diff --git a/packages/neuron-ui/src/styles/theme.scss b/packages/neuron-ui/src/styles/theme.scss
index 238825d5a4..601312bc09 100644
--- a/packages/neuron-ui/src/styles/theme.scss
+++ b/packages/neuron-ui/src/styles/theme.scss
@@ -64,7 +64,7 @@ body {
     --enable-button-text-color: #FFFFFF;
     --main-pagination-button-text-color: #CCCCCC;
     --main-pagination-text-color: #999999;
-    --warn-background-color: #FF8C0033;
+    --warn-background-color: rgba(255, 140, 0, 0.2);
     --svg-fill-color: #333333;
     // table
     --table-head-background-color: #171B1A;
diff --git a/packages/neuron-ui/src/utils/enums.ts b/packages/neuron-ui/src/utils/enums.ts
index 8c8540b5dd..950a8601ec 100644
--- a/packages/neuron-ui/src/utils/enums.ts
+++ b/packages/neuron-ui/src/utils/enums.ts
@@ -13,7 +13,6 @@ export enum RoutePath {
   Receive = '/receive',
   History = '/history',
   Transaction = '/transaction',
-  Addresses = '/addresses',
   Settings = '/settings',
   SettingsGeneral = 'general',
   SettingsWallets = 'wallets',
diff --git a/packages/neuron-ui/src/utils/hooks/index.ts b/packages/neuron-ui/src/utils/hooks/index.ts
index 58370ffa9a..5530959140 100644
--- a/packages/neuron-ui/src/utils/hooks/index.ts
+++ b/packages/neuron-ui/src/utils/hooks/index.ts
@@ -36,7 +36,12 @@ export const useGoBack = () => {
   }, [navigate])
 }
 
-export const useLocalDescription = (type: 'address' | 'transaction', walletID: string, dispatch: StateDispatch) => {
+export const useLocalDescription = (
+  type: 'address' | 'transaction',
+  walletID: string,
+  dispatch: StateDispatch,
+  inputType = 'input'
+) => {
   const [localDescription, setLocalDescription] = useState<{ description: string; key: string }>({
     key: '',
     description: '',
@@ -87,6 +92,8 @@ export const useLocalDescription = (type: 'address' | 'transaction', walletID: s
       const { descriptionKey: key, descriptionValue: originDesc } = e.target.dataset
       if (e.key && e.key === 'Enter') {
         submitDescription(key, originDesc)
+        const input = document.querySelector<HTMLInputElement>(`${inputType}[data-description-key="${key}"]`)
+        input?.blur()
       }
     },
     [submitDescription]
@@ -110,7 +117,7 @@ export const useLocalDescription = (type: 'address' | 'transaction', walletID: s
     (e: React.SyntheticEvent<any>) => {
       const {
         dataset: { descriptionKey: key, descriptionValue: originDesc = '' },
-      } = e.target as HTMLElement
+      } = e.currentTarget
       if (key) {
         dispatch({
           type: AppActions.ToggleIsAllowedToFetchList,
@@ -118,9 +125,10 @@ export const useLocalDescription = (type: 'address' | 'transaction', walletID: s
         })
         setLocalDescription({ key, description: originDesc })
         try {
-          const input = document.querySelector<HTMLInputElement>(`input[data-description-key="${key}"]`)
+          const input = document.querySelector<HTMLInputElement>(`${inputType}[data-description-key="${key}"]`)
           if (input) {
             input.focus()
+            input.setSelectionRange(-1, -1)
           }
         } catch (err) {
           console.warn(err)
diff --git a/packages/neuron-ui/src/widgets/Button/button.module.scss b/packages/neuron-ui/src/widgets/Button/button.module.scss
index 1cc4a42f5e..1c71f4b5a1 100644
--- a/packages/neuron-ui/src/widgets/Button/button.module.scss
+++ b/packages/neuron-ui/src/widgets/Button/button.module.scss
@@ -11,8 +11,16 @@
   box-sizing: border-box;
   border-radius: 16px;
   cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &[data-type='default'] {
+    background-color: transparent;
+    color: var(--primary-color);
+    border: 1px solid var(--primary-color);
+  }
 
-  &[data-type='default'],
   &[data-type='reset'] {
     background-color: transparent;
     color: var(--button-cancel-color);
@@ -43,5 +51,15 @@
     box-shadow: none !important;
     cursor: not-allowed;
   }
+
+  .spinner {
+    width: 16px;
+    height: 16px;
+    vertical-align: sub;
+    margin-left: 4px;
+    & > path {
+      fill: white;
+    }
+  }
 }
 
diff --git a/packages/neuron-ui/src/widgets/Button/index.tsx b/packages/neuron-ui/src/widgets/Button/index.tsx
index b5f37c7163..9de7ef9f19 100644
--- a/packages/neuron-ui/src/widgets/Button/index.tsx
+++ b/packages/neuron-ui/src/widgets/Button/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import Spinner from 'widgets/Spinner'
 import styles from './button.module.scss'
 
 const isNativeType = (type: string): type is 'button' | 'submit' | 'reset' => {
@@ -14,6 +15,7 @@ const Button = React.forwardRef(
       disabled = false,
       className = '',
       children,
+      loading,
       ...rest
     }: {
       type?: 'default' | 'cancel' | 'ok' | 'submit' | 'confirm' | 'primary' | 'reset' | 'text'
@@ -22,6 +24,7 @@ const Button = React.forwardRef(
       disabled?: boolean
       className?: string
       children?: React.ReactChild
+      loading?: boolean
       [key: string]: any
     },
     ref: React.LegacyRef<HTMLButtonElement>
@@ -38,10 +41,11 @@ const Button = React.forwardRef(
         onClick={onClick}
         aria-label={label}
         title={label}
-        disabled={disabled}
+        disabled={disabled || loading}
         {...rest}
       >
         {children || label}
+        {loading ? <Spinner className={styles.spinner} /> : null}
       </button>
     )
   }
diff --git a/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss b/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss
index 50ea5e06de..ee9389f7f5 100644
--- a/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss
+++ b/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss
@@ -20,6 +20,7 @@
     user-select: none;
     white-space: nowrap;
     border-radius: 16px;
+    z-index: 10;
 
     & > svg {
       margin-right: 4px;
@@ -30,10 +31,9 @@
     padding-right: 14px;
     .hoverShow {
       display: flex;
-    }
-
-    .copyIcon {
-      visibility: visible;
+      .copyIcon {
+        visibility: visible;
+      }
     }
   }
 }
diff --git a/packages/neuron-ui/src/widgets/CopyZone/index.tsx b/packages/neuron-ui/src/widgets/CopyZone/index.tsx
index c5b275de96..7d62468f70 100644
--- a/packages/neuron-ui/src/widgets/CopyZone/index.tsx
+++ b/packages/neuron-ui/src/widgets/CopyZone/index.tsx
@@ -33,11 +33,11 @@ const CopyZone = ({ children, content, name, style, className = '' }: CopyZonePr
       style={style}
       title={content}
     >
+      {children}
       <div className={styles.hoverShow}>
         {copied ? <SuccessNoBorder className={styles.copyIcon} /> : <Copy className={styles.copyIcon} />}
         {prompt}
       </div>
-      {children}
     </div>
   )
 }
diff --git a/packages/neuron-ui/src/widgets/Icons/AddressTransform.svg b/packages/neuron-ui/src/widgets/Icons/AddressTransform.svg
index c64be62c0b..c4845cda3b 100644
--- a/packages/neuron-ui/src/widgets/Icons/AddressTransform.svg
+++ b/packages/neuron-ui/src/widgets/Icons/AddressTransform.svg
@@ -1,5 +1,3 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1653993411632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="address-toggle" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
-  <path d="M844.18 235.29H502L469.82 118h-290c-34.7 0-62.83 31-62.83 69.26v537.35c0 38.24 28.13 69.25 62.83 69.25H505.9L554.18 906h290c34.7 0 62.83-30.77 62.83-68.72V304c-0.01-37.94-28.13-68.71-62.83-68.71zM197 713.86V198h211.8l10.2 37.29 91.4 333.6 6 22 33.68 122.93zM827 826H626.11L655 793.86l-55.6-202.92h157.53v-80H577.47l-13.11-47.85h192.57v-80H542.44l-18.57-67.79H827zM649.29 718.78h107.64v-80H649.29z" fill="#979797" p-id="20232"></path>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.31938 2.26215L6.64158 4.36642L6.23275 4.42026L6.27074 4.47198L5.32466 5.065L5.13164 5.19395C4.13996 5.89467 3.55103 6.95672 3.55103 8.1045C3.55103 9.74965 4.76764 11.1936 6.52455 11.6641L7.62034 11.9567L6.9919 14L5.89611 13.7067C3.17943 12.9805 1.27129 10.7161 1.27129 8.1045C1.27129 6.95814 1.63908 5.86774 2.2964 4.94455L1.3222 5.07492L1 2.97065L6.31938 2.26215ZM8.73893 2L9.83472 2.29261C12.5514 3.01954 14.4595 5.28393 14.4595 7.89549C14.4595 8.96439 14.137 10.0128 13.5288 10.9189L14.6778 10.7651L15 12.8694L9.68064 13.5779L9.35844 11.4736L9.5963 11.4417L10.4048 10.9352L10.5979 10.8069C11.5903 10.1055 12.1792 9.04416 12.1792 7.89638C12.1792 6.25122 10.9619 4.80728 9.20494 4.33682L8.10991 4.0435L8.73893 2Z" fill="#00C891" stroke="white"/>
 </svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/Copy.svg b/packages/neuron-ui/src/widgets/Icons/Copy.svg
index 678fafafe1..a1268481f8 100755
--- a/packages/neuron-ui/src/widgets/Icons/Copy.svg
+++ b/packages/neuron-ui/src/widgets/Icons/Copy.svg
@@ -1,7 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
-    <g id="Receive_Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M23.7182759,0 L6.76448276,0 C5.50482759,0 4.48275862,1.02206897 4.48275862,2.28172414 L4.48275862,4.48275862 L2.28172414,4.48275862 C1.02206897,4.48275862 0,5.50482759 0,6.76448276 L0,23.7182759 C0,24.977931 1.02206897,26 2.28172414,26 L19.2355172,26 C20.4951724,26 21.5172414,24.977931 21.5172414,23.7182759 L21.5172414,21.5172414 L23.7182759,21.5172414 C24.977931,21.5172414 26,20.4951724 26,19.2355172 L26,2.28172414 C26,1.02206897 24.977931,0 23.7182759,0 Z M19.7241379,23.7182759 C19.7241379,23.9872414 19.5044828,24.2068966 19.2355172,24.2068966 L2.28172414,24.2068966 C2.01275862,24.2068966 1.79310345,23.9872414 1.79310345,23.7182759 L1.79310345,6.76448276 C1.79310345,6.49551724 2.01275862,6.27586207 2.28172414,6.27586207 L19.2355172,6.27586207 C19.5044828,6.27586207 19.7241379,6.49551724 19.7241379,6.76448276 L19.7241379,23.7182759 Z M24.2068966,19.2355172 C24.2068966,19.5044828 23.9872414,19.7241379 23.7182759,19.7241379 L21.5172414,19.7241379 L21.5172414,6.76448276 C21.5172414,5.50482759 20.4951724,4.48275862 19.2355172,4.48275862 L6.27586207,4.48275862 L6.27586207,2.28172414 C6.27586207,2.01275862 6.49551724,1.79310345 6.76448276,1.79310345 L23.7182759,1.79310345 C23.9872414,1.79310345 24.2068966,2.01275862 24.2068966,2.28172414 L24.2068966,19.2355172 Z" id="Shape-Copy" fill="#000000" fill-rule="nonzero"></path>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.70379 1.64208C1.8585 1.48675 2.06773 1.4 2.28532 1.4H9.14238C9.35996 1.4 9.56919 1.48675 9.7239 1.64208C9.8787 1.7975 9.96617 2.00888 9.96617 2.22987V2.99481C9.96617 3.38141 10.2796 3.69481 10.6662 3.69481C11.0528 3.69481 11.3662 3.38141 11.3662 2.99481V2.22987C11.3662 1.63937 11.1326 1.07249 10.7158 0.654101C10.299 0.235612 9.73307 0 9.14238 0H2.28532C1.69463 0 1.1287 0.235612 0.711872 0.654101C0.295141 1.0725 0.0615234 1.63937 0.0615234 2.22987V9.11429C0.0615234 9.70479 0.295141 10.2717 0.711872 10.6901C1.1287 11.1086 1.69463 11.3442 2.28532 11.3442H3.04721C3.43381 11.3442 3.74721 11.0308 3.74721 10.6442C3.74721 10.2576 3.43381 9.94417 3.04721 9.94417H2.28532C2.06773 9.94417 1.8585 9.85741 1.70379 9.70209C1.54899 9.54667 1.46152 9.33529 1.46152 9.11429V2.22987C1.46152 2.00888 1.54899 1.7975 1.70379 1.64208ZM6.03379 6.81935C6.03379 6.35839 6.40524 5.98948 6.85758 5.98948H13.7146C14.167 5.98948 14.5384 6.35839 14.5384 6.81935V13.7038C14.5384 14.1647 14.167 14.5336 13.7146 14.5336H6.85758C6.40524 14.5336 6.03379 14.1647 6.03379 13.7038V6.81935ZM6.85758 4.58948C5.62679 4.58948 4.63379 5.59046 4.63379 6.81935V13.7038C4.63379 14.9327 5.62679 15.9336 6.85758 15.9336H13.7146C14.9454 15.9336 15.9384 14.9327 15.9384 13.7038V6.81935C15.9384 5.59046 14.9454 4.58948 13.7146 4.58948H6.85758Z" fill="#00C891"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/Device.svg b/packages/neuron-ui/src/widgets/Icons/Device.svg
new file mode 100644
index 0000000000..e9733e0b9a
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/Device.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1667 4.66667H11.75C12.0722 4.66667 12.3333 4.92783 12.3333 5.25V11.7279C12.3301 12.9814 11.3148 13.9968 10.0612 14H5.27209C4.01858 13.9968 3.00321 12.9814 3 11.7279V5.25C3 4.92784 3.26117 4.66667 3.58333 4.66667H4.16667V0.583334C4.16667 0.261167 4.42784 0 4.75 0H10.5833C10.9055 0 11.1667 0.261168 11.1667 0.583334V4.66667ZM10 1.16667H5.33334V4.66667H10V1.16667ZM10.0613 12.8333C10.6718 12.8333 11.1667 12.3384 11.1667 11.7279V5.83333H4.16669V11.7279C4.16669 12.3384 4.6616 12.8333 5.2721 12.8333H10.0613ZM6.06251 2.33337C6.06251 2.09175 6.25838 1.89587 6.50001 1.89587C6.74163 1.89587 6.93751 2.09175 6.93751 2.33337V3.20837C6.93751 3.45 6.74163 3.64587 6.50001 3.64587C6.25838 3.64587 6.06251 3.45 6.06251 3.20837V2.33337ZM8.39584 2.33337C8.39584 2.09175 8.59172 1.89587 8.83334 1.89587C9.07497 1.89587 9.27084 2.09175 9.27084 2.33337V3.20837C9.27084 3.45 9.07497 3.64587 8.83334 3.64587C8.59172 3.64587 8.39584 3.45 8.39584 3.20837V2.33337Z" fill="#333333"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/Download.svg b/packages/neuron-ui/src/widgets/Icons/Download.svg
index 8790e348c4..2edd8f1053 100644
--- a/packages/neuron-ui/src/widgets/Icons/Download.svg
+++ b/packages/neuron-ui/src/widgets/Icons/Download.svg
@@ -1,14 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <path d="M56.557377,35 C58.3953083,35 59.8968457,36.440273 59.994906,38.2537359 L60,38.442623 L60,57.5901639 C60,58.6947334 59.1045695,59.5901639 58,59.5901639 L2,59.5901639 C0.8954305,59.5901639 1.3527075e-16,58.6947334 0,57.5901639 L0,38.442623 C0,36.5413148 1.5413148,35 3.44262295,35 C5.28055417,35 6.78209159,36.440273 6.88015194,38.2537359 L6.8852459,38.442623 L6.8852459,50.704918 C6.8852459,51.8094875 7.7806764,52.704918 8.8852459,52.704918 L51.1147541,52.704918 C52.2193236,52.704918 53.1147541,51.8094875 53.1147541,50.704918 L53.1147541,38.442623 C53.1147541,36.6046917 54.5550271,35.1031543 56.36849,35.005094 L56.557377,35 Z M30,6.5 C31.8685634,6.5 33.3951264,7.9642776 33.4948211,9.8079648 L33.5,10 L33.4998587,34.424 L43.8285217,26.2550625 C45.3445088,25.0557881 47.5456632,25.3125346 48.7449375,26.8285217 C49.9028576,28.2922334 49.7034408,30.3946741 48.3238045,31.6173699 L48.1714783,31.7449375 L30,46.1201175 L11.8285217,31.7449375 C10.3125346,30.5456632 10.0557881,28.3445088 11.2550625,26.8285217 C12.4129825,25.36481 14.5048787,25.0749921 16.0122771,26.1361854 L16.1714783,26.2550625 L26.4998587,34.425 L26.5,10 C26.5,8.06700338 28.0670034,6.5 30,6.5 Z" id="path-11"></path>
-    </defs>
-    <g id="download" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <mask id="mask-22" fill="white">
-            <use xlink:href="#path-11"></use>
-        </mask>
-        <use id="Combined-Shape" fill="#979797" fill-rule="nonzero" xlink:href="#path-11"></use>
-    </g>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.19948 8.46915L7.19948 0.785713C7.19948 0.351775 7.55765 -3.86244e-08 7.99948 0C8.44131 3.86262e-08 8.79948 0.351775 8.79948 0.785714L8.79948 8.46915L11.4338 5.83484C11.7462 5.52242 12.2527 5.52242 12.5652 5.83484C12.8776 6.14726 12.8776 6.65379 12.5652 6.96621L8.56516 10.9662C8.25275 11.2786 7.74621 11.2786 7.43379 10.9662L3.43379 6.96621C3.12137 6.65379 3.12137 6.14725 3.43379 5.83484C3.74621 5.52242 4.25275 5.52242 4.56517 5.83484L7.19948 8.46915ZM0.8 9.60026C1.24183 9.60026 1.6 9.95843 1.6 10.4003V13.6003C1.6 13.8124 1.68429 14.0159 1.83431 14.1659C1.98434 14.316 2.18783 14.4003 2.4 14.4003H13.6C13.8122 14.4003 14.0157 14.316 14.1657 14.1659C14.3157 14.0159 14.4 13.8124 14.4 13.6003V10.4003C14.4 9.95843 14.7582 9.60026 15.2 9.60026C15.6418 9.60026 16 9.95843 16 10.4003V13.6003C16 14.2368 15.7471 14.8472 15.2971 15.2973C14.847 15.7474 14.2365 16.0003 13.6 16.0003H2.4C1.76348 16.0003 1.15303 15.7474 0.702944 15.2973C0.252856 14.8472 0 14.2368 0 13.6003V10.4003C0 9.95843 0.358172 9.60026 0.8 9.60026Z" fill="#00C891"/>
 </svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/icon.module.scss b/packages/neuron-ui/src/widgets/Icons/icon.module.scss
index b8dfa964da..b6cdb40b00 100644
--- a/packages/neuron-ui/src/widgets/Icons/icon.module.scss
+++ b/packages/neuron-ui/src/widgets/Icons/icon.module.scss
@@ -29,4 +29,12 @@ $activity-color: #1b73b3;
   polygon {
     fill: $activity-color;
   }
+}
+
+@media (prefers-color-scheme: dark) {
+  .addressTransform {
+    & > path {
+      stroke: #1E2423;
+    }
+  }
 }
\ No newline at end of file
diff --git a/packages/neuron-ui/src/widgets/Icons/icon.tsx b/packages/neuron-ui/src/widgets/Icons/icon.tsx
index 2128a5f789..7d90989c6d 100644
--- a/packages/neuron-ui/src/widgets/Icons/icon.tsx
+++ b/packages/neuron-ui/src/widgets/Icons/icon.tsx
@@ -47,16 +47,17 @@ import { ReactComponent as SignSvg } from './Sign.svg'
 import { ReactComponent as ExportSvg } from './Export.svg'
 import { ReactComponent as ConfirmingSvg } from './Confirming.svg'
 import { ReactComponent as CopySvg } from './Copy.svg'
+import { ReactComponent as AddressTransformSvg } from './AddressTransform.svg'
 
 import styles from './icon.module.scss'
 
-function WrapSvg(SvgComponent: React.FC<React.SVGProps<SVGSVGElement>>) {
+function WrapSvg(SvgComponent: React.FC<React.SVGProps<SVGSVGElement>>, classNameForTheme: string = '') {
   return ({
     type,
     className,
     ...props
   }: { type?: 'success' | 'activity' | 'error' } & React.SVGProps<SVGSVGElement> = {}) => {
-    return <SvgComponent className={`${type ? styles[type] : ''} ${className || ''}`} {...props} />
+    return <SvgComponent className={`${type ? styles[type] : ''} ${className || ''} ${classNameForTheme}`} {...props} />
   }
 }
 
@@ -108,3 +109,4 @@ export const Sign = WrapSvg(SignSvg)
 export const Confirming = WrapSvg(ConfirmingSvg)
 export const SuccessNoBorder = WrapSvg(SuccessNoBorderSvg)
 export const Copy = WrapSvg(CopySvg)
+export const AddressTransform = WrapSvg(AddressTransformSvg, styles.addressTransform)
diff --git a/packages/neuron-ui/src/widgets/QRCode/index.tsx b/packages/neuron-ui/src/widgets/QRCode/index.tsx
index 458974bc6b..1be9cd2f4e 100644
--- a/packages/neuron-ui/src/widgets/QRCode/index.tsx
+++ b/packages/neuron-ui/src/widgets/QRCode/index.tsx
@@ -1,12 +1,6 @@
-import React, { useEffect, useRef, useCallback } from 'react'
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react'
 import { clipboard, nativeImage } from 'electron'
 import canvg from 'canvg'
-import { useTranslation } from 'react-i18next'
-import Button from 'widgets/Button'
-import { addPopup } from 'states/stateProvider/actionCreators'
-import { StateDispatch } from 'states/stateProvider/reducer'
-import { ReactComponent as Copy } from 'widgets/Icons/TinyCopy.svg'
-import { ReactComponent as Download } from 'widgets/Icons/Download.svg'
 import styles from './qrcode.module.scss'
 
 const QRCodeImpl = require('qr.js/lib/QRCode')
@@ -75,99 +69,87 @@ const generatePath = (cells: boolean[][], margin: number = 0): string => {
   return ops.join('')
 }
 
-const QRCode = ({
-  value,
-  size = 110,
-  scale = 4,
-  level = ErrorCorrectLevel.Q,
-  bgColor = '#FFF',
-  fgColor = '#000',
-  includeMargin = false,
-  dispatch,
-}: {
-  value: string
-  size: number
-  scale?: number
-  level?: ErrorCorrectLevel
-  bgColor?: string
-  fgColor?: string
-  includeMargin?: boolean
-  dispatch: StateDispatch
-}) => {
-  const [t] = useTranslation()
-  const qrcode = new QRCodeImpl(-1, level)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  qrcode.addData(convertStr(value))
-  qrcode.make()
-
-  const cells = qrcode.modules || []
-  const margin = includeMargin ? 3 : 0
-  const fgPath = generatePath(cells, margin)
-  const numCells = cells.length + margin * 2
-
-  const svgStr = `<svg shapeRendering="crispEdges"
-    width="${scale * size}"
-    height="${scale * size}"
-    viewBox="0 0 ${numCells} ${numCells}"
-  >
-    <path fill="${bgColor}" d="M0, 0 h${numCells} v${numCells} H0z" />
-    <path fill="${fgColor}" d="${fgPath}" />
-  </svg>`
+const QRCode = forwardRef(
+  (
+    {
+      value,
+      size = 110,
+      scale = 4,
+      level = ErrorCorrectLevel.Q,
+      bgColor = '#FFF',
+      fgColor = '#000',
+      includeMargin = false,
+      className = '',
+    }: {
+      value: string
+      size: number
+      scale?: number
+      level?: ErrorCorrectLevel
+      bgColor?: string
+      fgColor?: string
+      includeMargin?: boolean
+      className?: string
+    },
+    ref?: React.LegacyRef<HTMLDivElement>
+  ) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null)
+    const svgStr = useMemo(() => {
+      const qrcode = new QRCodeImpl(-1, level)
+      qrcode.addData(convertStr(value))
+      qrcode.make()
+
+      const cells = qrcode.modules || []
+      const margin = includeMargin ? 1 : 0
+      const fgPath = generatePath(cells, margin)
+      const numCells = cells.length + margin * 2
+      return `<svg shapeRendering="crispEdges"
+      width="${scale * size}"
+      height="${scale * size}"
+      viewBox="0 0 ${numCells} ${numCells}"
+    >
+      <path fill="${bgColor}" d="M0, 0 h${numCells} v${numCells} H0z" />
+      <path fill="${fgColor}" d="${fgPath}" />
+    </svg>`
+    }, [value, includeMargin, size, scale, bgColor, fgColor, level])
+
+    useEffect(() => {
+      if (canvasRef.current !== null) {
+        canvg(canvasRef.current, svgStr, {
+          enableRedraw: false,
+          ignoreMouse: true,
+          renderCallback: () => {
+            if (canvasRef.current) {
+              canvasRef.current.setAttribute(`style`, `width:${size}px;height:${size}px`)
+            }
+          },
+        })
+      }
+    }, [svgStr, size])
 
-  const onDownload = useCallback(() => {
-    if (canvasRef.current === null) {
-      return
-    }
-    const dataURL = canvasRef.current.toDataURL('image/png')
-    const downloadLink = document.createElement('a')
-    downloadLink.download = 'ckb-address'
-    downloadLink.href = dataURL
-    window.document.body.appendChild(downloadLink)
-    downloadLink.click()
-    window.document.body.removeChild(downloadLink)
-  }, [])
+    return (
+      <div className={`${styles.qrcode} ${className}`} ref={ref}>
+        <div className={styles.pic}>
+          <canvas ref={canvasRef} width={size} height={size} />
+        </div>
+      </div>
+    )
+  }
+)
 
-  const onCopy = useCallback(() => {
-    if (canvasRef.current === null) {
-      return
-    }
-    const dataURL = canvasRef.current.toDataURL('image/png')
-    const img = nativeImage.createFromDataURL(dataURL)
-    clipboard.writeImage(img)
-    addPopup('qrcode-copied')(dispatch)
-  }, [dispatch])
+QRCode.displayName = 'QRCode'
 
-  useEffect(() => {
-    if (canvasRef.current !== null) {
-      canvg(canvasRef.current, svgStr, {
-        enableRedraw: false,
-        ignoreMouse: true,
-        renderCallback: () => {
-          if (canvasRef.current) {
-            canvasRef.current.setAttribute(`style`, `width:${size}px;height:${size}px`)
-          }
-        },
-      })
-    }
-  }, [svgStr, size])
+export default QRCode
 
-  return (
-    <div className={styles.qrcode}>
-      <div className={styles.pic}>
-        <canvas ref={canvasRef} width={size} height={size} />
-      </div>
-      <div className={styles.actions}>
-        <Button type="default" label={t('qrcode.copy')} onClick={onCopy}>
-          <Copy />
-        </Button>
-        <Button type="default" label={t('qrcode.save')} onClick={onDownload}>
-          <Download />
-        </Button>
-      </div>
-    </div>
-  )
+export const downloadCanvas = (canvas: HTMLCanvasElement) => {
+  const dataURL = canvas.toDataURL('image/png')
+  const downloadLink = document.createElement('a')
+  downloadLink.download = 'ckb-address'
+  downloadLink.href = dataURL
+  downloadLink.click()
 }
 
-QRCode.display = 'QRCode'
-
-export default QRCode
+export const copyCanvas = (canvas: HTMLCanvasElement) => {
+  const dataURL = canvas.toDataURL('image/png')
+  const img = nativeImage.createFromDataURL(dataURL)
+  clipboard.writeImage(img)
+}
diff --git a/packages/neuron-ui/src/widgets/QRCode/qrcode.module.scss b/packages/neuron-ui/src/widgets/QRCode/qrcode.module.scss
index 76a039e9bd..b4d12c3419 100644
--- a/packages/neuron-ui/src/widgets/QRCode/qrcode.module.scss
+++ b/packages/neuron-ui/src/widgets/QRCode/qrcode.module.scss
@@ -5,7 +5,6 @@ $qrcode-size: 220px;
   display: block;
   width: $qrcode-size;
   margin: 0 auto;
-  margin-top: 79px;
 }
 
 .pic {
diff --git a/packages/neuron-ui/src/widgets/Spinner.tsx b/packages/neuron-ui/src/widgets/Spinner.tsx
index 4b5f7edcc1..4593a587a3 100644
--- a/packages/neuron-ui/src/widgets/Spinner.tsx
+++ b/packages/neuron-ui/src/widgets/Spinner.tsx
@@ -1,16 +1,54 @@
-import React from 'react'
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react'
+import React, { CSSProperties } from 'react'
+import { ReactComponent as Loading } from 'widgets/Icons/Loading.svg'
 
-export default (props: any = {}) => {
-  const { styles = {}, ...rest } = props
-  const localStyles = {
-    circle: {
-      borderColor: '#3cc68a #c4f3df #c4f3df #c4f3df',
-    },
-    label: {
-      color: '#3cc68a',
-    },
-    ...styles,
+export enum SpinnerSize {
+  /**
+   * 12px Spinner diameter
+   */
+  xSmall = 0,
+  /**
+   * 16px Spinner diameter
+   */
+  small = 1,
+  /**
+   * 20px Spinner diameter
+   */
+  medium = 2,
+  /**
+   * 28px Spinner diameter
+   */
+  large = 3,
+}
+const fontSizes = [12, 16, 20, 28]
+const rotate360Animation: CSSProperties = {
+  animation: '4s linear rotate360 infinite forwards',
+}
+
+export default ({
+  className = '',
+  style = {},
+  label,
+  labelPosition,
+  size,
+}: {
+  className?: string
+  style?: CSSProperties
+  label?: React.ReactNode
+  labelPosition?: 'left' | 'right'
+  size?: SpinnerSize
+}) => {
+  const localStyles: CSSProperties = {
+    ...style,
+    fontSize: size !== undefined ? fontSizes[size] : '14px',
+  }
+  if (label) {
+    return (
+      <div style={localStyles} className={className}>
+        {labelPosition !== 'right' ? label : null}
+        <Loading style={rotate360Animation} />
+        {labelPosition === 'right' ? label : null}
+      </div>
+    )
   }
-  return <Spinner size={SpinnerSize.xSmall} styles={localStyles} {...rest} />
+  return <Loading style={{ ...rotate360Animation, ...localStyles }} className={className} />
 }
diff --git a/packages/neuron-ui/src/widgets/Table/index.tsx b/packages/neuron-ui/src/widgets/Table/index.tsx
index 4d2249762f..6011b7b806 100755
--- a/packages/neuron-ui/src/widgets/Table/index.tsx
+++ b/packages/neuron-ui/src/widgets/Table/index.tsx
@@ -4,44 +4,50 @@ import TableNoData from 'widgets/Icons/TableNoData.png'
 
 import styles from './table.module.scss'
 
-type TableProps<T> = {
+export type TableProps<T> = {
   head?: React.ReactNode
   columns: {
-    title: string
+    title: React.ReactNode
     dataIndex: string
     key?: string
     isBalance?: boolean
     render?: (v: any, idx: number, item: T, showBalance: boolean) => React.ReactNode
     align?: 'left' | 'right' | 'center'
     className?: string
+    tdClassName?: string
   }[]
   dataKey?: string
   dataSource: T[]
   noDataContent?: string
   onRowDoubleClick?: (e: React.SyntheticEvent, item: T, idx: number) => void
+  className?: string
+  isFixedTable?: boolean
 }
 
 const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
-  const { head, columns, dataSource, noDataContent, onRowDoubleClick, dataKey } = props
+  const { head, columns, dataSource, noDataContent, onRowDoubleClick, dataKey, className = '', isFixedTable } = props
   const [showBalance, setShowBalance] = useState(true)
   const onClickBalanceIcon = useCallback(() => {
     setShowBalance(v => !v)
   }, [setShowBalance])
   return (
-    <div className={styles.tableRoot}>
-      {head}
+    <div
+      className={`${styles.tableRoot} ${className} ${isFixedTable ? styles.fixedTableRoot : ''}`}
+      data-have-head={!!head}
+    >
+      {head && typeof head === 'string' ? <div className={styles.head}>{head}</div> : head}
       <table className={`${styles.table} ${head === null || head === undefined ? styles.noHead : ''}`}>
         <thead>
           <tr>
-            {columns.map(({ title, dataIndex, key, isBalance, align, className }) => {
+            {columns.map(({ title, dataIndex, key, isBalance, align, className: headClassName }) => {
               return (
                 <th
                   key={key || dataIndex}
-                  title={title}
-                  aria-label={title}
+                  title={typeof title === 'string' ? title : dataIndex}
+                  aria-label={typeof title === 'string' ? title : dataIndex}
                   data-field={dataIndex}
                   align={align ?? 'left'}
-                  className={className}
+                  className={headClassName}
                 >
                   {!!dataSource.length && isBalance ? (
                     <div className={styles.headWithBalance} style={{ justifyContent: align }}>
@@ -68,8 +74,8 @@ const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
                 onDoubleClick={onRowDoubleClick ? e => onRowDoubleClick(e, item, idx) : undefined}
                 key={dataKey ? item[dataKey] : idx}
               >
-                {columns.map(({ dataIndex, key, render, align }) => (
-                  <td align={align ?? 'left'} key={key ?? dataIndex}>
+                {columns.map(({ dataIndex, key, render, align, className: bodyTdClassName, tdClassName }) => (
+                  <td align={align ?? 'left'} key={key ?? dataIndex} className={tdClassName ?? bodyTdClassName}>
                     {render ? render(item[dataIndex], idx, item, showBalance) : item[dataIndex]}
                   </td>
                 ))}
diff --git a/packages/neuron-ui/src/widgets/Table/table.module.scss b/packages/neuron-ui/src/widgets/Table/table.module.scss
index d8bdca08a2..af33bd5cbc 100755
--- a/packages/neuron-ui/src/widgets/Table/table.module.scss
+++ b/packages/neuron-ui/src/widgets/Table/table.module.scss
@@ -4,6 +4,9 @@
   @include card;
 }
 
+$table-head-height: 48px;
+$head-height: 52px;
+
 .noHead {
   thead {
     :first-child {
@@ -21,7 +24,7 @@
   border-spacing: 0;
 
   thead {
-    height: 48px;
+    height: $table-head-height;
     background-color: var(--table-head-background-color);
     font-weight: 400;
     color: #999;
@@ -53,6 +56,32 @@
   }
 }
 
+.fixedTableRoot {
+  &[data-have-head="true"] {
+    .table {
+      height: calc(100% - $head-height);
+    }
+  }
+  .table {
+    tbody {
+      height: 100%;
+      display: block;
+      height: calc(100% - $table-head-height);
+      overflow: hidden auto;
+    }
+
+    thead, tbody tr {
+      display: table;
+      width: 100%;
+      table-layout: fixed;
+    }
+
+    thead {
+      width: calc( 100% - 8px)
+    }
+  }
+}
+
 .noData {
   padding: 22px 0 44px 0;
   display: flex;
@@ -60,3 +89,9 @@
   justify-content: center;
   align-items: center;
 }
+
+.head {
+  padding: 0 16px;
+  height: $head-height;
+  line-height: $head-height;
+}
\ No newline at end of file
diff --git a/packages/neuron-ui/src/widgets/Tooltip/index.tsx b/packages/neuron-ui/src/widgets/Tooltip/index.tsx
index a662fd94d1..8ebb84ee8a 100644
--- a/packages/neuron-ui/src/widgets/Tooltip/index.tsx
+++ b/packages/neuron-ui/src/widgets/Tooltip/index.tsx
@@ -12,6 +12,7 @@ interface TooltipProps {
   trigger?: 'hover' | 'click'
   type?: 'normal' | 'always-dark'
   showTriangle?: boolean
+  isTriggerNextToChild?: boolean
 }
 const Tooltip: React.FC<TooltipProps> = ({
   children,
@@ -23,6 +24,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   trigger = 'hover',
   type = 'normal',
   showTriangle,
+  isTriggerNextToChild,
 }) => {
   const [isTipShow, setIsTipShow] = useState(false)
   const onChangeIsTipShow = useCallback(() => {
@@ -41,6 +43,7 @@ const Tooltip: React.FC<TooltipProps> = ({
         onKeyPress={undefined}
         data-type={type}
         data-has-trigger={showTriangle}
+        data-trigger-next-to-child={isTriggerNextToChild}
       >
         {children}
         {showTriangle && <div className={styles.triangle} />}
@@ -58,6 +61,7 @@ const Tooltip: React.FC<TooltipProps> = ({
       onKeyPress={undefined}
       data-type={type}
       data-has-trigger={showTriangle}
+      data-trigger-next-to-child={isTriggerNextToChild}
     >
       <div className={`${styles.tip} ${tipClassName}`}>
         {tip}
diff --git a/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss b/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss
index aefa387f76..f8200d335c 100644
--- a/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss
+++ b/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss
@@ -217,8 +217,10 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
 
       &[data-has-trigger="true"] {
         &[data-placement="bottom"] {
-          &::after {
-            top: calc(100% + 20px)
+          &:not([data-trigger-next-to-child="true"]) {
+            &::after {
+              top: calc(100% + 20px)
+            }
           }
           .triangle {
             top: calc(100% + 4px);
@@ -268,8 +270,10 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
 
   &[data-has-trigger="true"] {
     &[data-placement="bottom"] {
-      & .tip {
-        top: calc(100% + 20px)
+      &:not([data-trigger-next-to-child="true"]) {
+        & .tip {
+          top: calc(100% + 20px)
+        }
       }
     }
   }