From f2f57087f3865096c7d485b6de40df5ef11d772a Mon Sep 17 00:00:00 2001
From: devchenyan <sgt39007@163.com>
Date: Wed, 28 Jun 2023 22:35:17 +0800
Subject: [PATCH] feat: Multisig Address with new ui (#2666)

* feat: Multisig Address with new ui

* fix: tests

* fix: menu

* fix

* fix: Test error

* feat: Multisig Address

* fix: Multisig Address

* fix: Multisig Address for pr
---
 .../approveMultisigTx.module.scss             | 109 -----
 .../components/ApproveMultisigTx/index.tsx    | 157 ------
 .../approveMultisigTx.module.scss             | 168 +++++++
 .../hooks.ts                                  |   0
 .../ApproveMultisigTxDialog/index.tsx         | 187 +++++++
 .../src/components/DataSetting/index.tsx      |  13 +-
 .../ImportHardware/detect-device.tsx          |  10 +-
 .../LanguageDialog/languageDialog.module.scss |  15 +-
 .../src/components/MultisigAddress/hooks.ts   |  77 ++-
 .../src/components/MultisigAddress/index.tsx  | 458 +++++++++++-------
 .../multisigAddress.module.scss               | 256 ++++++----
 .../MultisigAddressCreateDialog/hooks.ts      |  45 +-
 .../MultisigAddressCreateDialog/index.tsx     | 134 ++---
 ...multisig-address-create-dialog.module.scss |  33 --
 .../multisigAddressCreateDialog.module.scss   |  50 ++
 .../components/MultisigAddressInfo/index.tsx  | 132 ++---
 .../multisig-address-info.module.scss         |  79 ++-
 .../src/components/PasswordRequest/index.tsx  |   2 +
 .../src/components/ScriptTag/index.tsx        |   5 +-
 .../src/components/SendFieldset/index.tsx     |  10 +-
 .../SendFromMultisigDialog/index.tsx          | 167 ++++---
 .../sendFromMultisigDialog.module.scss        | 113 +++--
 .../src/components/SignAndVerify/index.tsx    |  12 -
 .../SignAndVerify/signAndVerify.module.scss   |   4 +-
 .../neuron-ui/src/containers/Main/hooks.ts    |  25 +-
 packages/neuron-ui/src/index.tsx              |   8 -
 packages/neuron-ui/src/locales/en.json        |  46 +-
 packages/neuron-ui/src/locales/zh-tw.json     |  36 +-
 packages/neuron-ui/src/locales/zh.json        |  36 +-
 packages/neuron-ui/src/router.tsx             |  64 +--
 .../neuron-ui/src/services/remote/updater.ts  |   4 +-
 packages/neuron-ui/src/styles/mixin.scss      |  29 +-
 packages/neuron-ui/src/styles/theme.scss      |   2 +
 .../neuron-ui/src/types/Subject/index.d.ts    |   1 +
 packages/neuron-ui/src/utils/const.ts         |   2 +
 packages/neuron-ui/src/utils/enums.ts         |   1 +
 packages/neuron-ui/src/utils/multisig.ts      |   5 +-
 .../src/widgets/Dialog/dialog.module.scss     |  27 +-
 .../neuron-ui/src/widgets/Dialog/index.tsx    |  15 +-
 .../src/widgets/Icons/CheckboxDisabled.svg    |   3 +
 .../widgets/Icons/CheckboxDisabledDark.svg    |   3 +
 .../neuron-ui/src/widgets/Icons/Confirm.svg   |   3 +
 .../neuron-ui/src/widgets/Icons/Details.svg   |   3 +
 .../neuron-ui/src/widgets/Icons/Search.svg    |   4 +-
 .../neuron-ui/src/widgets/Icons/Transfer.svg  |   4 +-
 .../neuron-ui/src/widgets/Icons/Upload.svg    |   3 +
 .../src/widgets/InputSelect/index.tsx         |   2 +-
 .../neuron-ui/src/widgets/Table/index.tsx     |  61 +--
 .../neuron-ui/src/widgets/Tooltip/index.tsx   |  21 +-
 .../src/widgets/Tooltip/tooltip.module.scss   |  86 ++--
 .../sync/indexer-cache-service.ts             |   7 +-
 .../src/block-sync-renderer/sync/queue.ts     |  14 +-
 packages/neuron-wallet/src/controllers/api.ts |  20 +-
 .../neuron-wallet/src/controllers/app/menu.ts |  40 +-
 .../neuron-wallet/src/controllers/multisig.ts |  21 +-
 .../src/database/chain/entities/sync-info.ts  |   7 +-
 .../src/database/chain/entities/tx-lock.ts    |   9 +-
 .../neuron-wallet/src/database/chain/index.ts |   4 +-
 .../src/models/subjects/command.ts            |   1 +
 .../src/services/asset-account-service.ts     |   9 +-
 .../tests/controllers/multisig.test.ts        |   6 -
 61 files changed, 1732 insertions(+), 1136 deletions(-)
 delete mode 100644 packages/neuron-ui/src/components/ApproveMultisigTx/approveMultisigTx.module.scss
 delete mode 100644 packages/neuron-ui/src/components/ApproveMultisigTx/index.tsx
 create mode 100644 packages/neuron-ui/src/components/ApproveMultisigTxDialog/approveMultisigTx.module.scss
 rename packages/neuron-ui/src/components/{ApproveMultisigTx => ApproveMultisigTxDialog}/hooks.ts (100%)
 create mode 100644 packages/neuron-ui/src/components/ApproveMultisigTxDialog/index.tsx
 delete mode 100644 packages/neuron-ui/src/components/MultisigAddressCreateDialog/multisig-address-create-dialog.module.scss
 create mode 100644 packages/neuron-ui/src/components/MultisigAddressCreateDialog/multisigAddressCreateDialog.module.scss
 create mode 100644 packages/neuron-ui/src/widgets/Icons/CheckboxDisabled.svg
 create mode 100644 packages/neuron-ui/src/widgets/Icons/CheckboxDisabledDark.svg
 create mode 100644 packages/neuron-ui/src/widgets/Icons/Confirm.svg
 create mode 100644 packages/neuron-ui/src/widgets/Icons/Details.svg
 create mode 100644 packages/neuron-ui/src/widgets/Icons/Upload.svg

diff --git a/packages/neuron-ui/src/components/ApproveMultisigTx/approveMultisigTx.module.scss b/packages/neuron-ui/src/components/ApproveMultisigTx/approveMultisigTx.module.scss
deleted file mode 100644
index a62acbda93..0000000000
--- a/packages/neuron-ui/src/components/ApproveMultisigTx/approveMultisigTx.module.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-@import '../../styles/mixin.scss';
-
-.title {
-  display: flex;
-  line-height: 1.625rem;
-  flex-wrap: wrap;
-}
-
-.textarea {
-  margin-top: 8px;
-  width: 100%;
-  height: 140px;
-  resize: none;
-}
-
-.action {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 24px;
-}
-
-.recordTab {
-  position: relative;
-  display: flex;
-  box-sizing: border-box;
-  margin: 0 0 10px 0;
-  padding: 0;
-  line-height: 1.6875rem;
-  font-size: 1.375rem;
-  color: #000;
-  border-bottom: 1px solid #ccc;
-
-  button {
-    @include bold-text;
-    appearance: none;
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 1.875rem;
-    font-size: 1rem;
-    background-color: transparent;
-    padding: 0 0 6px 0;
-    margin: 0;
-    border: none;
-
-    &:hover {
-      color: var(--nervos-green);
-      opacity: 0.8;
-    }
-  }
-
-  .underline {
-    display: block;
-    position: absolute;
-    bottom: -1px;
-    left: 0;
-    height: 4px;
-    width: 50%;
-    background: var(--nervos-green);
-    box-sizing: border-box;
-    padding: 0;
-    transition: transform 0.1s ease-in-out;
-  }
-
-  &[data-idx='1'] {
-    .underline {
-      transform: translateX(100%);
-    }
-  }
-}
-
-.cellItem {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  & > div {
-    display: flex;
-    align-items: center;
-  }
-
-  .tag {
-    background-color: #ddd;
-    color: #fff;
-    padding: 2px;
-    margin: 4px;
-    padding: 0 6px;
-    font-size: 12px;
-    border-radius: 4px;
-    border: 1px solid #ddd;
-    text-decoration: line-through;
-  
-    &+.activity {
-      background: var(--nervos-green);
-      border-color: var(--nervos-green);
-      text-decoration: none;
-    }
-  }
-
-  .capacity {
-    flex-shrink: 0;
-    margin-left: 16px;
-  }
-}
-
-.statusTitle {
-  margin-top: 8px;
-}
diff --git a/packages/neuron-ui/src/components/ApproveMultisigTx/index.tsx b/packages/neuron-ui/src/components/ApproveMultisigTx/index.tsx
deleted file mode 100644
index 3bc19fa7c1..0000000000
--- a/packages/neuron-ui/src/components/ApproveMultisigTx/index.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useMemo } from 'react'
-import { useTranslation, Trans } from 'react-i18next'
-import { MultisigConfig, OfflineSignJSON } from 'services/remote'
-import Button from 'widgets/Button'
-import CopyZoneAddress from 'widgets/CopyZoneAddress'
-import { useState as useGlobalState } from 'states'
-import { ckbCore } from 'services/chain'
-import { shannonToCKBFormatter } from 'utils'
-import ScriptTag from 'components/ScriptTag'
-import getMultisigSignStatus from 'utils/getMultisigSignStatus'
-import styles from './approveMultisigTx.module.scss'
-import { useBroadcast, useExport, useSignAndBroadcast, useSignAndExport, useTabView } from './hooks'
-
-const Cell = React.memo(
-  ({
-    cell,
-    isMainnet,
-  }: {
-    cell: {
-      lock: CKBComponents.Script
-      type?: CKBComponents.Script
-      data?: string
-      capacity: string
-    }
-    isMainnet: boolean
-  }) => {
-    return (
-      <div className={styles.cellItem}>
-        <div>
-          <CopyZoneAddress fullPayload={ckbCore.utils.scriptToAddress(cell.lock, isMainnet)} />
-          <span className={`${cell.type ? styles.activity : ''} ${styles.tag}`}>Type</span>
-          <span className={`${cell.data && cell.data !== '0x' ? styles.activity : ''} ${styles.tag}`}>Data</span>
-          <ScriptTag script={cell.lock} isMainnet={isMainnet} />
-        </div>
-        <span className={styles.capacity}>{`${shannonToCKBFormatter(cell.capacity)} CKB`}</span>
-      </div>
-    )
-  }
-)
-const ApproveMultisigTx = ({
-  multisigConfig,
-  closeDialog,
-  offlineSignJson,
-  isMainnet,
-}: {
-  multisigConfig: MultisigConfig
-  closeDialog: () => void
-  offlineSignJson: OfflineSignJSON
-  isMainnet: boolean
-}) => {
-  const [t] = useTranslation()
-  const { wallet } = useGlobalState()
-  const jsonContent = useMemo(() => {
-    return JSON.stringify(offlineSignJson, null, 2)
-  }, [offlineSignJson])
-  const { lackOfRCount, lackOfMCount, canBroadcastAfterSign, canSign } = useMemo(
-    () =>
-      getMultisigSignStatus({
-        multisigConfig,
-        signatures: offlineSignJson.transaction.signatures,
-        addresses: wallet.addresses,
-      }),
-    [multisigConfig, offlineSignJson.transaction.signatures, wallet.addresses]
-  )
-  const onSignAndExport = useSignAndExport({
-    multisigConfig,
-    walletID: wallet.id,
-    offlineSignJson,
-    closeDialog,
-  })
-  const onBroadcast = useBroadcast({ offlineSignJson, walletID: wallet.id, closeDialog, t })
-  const onSignAndBroadcast = useSignAndBroadcast({
-    multisigConfig,
-    walletID: wallet.id,
-    offlineSignJson,
-    canBroadcastAfterSign,
-    closeDialog,
-  })
-  const onExport = useExport({ offlineSignJson, closeDialog })
-  const { tabIdx, onTabClick } = useTabView()
-  const [label, action] = useMemo(() => {
-    if (!lackOfMCount && !lackOfRCount) {
-      return ['broadcast', onBroadcast]
-    }
-    if (!canSign) {
-      return ['export', onExport]
-    }
-    if (canBroadcastAfterSign) {
-      return ['signAndBroadcast', onSignAndBroadcast]
-    }
-    return ['signAndExport', onSignAndExport]
-  }, [
-    lackOfMCount,
-    lackOfRCount,
-    canSign,
-    canBroadcastAfterSign,
-    onBroadcast,
-    onExport,
-    onSignAndBroadcast,
-    onSignAndExport,
-  ])
-  return (
-    <>
-      <div className={styles.title}>
-        <Trans
-          i18nKey="multisig-address.approve-dialog.title"
-          values={multisigConfig}
-          components={[<CopyZoneAddress fullPayload={multisigConfig.fullPayload} />]}
-        />
-      </div>
-      <h4>{t('multisig-address.approve-dialog.transaction')}</h4>
-      <section>
-        <div>{t('multisig-address.approve-dialog.content')}</div>
-        <div role="presentation" className={styles.recordTab} data-idx={tabIdx} onClick={onTabClick}>
-          <button type="button" role="tab" data-idx="0">
-            {t('multisig-address.approve-dialog.view-raw-data')}
-          </button>
-          <button type="button" role="tab" data-idx="1">
-            {t('multisig-address.approve-dialog.view-concise-data')}
-          </button>
-          <div className={styles.underline} />
-        </div>
-        {tabIdx === '0' ? (
-          <textarea disabled value={jsonContent} className={styles.textarea} />
-        ) : (
-          <>
-            <h5>Inputs</h5>
-            {offlineSignJson.transaction?.inputs?.map((v: any) => (
-              <Cell cell={v} isMainnet={isMainnet} key={v.lockHash} />
-            ))}
-            <h5>Outputs</h5>
-            {offlineSignJson.transaction?.outputs?.map((v: any) => (
-              <Cell cell={v} isMainnet={isMainnet} key={v.lockHash} />
-            ))}
-          </>
-        )}
-        <div className={styles.statusTitle}>{t('multisig-address.approve-dialog.status')}</div>
-        {lackOfMCount && lackOfRCount ? (
-          <div>{t('multisig-address.approve-dialog.signerApprove', { m: lackOfMCount, r: lackOfRCount })}</div>
-        ) : (
-          <>
-            {!!lackOfMCount && <div>{t('multisig-address.approve-dialog.noRSignerApprove', { m: lackOfMCount })}</div>}
-            {!lackOfMCount && <div>{t('multisig-address.approve-dialog.signed')}</div>}
-          </>
-        )}
-      </section>
-      <div className={styles.action}>
-        <Button label={t('multisig-address.approve-dialog.cancel')} type="cancel" onClick={closeDialog} />
-        <Button label={t(`multisig-address.approve-dialog.${label}`)} type="primary" onClick={action} />
-      </div>
-    </>
-  )
-}
-
-ApproveMultisigTx.displayName = 'ApproveMultisigTx'
-
-export default ApproveMultisigTx
diff --git a/packages/neuron-ui/src/components/ApproveMultisigTxDialog/approveMultisigTx.module.scss b/packages/neuron-ui/src/components/ApproveMultisigTxDialog/approveMultisigTx.module.scss
new file mode 100644
index 0000000000..6256ece65a
--- /dev/null
+++ b/packages/neuron-ui/src/components/ApproveMultisigTxDialog/approveMultisigTx.module.scss
@@ -0,0 +1,168 @@
+@import '../../styles/mixin.scss';
+
+.dialogContainer {
+  padding: 0;
+}
+
+.container {
+  width: 680px;
+
+  .header {
+    line-height: 48px;
+    padding: 0 16px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    background: var(--table-head-background-color);
+    color: var(--secondary-text-color);
+    border-bottom: 1px solid var(--table-head-border-color);
+
+    .tip {
+      // This selector is only used to increase weight and override the default styles in the Tooltip component.
+      &:not([data-tooltip='']) {
+        left: calc(100% - 240px);
+      }
+    }
+
+    .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;
+      }
+    }
+
+    .address {
+      height: 56px;
+      text-decoration: underline;
+      margin: 0 4px;
+
+      &:hover {
+        color: var(--activity-color);
+      }
+    }
+  }
+}
+
+.content {
+  margin: 16px;
+  background: var(--secondary-background-color);
+  border: 1px solid var(--divide-line-color);
+  border-radius: 8px;
+}
+
+.textarea {
+  width: calc(100% - 32px);
+  padding: 16px 16px 0;
+  background: transparent;
+  border: none;
+  height: 206px;
+  resize: none;
+  color: var(--main-text-color);
+}
+
+.recordTab {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  color: var(--secondary-text-color);
+  border-bottom: 1px solid var(--divide-line-color);
+
+  button {
+    appearance: none;
+    flex: 1;
+    height: 50px;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: transparent;
+    margin: 0;
+    border: none;
+    cursor: pointer;
+  }
+
+  .underline {
+    display: block;
+    position: absolute;
+    bottom: 2px;
+    left: 0;
+    width: 50%;
+    box-sizing: border-box;
+    transition: transform 0.1s ease-in-out;
+    &::after {
+      content: '';
+      width: 100px;
+      height: 2px;
+      position: absolute;
+      top: 0;
+      left: calc(50% - 50px);
+      background: var(--primary-color);
+      border-radius: 8px;
+    }
+  }
+
+  &[data-idx='1'] {
+    .underline {
+      transform: translateX(100%);
+    }
+  }
+}
+
+.cellItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .tag {
+    background-color: var(--input-disabled-color);
+    color: var(--input-second-color);
+    margin-left: 8px;
+    padding: 3px 8px;
+    font-size: 12px;
+    border-radius: 4px;
+    border: 1px solid var(--divide-line-color);
+
+    & + .activity {
+      background: var(--primary-color);
+      border-color: var(--primary-color);
+      color: var(--primary-text-color);
+    }
+  }
+}
+
+.conciseData {
+  padding: 0 16px;
+  color: var(--main-text-color);
+  height: 222px;
+  overflow-y: scroll;
+  h2 {
+    margin: 12px 0 10px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .inputWrap {
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--divide-line-color);
+  }
+}
+
+.statusTitle {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+  font-size: 14px;
+  color: var(--main-text-color);
+}
diff --git a/packages/neuron-ui/src/components/ApproveMultisigTx/hooks.ts b/packages/neuron-ui/src/components/ApproveMultisigTxDialog/hooks.ts
similarity index 100%
rename from packages/neuron-ui/src/components/ApproveMultisigTx/hooks.ts
rename to packages/neuron-ui/src/components/ApproveMultisigTxDialog/hooks.ts
diff --git a/packages/neuron-ui/src/components/ApproveMultisigTxDialog/index.tsx b/packages/neuron-ui/src/components/ApproveMultisigTxDialog/index.tsx
new file mode 100644
index 0000000000..71adb6570c
--- /dev/null
+++ b/packages/neuron-ui/src/components/ApproveMultisigTxDialog/index.tsx
@@ -0,0 +1,187 @@
+import React, { useMemo } from 'react'
+import { useTranslation, Trans } from 'react-i18next'
+import { MultisigConfig, OfflineSignJSON } from 'services/remote'
+import { useState as useGlobalState } from 'states'
+import { ckbCore } from 'services/chain'
+import Tooltip from 'widgets/Tooltip'
+import { Copy } from 'widgets/Icons/icon'
+import CopyZone from 'widgets/CopyZone'
+import { shannonToCKBFormatter } from 'utils'
+import ScriptTag from 'components/ScriptTag'
+import Dialog from 'widgets/Dialog'
+import getMultisigSignStatus from 'utils/getMultisigSignStatus'
+import { useBroadcast, useExport, useSignAndBroadcast, useSignAndExport, useTabView } from './hooks'
+import styles from './approveMultisigTx.module.scss'
+
+interface CellProps {
+  lock: CKBComponents.Script
+  type?: CKBComponents.Script
+  data?: string
+  capacity: string
+  lockHash: string
+}
+
+const Cell = React.memo(({ cell, isMainnet }: { cell: CellProps; isMainnet: boolean }) => {
+  const address = useMemo(() => ckbCore.utils.scriptToAddress(cell.lock, isMainnet), [cell, isMainnet])
+  return (
+    <div className={styles.cellItem}>
+      <div>
+        {address.slice(0, 6)}...{address.slice(-6)}
+        <span className={`${cell.type ? styles.activity : ''} ${styles.tag}`}>Type</span>
+        <span className={`${cell.data && cell.data !== '0x' ? styles.activity : ''} ${styles.tag}`}>Data</span>
+        <ScriptTag script={cell.lock} isMainnet={isMainnet} />
+      </div>
+      <div>{`${shannonToCKBFormatter(cell.capacity)} CKB`}</div>
+    </div>
+  )
+})
+const ApproveMultisigTxDialog = ({
+  multisigConfig,
+  closeDialog,
+  offlineSignJson,
+  isMainnet,
+}: {
+  multisigConfig: MultisigConfig
+  closeDialog: () => void
+  offlineSignJson: OfflineSignJSON
+  isMainnet: boolean
+}) => {
+  const [t] = useTranslation()
+  const { wallet } = useGlobalState()
+  const jsonContent = useMemo(() => {
+    return JSON.stringify(offlineSignJson, null, 2)
+  }, [offlineSignJson])
+  const { lackOfRCount, lackOfMCount, canBroadcastAfterSign, canSign } = useMemo(
+    () =>
+      getMultisigSignStatus({
+        multisigConfig,
+        signatures: offlineSignJson.transaction.signatures,
+        addresses: wallet.addresses,
+      }),
+    [multisigConfig, offlineSignJson.transaction.signatures, wallet.addresses]
+  )
+  const onSignAndExport = useSignAndExport({
+    multisigConfig,
+    walletID: wallet.id,
+    offlineSignJson,
+    closeDialog,
+  })
+  const onBroadcast = useBroadcast({ offlineSignJson, walletID: wallet.id, closeDialog, t })
+  const onSignAndBroadcast = useSignAndBroadcast({
+    multisigConfig,
+    walletID: wallet.id,
+    offlineSignJson,
+    canBroadcastAfterSign,
+    closeDialog,
+  })
+  const onExport = useExport({ offlineSignJson, closeDialog })
+  const { tabIdx, onTabClick } = useTabView()
+  const [label, action] = useMemo(() => {
+    if (!lackOfMCount && !lackOfRCount) {
+      return ['broadcast', onBroadcast]
+    }
+    if (!canSign) {
+      return ['export', onExport]
+    }
+    if (canBroadcastAfterSign) {
+      return ['signAndBroadcast', onSignAndBroadcast]
+    }
+    return ['signAndExport', onSignAndExport]
+  }, [
+    lackOfMCount,
+    lackOfRCount,
+    canSign,
+    canBroadcastAfterSign,
+    onBroadcast,
+    onExport,
+    onSignAndBroadcast,
+    onSignAndExport,
+  ])
+  return (
+    <Dialog
+      show
+      title={t('multisig-address.approve-dialog.title')}
+      onCancel={closeDialog}
+      onConfirm={action}
+      confirmText={t(`multisig-address.approve-dialog.${label}`)}
+      contentClassName={styles.dialogContainer}
+    >
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <Tooltip
+            tipClassName={styles.tip}
+            placement="right-bottom"
+            tip={
+              <CopyZone content={multisigConfig.fullPayload} className={styles.copyTableAddress}>
+                {multisigConfig.fullPayload}
+                <Copy />
+              </CopyZone>
+            }
+            showTriangle
+            isTriggerNextToChild
+          >
+            <div>
+              <Trans
+                i18nKey="multisig-address.approve-dialog.detail"
+                values={multisigConfig}
+                components={[
+                  <span className={styles.address}>
+                    <span>{multisigConfig.fullPayload.slice(0, 6)}</span>
+                    <span>...</span>
+                    <span>{multisigConfig.fullPayload.slice(-6)}</span>
+                  </span>,
+                ]}
+              />
+            </div>
+          </Tooltip>
+        </div>
+
+        <div className={styles.content}>
+          <div role="presentation" className={styles.recordTab} data-idx={tabIdx} onClick={onTabClick}>
+            <button type="button" role="tab" data-idx="0">
+              {t('multisig-address.approve-dialog.view-raw-data')}
+            </button>
+            <button type="button" role="tab" data-idx="1">
+              {t('multisig-address.approve-dialog.view-concise-data')}
+            </button>
+            <div className={styles.underline} />
+          </div>
+          {tabIdx === '0' ? (
+            <textarea disabled value={jsonContent} className={styles.textarea} />
+          ) : (
+            <div className={styles.conciseData}>
+              <div className={styles.inputWrap}>
+                <h2>Inputs</h2>
+                {offlineSignJson.transaction?.inputs?.map((input: CellProps) => (
+                  <Cell cell={input} isMainnet={isMainnet} key={input.lockHash} />
+                ))}
+              </div>
+              <h2>Outputs</h2>
+              {offlineSignJson.transaction?.outputs?.map((output: CellProps) => (
+                <Cell cell={output} isMainnet={isMainnet} key={output.lockHash} />
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className={styles.statusTitle}>
+          <span>{t('multisig-address.approve-dialog.status')}: &nbsp;</span>
+          {lackOfMCount && lackOfRCount ? (
+            <span>{t('multisig-address.approve-dialog.signerApprove', { m: lackOfMCount, r: lackOfRCount })}</span>
+          ) : (
+            <>
+              {!!lackOfMCount && (
+                <span>{t('multisig-address.approve-dialog.noRSignerApprove', { m: lackOfMCount })}</span>
+              )}
+              {!lackOfMCount && <span>{t('multisig-address.approve-dialog.signed')}</span>}
+            </>
+          )}
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+ApproveMultisigTxDialog.displayName = 'ApproveMultisigTxDialog'
+
+export default ApproveMultisigTxDialog
diff --git a/packages/neuron-ui/src/components/DataSetting/index.tsx b/packages/neuron-ui/src/components/DataSetting/index.tsx
index 04e1baa2e0..567b665233 100644
--- a/packages/neuron-ui/src/components/DataSetting/index.tsx
+++ b/packages/neuron-ui/src/components/DataSetting/index.tsx
@@ -19,7 +19,7 @@ const PathItem = ({
   path,
   handleClick,
   openPath,
-  disabled
+  disabled,
 }: {
   path?: string
   handleClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void
@@ -85,8 +85,15 @@ const DataSetting = () => {
           </div>
         </div>
         <div className={styles.rightContainer}>
-          { isLightClient ? null : <PathItem path={prevPath} openPath={openPath} handleClick={onSetting} disabled={isCkbRunExternal} /> }
-          <ClearCache className={styles.item} btnClassName={styles.itemBtn} dispatch={dispatch} hideRebuild={isLightClient} />
+          {isLightClient ? null : (
+            <PathItem path={prevPath} openPath={openPath} handleClick={onSetting} disabled={isCkbRunExternal} />
+          )}
+          <ClearCache
+            className={styles.item}
+            btnClassName={styles.itemBtn}
+            dispatch={dispatch}
+            hideRebuild={isLightClient}
+          />
         </div>
       </div>
 
diff --git a/packages/neuron-ui/src/components/ImportHardware/detect-device.tsx b/packages/neuron-ui/src/components/ImportHardware/detect-device.tsx
index b6989aab5a..8e75889e88 100644
--- a/packages/neuron-ui/src/components/ImportHardware/detect-device.tsx
+++ b/packages/neuron-ui/src/components/ImportHardware/detect-device.tsx
@@ -25,11 +25,11 @@ const Info = (
   if (isError) {
     return (
       <div className={styles.errorInfo}>
-          <span>
-            <ErrorIcon type="error" />
-          </span>
-          <span className={styles.error}>{msg}</span>
-        </div>
+        <span>
+          <ErrorIcon type="error" />
+        </span>
+        <span className={styles.error}>{msg}</span>
+      </div>
     )
   }
   return (
diff --git a/packages/neuron-ui/src/components/LanguageDialog/languageDialog.module.scss b/packages/neuron-ui/src/components/LanguageDialog/languageDialog.module.scss
index 9f5a245cb4..61b2177b46 100644
--- a/packages/neuron-ui/src/components/LanguageDialog/languageDialog.module.scss
+++ b/packages/neuron-ui/src/components/LanguageDialog/languageDialog.module.scss
@@ -19,9 +19,9 @@
   .content {
     border: 1px solid var(--divide-line-color);
     border-radius: 8px;
-    &[data-active="true"] {
+    &[data-active='true'] {
       svg {
-        g, 
+        g,
         path {
           stroke: var(--primary-color);
         }
@@ -32,12 +32,12 @@
 
   .selects {
     position: fixed;
-    width: 50vw;
+    width: 648px;
     margin-top: 8px;
     padding: 16px 0;
-    z-index: 1;
+    z-index: 2;
     background: var(--secondary-background-color);
-    box-shadow: 0px 1px 4px #EEEEEE;
+    box-shadow: 0px 1px 4px #eeeeee;
     border-radius: 8px;
     @media (prefers-color-scheme: dark) {
       box-shadow: none;
@@ -52,10 +52,9 @@
     }
   }
 
-
   .selectItem {
     display: block;
-    width: 50vw;
+    width: 648px;
     padding: 0 16px;
 
     .wrap {
@@ -65,7 +64,7 @@
       justify-content: space-between;
       align-items: center;
     }
-    
+
     p {
       margin: 0;
     }
diff --git a/packages/neuron-ui/src/components/MultisigAddress/hooks.ts b/packages/neuron-ui/src/components/MultisigAddress/hooks.ts
index b448c0ee00..4449c24a99 100644
--- a/packages/neuron-ui/src/components/MultisigAddress/hooks.ts
+++ b/packages/neuron-ui/src/components/MultisigAddress/hooks.ts
@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react'
-import { useDialogWrapper, isSuccessResponse, getMultisigAddress, DefaultLockInfo } from 'utils'
+import { isSuccessResponse, getMultisigAddress, DefaultLockInfo } from 'utils'
 import { MultisigOutputUpdate } from 'services/subjects'
 import {
   MultisigConfig,
@@ -37,7 +37,19 @@ export const useSearch = (clearSelected: () => void, onFilterConfig: (searchKey:
   const onClear = useCallback(() => {
     onSearch('')
   }, [onSearch])
-  return { keywords, onKeywordsChange, setKeywords, onSearch, onClear }
+
+  const onChange = useCallback(
+    (e: React.FormEvent<HTMLInputElement>) => {
+      onKeywordsChange(e, e.currentTarget.value)
+    },
+    [onKeywordsChange]
+  )
+
+  const onBlur = useCallback(() => {
+    onSearch(keywords)
+  }, [onSearch, keywords])
+
+  return { keywords, onKeywordsChange, setKeywords, onSearch, onClear, onChange, onBlur }
 }
 
 export const useConfigManage = ({ walletId, isMainnet }: { walletId: string; isMainnet: boolean }) => {
@@ -68,8 +80,9 @@ export const useConfigManage = ({ walletId, isMainnet }: { walletId: string; isM
     })
   }, [setEntities, walletId])
   const updateConfig = useCallback(
-    (id: number) => (alias: string | undefined) => {
-      updateMultisigConfig({ id, alias: alias || '' }).then(res => {
+    (id: number) => (e: React.SyntheticEvent<unknown>) => {
+      const { value } = e.target as HTMLInputElement
+      updateMultisigConfig({ id, alias: value || '' }).then(res => {
         if (isSuccessResponse(res)) {
           setEntities(v => v.map(config => (res.result && config.id === res.result?.id ? res.result : config)))
         }
@@ -176,70 +189,80 @@ export const useExportConfig = (configs: MultisigConfig[]) => {
 }
 
 const useSendAction = () => {
-  const { openDialog, closeDialog, dialogRef, isDialogOpen } = useDialogWrapper()
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [sendFromMultisig, setSendFromMultisig] = useState<MultisigConfig | undefined>()
   const onOpenSendDialog = useCallback(
     (option: MultisigConfig) => {
-      openDialog()
+      setIsDialogOpen(true)
       setSendFromMultisig(option)
     },
-    [openDialog, setSendFromMultisig]
+    [setIsDialogOpen, setSendFromMultisig]
   )
+  const closeDialog = useCallback(() => {
+    setIsDialogOpen(false)
+  }, [setIsDialogOpen])
+
   return {
     action: onOpenSendDialog,
     closeDialog,
-    dialogRef,
     sendFromMultisig,
     isDialogOpen,
   }
 }
 
 const useInfoAction = () => {
-  const { openDialog: openInfoDialog, closeDialog, dialogRef } = useDialogWrapper()
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [multisigConfig, setMultisigConfig] = useState<MultisigConfig | undefined>()
   const viewMultisigConfig = useCallback(
     (option: MultisigConfig) => {
-      openInfoDialog()
+      setIsDialogOpen(true)
       setMultisigConfig(option)
     },
-    [openInfoDialog, setMultisigConfig]
+    [setIsDialogOpen, setMultisigConfig]
   )
+  const closeDialog = useCallback(() => {
+    setIsDialogOpen(false)
+  }, [setIsDialogOpen])
   return {
     action: viewMultisigConfig,
     closeDialog,
-    dialogRef,
     multisigConfig,
+    isDialogOpen,
   }
 }
 
 const useDeleteAction = (deleteConfigById: (id: number) => void) => {
-  const { openDialog, closeDialog, dialogRef } = useDialogWrapper()
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [deleteErrorMessage, setDeleteErrorMessage] = useState<string | undefined>()
-  const deleteConfig = useCallback(
-    (option: MultisigConfig) => {
-      deleteMultisigConfig(option.id).then(res => {
+  const [config, setConfig] = useState<MultisigConfig>()
+  const deleteConfig = useCallback(() => {
+    if (config) {
+      deleteMultisigConfig(config.id).then(res => {
         if (isSuccessResponse(res)) {
           if (res.result) {
-            deleteConfigById(option.id)
+            deleteConfigById(config.id)
           }
         } else {
-          openDialog()
+          setIsDialogOpen(true)
           setDeleteErrorMessage(typeof res.message === 'string' ? res.message : res.message.content)
         }
       })
-    },
-    [deleteConfigById, setDeleteErrorMessage, openDialog]
-  )
+    }
+  }, [deleteConfigById, setDeleteErrorMessage, setIsDialogOpen, config])
+  const closeDialog = useCallback(() => {
+    setIsDialogOpen(false)
+  }, [setIsDialogOpen])
   return {
     action: deleteConfig,
     closeDialog,
-    dialogRef,
     deleteErrorMessage,
+    setConfig,
+    isDialogOpen,
   }
 }
 
 const useApproveAction = () => {
-  const { openDialog, closeDialog, dialogRef, isDialogOpen } = useDialogWrapper()
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [multisigConfig, setMultisigConfig] = useState<MultisigConfig | undefined>()
   const [offlineSignJson, setOfflineSignJson] = useState<OfflineSignJSON | undefined>()
   const action = useCallback(
@@ -248,19 +271,21 @@ const useApproveAction = () => {
       if (option.fullPayload) {
         loadMultisigTxJson(option.fullPayload).then(res => {
           if (isSuccessResponse(res) && res.result) {
-            openDialog()
+            setIsDialogOpen(true)
             setMultisigConfig(option)
             setOfflineSignJson(res.result)
           }
         })
       }
     },
-    [openDialog]
+    [setIsDialogOpen]
   )
+  const closeDialog = useCallback(() => {
+    setIsDialogOpen(false)
+  }, [setIsDialogOpen])
   return {
     action,
     closeDialog,
-    dialogRef,
     multisigConfig,
     isDialogOpen,
     offlineSignJson,
diff --git a/packages/neuron-ui/src/components/MultisigAddress/index.tsx b/packages/neuron-ui/src/components/MultisigAddress/index.tsx
index b14a9d3dbf..afafdbf3d4 100644
--- a/packages/neuron-ui/src/components/MultisigAddress/index.tsx
+++ b/packages/neuron-ui/src/components/MultisigAddress/index.tsx
@@ -1,43 +1,51 @@
-import React, { useCallback, useMemo, useEffect } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SearchBox, MessageBar, MessageBarType } from 'office-ui-fabric-react'
-import Button from 'widgets/Button'
-import {
-  useOnLocaleChange,
-  isMainnet as isMainnetUtil,
-  shannonToCKBFormatter,
-  useExitOnWalletChange,
-  useDialogWrapper,
-} from 'utils'
+import { useNavigate } from 'react-router-dom'
+import { useOnLocaleChange, isMainnet as isMainnetUtil, shannonToCKBFormatter, useExitOnWalletChange } from 'utils'
 import { useState as useGlobalState, withProvider } from 'states'
 import MultisigAddressCreateDialog from 'components/MultisigAddressCreateDialog'
-import CopyZone from 'widgets/CopyZone'
-import { More } from 'widgets/Icons/icon'
-import { CustomizableDropdown } from 'widgets/Dropdown'
 import MultisigAddressInfo from 'components/MultisigAddressInfo'
 import SendFromMultisigDialog from 'components/SendFromMultisigDialog'
-import { EditTextField } from 'widgets/TextField'
 import { MultisigConfig } from 'services/remote'
 import PasswordRequest from 'components/PasswordRequest'
-import ApproveMultisigTx from 'components/ApproveMultisigTx'
-import { LIGHT_NETWORK_TYPE } from 'utils/const'
+import ApproveMultisigTxDialog from 'components/ApproveMultisigTxDialog'
+import Dialog from 'widgets/Dialog'
+import Table from 'widgets/Table'
+import Tooltip from 'widgets/Tooltip'
+import AlertDialog from 'widgets/AlertDialog'
+import { ReactComponent as AddSimple } from 'widgets/Icons/AddSimple.svg'
+import { ReactComponent as Details } from 'widgets/Icons/Details.svg'
+import { ReactComponent as Delete } from 'widgets/Icons/Delete.svg'
+import { ReactComponent as Confirm } from 'widgets/Icons/Confirm.svg'
+import { ReactComponent as Transfer } from 'widgets/Icons/Transfer.svg'
+import { ReactComponent as Search } from 'widgets/Icons/Search.svg'
+import { ReactComponent as Upload } from 'widgets/Icons/Upload.svg'
+import { ReactComponent as Download } from 'widgets/Icons/Download.svg'
+import { ReactComponent as Edit } from 'widgets/Icons/Edit.svg'
+import { HIDE_BALANCE, LIGHT_NETWORK_TYPE } from 'utils/const'
+import { onEnter } from 'utils/inputDevice'
 import { useSearch, useConfigManage, useExportConfig, useActions, useSubscription } from './hooks'
 
 import styles from './multisigAddress.module.scss'
 
-const searchBoxStyles = {
-  root: {
-    background: '#e3e3e3',
-    borderRadius: 0,
-    fontSize: '1rem',
-    border: '1px solid rgb(204, 204, 204)',
-    borderTopLeftRadius: 2,
-    borderBottomLeftRadius: 2,
+const tableActions = [
+  {
+    key: 'info',
+    icon: <Details />,
   },
-}
-const messageBarStyle = { text: { alignItems: 'center' } }
-
-const tableActions = ['info', 'delete', 'send', 'approve']
+  {
+    key: 'delete',
+    icon: <Delete />,
+  },
+  {
+    key: 'send',
+    icon: <Transfer />,
+  },
+  {
+    key: 'approve',
+    icon: <Confirm />,
+  },
+]
 
 const MultisigAddress = () => {
   const [t, i18n] = useTranslation()
@@ -48,16 +56,12 @@ const MultisigAddress = () => {
     chain: { networkID },
     settings: { networks = [] },
   } = useGlobalState()
-  useEffect(() => {
-    window.document.title = i18n.t('multisig-address.window-title')
-    // eslint-disable-next-line
-  }, [i18n.language])
   const isMainnet = isMainnetUtil(networks, networkID)
   const isLightClient = useMemo(
     () => networks.find(n => n.id === networkID)?.type === LIGHT_NETWORK_TYPE,
     [networks, networkID]
   )
-  const { openDialog, closeDialog, dialogRef, isDialogOpen } = useDialogWrapper()
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
   const { allConfigs, saveConfig, updateConfig, deleteConfigById, onImportConfig, configs, onFilterConfig } =
     useConfigManage({
       walletId,
@@ -70,14 +74,24 @@ const MultisigAddress = () => {
     isLightClient,
   })
   const { deleteAction, infoAction, sendAction, approveAction } = useActions({ deleteConfigById })
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+
+  const showMainDialog = useMemo(
+    () => !(infoAction.isDialogOpen || sendAction.isDialogOpen || approveAction.isDialogOpen || isCreateDialogOpen),
+    [infoAction.isDialogOpen, sendAction.isDialogOpen, approveAction.isDialogOpen, isCreateDialogOpen]
+  )
   const onClickItem = useCallback(
-    (multisigConfig: MultisigConfig) => (option: { key: string }) => {
-      switch (option.key) {
+    (multisigConfig: MultisigConfig) => (e: React.SyntheticEvent<HTMLButtonElement>) => {
+      const {
+        dataset: { key },
+      } = e.currentTarget
+      switch (key) {
         case 'info':
           infoAction.action(multisigConfig)
           break
         case 'delete':
-          deleteAction.action(multisigConfig)
+          deleteAction.setConfig(multisigConfig)
+          setShowDeleteDialog(true)
           break
         case 'send':
           sendAction.action(multisigConfig)
@@ -91,116 +105,227 @@ const MultisigAddress = () => {
     },
     [deleteAction, infoAction, sendAction, approveAction]
   )
+  const { selectIds, isAllSelected, onChangeChecked, onChangeCheckedAll, exportConfig, clearSelected } =
+    useExportConfig(configs)
+
   const listActionOptions = useMemo(
-    () => tableActions.map(key => ({ key, label: t(`multisig-address.table.actions.${key}`) })),
-    [t]
+    () =>
+      tableActions.map(item => ({
+        ...item,
+        label: t(`multisig-address.table.actions.${item.key}`),
+        disabled: selectIds.length > 1 && item.key !== 'delete',
+      })),
+    [t, selectIds]
   )
   const listNoBalanceActionOptions = useMemo(
     () =>
-      tableActions.map(key => ({ key, label: t(`multisig-address.table.actions.${key}`), disabled: key === 'send' })),
+      tableActions.map(item => ({
+        ...item,
+        label: t(`multisig-address.table.actions.${item.key}`),
+        disabled: item.key === 'send',
+      })),
     [t]
   )
-  const { selectIds, isAllSelected, onChangeChecked, onChangeCheckedAll, exportConfig, clearSelected } =
-    useExportConfig(configs)
-  const { keywords, onKeywordsChange, onSearch, onClear } = useSearch(clearSelected, onFilterConfig)
+
+  const { keywords, onChange, onBlur } = useSearch(clearSelected, onFilterConfig)
+
   const sendTotalBalance = useMemo(() => {
     if (sendAction.sendFromMultisig?.fullPayload) {
       return multisigBanlances[sendAction.sendFromMultisig.fullPayload]
     }
     return ''
   }, [multisigBanlances, sendAction.sendFromMultisig])
+
+  const navigate = useNavigate()
+  const onBack = useCallback(() => {
+    navigate(-1)
+  }, [navigate])
+
   return (
     <div>
-      <div className={styles.head}>
-        <SearchBox
-          value={keywords}
-          className={styles.searchBox}
-          styles={searchBoxStyles}
-          placeholder={t('multisig-address.search.placeholder')}
-          onChange={onKeywordsChange}
-          onSearch={onSearch}
-          onClear={onClear}
-          iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}
-        />
-        <div className={styles.actions}>
-          <Button label={t('multisig-address.add.label')} type="primary" onClick={openDialog} />
-          <Button label={t('multisig-address.import.label')} type="primary" onClick={onImportConfig} />
-          <Button label={t('multisig-address.export.label')} type="primary" onClick={exportConfig} />
+      <Dialog show={showMainDialog} title={t('multisig-address.window-title')} onCancel={onBack} showFooter={false}>
+        <div className={styles.container}>
+          <div className={styles.head}>
+            <div className={styles.searchBox}>
+              <Search />
+              <input
+                value={keywords}
+                placeholder={t('multisig-address.search.placeholder')}
+                onBlur={onBlur}
+                onChange={onChange}
+                onKeyDown={onEnter(onBlur)}
+              />
+            </div>
+            <div className={styles.actions}>
+              <button type="button" onClick={() => setIsCreateDialogOpen(true)} className={styles.addBtn}>
+                <AddSimple /> {t('multisig-address.add.label')}
+              </button>
+              <button type="button" onClick={exportConfig} className={styles.iconBtn}>
+                <Download />
+              </button>
+              <button type="button" onClick={onImportConfig} className={styles.iconBtn}>
+                <Upload />
+              </button>
+            </div>
+          </div>
+
+          <div className={styles.tableWrap}>
+            <Table
+              columns={[
+                {
+                  title: (
+                    <label htmlFor="all">
+                      <input type="checkbox" id="all" onChange={onChangeCheckedAll} checked={isAllSelected} />
+                      <span />
+                    </label>
+                  ),
+                  dataIndex: 'id',
+                  render(_, __, item) {
+                    return (
+                      <label htmlFor={`${item.id}`}>
+                        <input id={`${item.id}`} data-config-id={item.id} type="checkbox" onChange={onChangeChecked} />
+                        <span />
+                      </label>
+                    )
+                  },
+                },
+                {
+                  title: t('multisig-address.table.address'),
+                  dataIndex: 'address',
+                  align: 'left',
+                  render(_, __, item) {
+                    return (
+                      <div className={styles.address}>
+                        {item.fullPayload.slice(0, 5)}...{item.fullPayload.slice(-5)}
+                      </div>
+                    )
+                  },
+                },
+                {
+                  title: t('multisig-address.table.alias'),
+                  dataIndex: 'alias',
+                  align: 'left',
+                  render(_, __, item) {
+                    return (
+                      <Tooltip
+                        tip={
+                          <div className={styles.descTipRoot}>
+                            <div className={styles.autoHeight}>
+                              <textarea
+                                className={styles.descInput}
+                                value={item.alias || ''}
+                                onChange={updateConfig(item.id)}
+                                onKeyDown={updateConfig(item.id)}
+                              />
+                              <Edit />
+                            </div>
+                            <div className={styles.hidden}>
+                              {item.alias}
+                              <Edit />
+                            </div>
+                          </div>
+                        }
+                        showTriangle
+                        isTriggerNextToChild
+                        className={styles.description}
+                      >
+                        <div className={styles.descText}>
+                          {item.alias && item.alias.length > 6 ? `${item.alias.slice(0, 6)}...` : item.alias || '-'}
+                        </div>
+                      </Tooltip>
+                    )
+                  },
+                },
+                {
+                  title: t('multisig-address.table.type'),
+                  dataIndex: 'type',
+                  align: 'left',
+                  render(_, __, item) {
+                    return (
+                      <div>
+                        {item.m} of {item.n}
+                      </div>
+                    )
+                  },
+                },
+                {
+                  title: t('multisig-address.table.sync-block'),
+                  dataIndex: 'sync-block',
+                  align: 'left',
+                  hidden: !isLightClient,
+                  render(_, __, item) {
+                    return <div>{multisigSyncProgress?.[item.fullPayload] ?? 0}</div>
+                  },
+                },
+                {
+                  title: t('multisig-address.table.balance'),
+                  dataIndex: 'balance',
+                  align: 'left',
+                  isBalance: true,
+                  render(_, __, item, show) {
+                    return (
+                      <div>{show ? shannonToCKBFormatter(multisigBanlances[item.fullPayload]) : HIDE_BALANCE} CKB</div>
+                    )
+                  },
+                },
+                {
+                  title: t('multisig-address.table.action'),
+                  dataIndex: 'action',
+                  align: 'left',
+                  render(_, __, item) {
+                    return (
+                      <div className={styles.action}>
+                        <Tooltip
+                          tipClassName={styles.tip}
+                          tip={
+                            <div className={styles.actionOptions}>
+                              {(!multisigBanlances[item.fullPayload] || multisigBanlances[item.fullPayload] === '0'
+                                ? listNoBalanceActionOptions
+                                : listActionOptions
+                              ).map(({ key, label, icon, disabled }) => (
+                                <button
+                                  type="button"
+                                  key={key}
+                                  data-key={key}
+                                  onClick={onClickItem(item)}
+                                  disabled={disabled}
+                                >
+                                  {icon}
+                                  <span>{t(label)}</span>
+                                </button>
+                              ))}
+                            </div>
+                          }
+                          trigger="click"
+                          showTriangle
+                        >
+                          <div className={styles.hoverBtn}>{t('multisig-address.table.more')}</div>
+                        </Tooltip>
+                      </div>
+                    )
+                  },
+                },
+              ]}
+              dataSource={configs}
+              noDataContent={t('multisig-address.no-data')}
+            />
+          </div>
         </div>
-      </div>
-      {configs.length ? (
-        <table className={styles.multisigConfig}>
-          <thead>
-            <tr>
-              <th className={styles.checkBoxTh}>
-                <input type="checkbox" onChange={onChangeCheckedAll} checked={isAllSelected} />
-              </th>
-              {['address', 'alias', 'type', ...(isLightClient ? ['sync-block'] : []), 'balance'].map(field => (
-                <th key={field} data-field={field}>
-                  {t(`multisig-address.table.${field}`)}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {configs.map(v => (
-              <tr key={v.id}>
-                <td>
-                  <input
-                    data-config-id={v.id}
-                    type="checkbox"
-                    onChange={onChangeChecked}
-                    checked={selectIds.includes(v.id)}
-                  />
-                </td>
-                <td>
-                  <CopyZone
-                    content={v.fullPayload}
-                    className={styles.fullPayload}
-                    name={t('multisig-address.table.copy-address')}
-                  >
-                    <span className={styles.overflow}>{v.fullPayload.slice(0, -7)}</span>
-                    <span>...</span>
-                    <span>{v.fullPayload.slice(-6)}</span>
-                  </CopyZone>
-                </td>
-                <td>
-                  <EditTextField field="alias" value={v.alias || ''} onChange={updateConfig(v.id)} />
-                </td>
-                <td>
-                  {v.m}
-                  &nbsp;of&nbsp;
-                  {v.n}
-                </td>
-                {isLightClient ? <td>{multisigSyncProgress?.[v.fullPayload] ?? 0}</td> : null}
-                <td>
-                  {shannonToCKBFormatter(multisigBanlances[v.fullPayload])}
-                  &nbsp;CKB
-                </td>
-                <td>
-                  <CustomizableDropdown
-                    options={
-                      !multisigBanlances[v.fullPayload] || multisigBanlances[v.fullPayload] === '0'
-                        ? listNoBalanceActionOptions
-                        : listActionOptions
-                    }
-                    onClickItem={onClickItem(v)}
-                  >
-                    <More className={styles.more} />
-                  </CustomizableDropdown>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ) : (
-        <div className={styles.noData}>{t('multisig-address.no-data')}</div>
-      )}
-      <dialog ref={dialogRef} className={styles.dialog}>
-        {isDialogOpen && <MultisigAddressCreateDialog closeDialog={closeDialog} confirm={saveConfig} />}
-      </dialog>
-      <dialog ref={infoAction.dialogRef} className={styles.dialog}>
-        {infoAction.multisigConfig && (
+      </Dialog>
+
+      {isCreateDialogOpen ? (
+        <MultisigAddressCreateDialog closeDialog={() => setIsCreateDialogOpen(false)} confirm={saveConfig} />
+      ) : null}
+
+      {infoAction.multisigConfig ? (
+        <Dialog
+          title={t('multisig-address.multi-details')}
+          show={infoAction.isDialogOpen}
+          onConfirm={infoAction.closeDialog}
+          onCancel={infoAction.closeDialog}
+          showCancel={false}
+          confirmText={t('multisig-address.ok')}
+        >
           <MultisigAddressInfo
             m={infoAction.multisigConfig.m.toString()}
             n={infoAction.multisigConfig.n.toString()}
@@ -208,38 +333,45 @@ const MultisigAddress = () => {
             addresses={infoAction.multisigConfig.addresses || []}
             multisigAddress={infoAction.multisigConfig.fullPayload}
           />
-        )}
-        <div className={styles.ok}>
-          <Button label={t('multisig-address.ok')} type="ok" onClick={infoAction.closeDialog} />
-        </div>
-      </dialog>
-      <dialog ref={deleteAction.dialogRef} className={styles.dialog}>
-        <MessageBar messageBarType={MessageBarType.error} styles={messageBarStyle}>
-          {t('multisig-address.delete-failed', { reason: deleteAction.deleteErrorMessage })}
-        </MessageBar>
-        <div className={styles.ok}>
-          <Button label={t('multisig-address.ok')} type="cancel" onClick={deleteAction.closeDialog} />
-        </div>
-      </dialog>
-      <dialog ref={sendAction.dialogRef} className={styles.dialog}>
-        {sendAction.isDialogOpen && sendAction.sendFromMultisig && (
-          <SendFromMultisigDialog
-            closeDialog={sendAction.closeDialog}
-            multisigConfig={sendAction.sendFromMultisig}
-            balance={sendTotalBalance}
-          />
-        )}
-      </dialog>
-      <dialog ref={approveAction.dialogRef} className={styles.approveDialog}>
-        {approveAction.isDialogOpen && approveAction.multisigConfig && approveAction.offlineSignJson && (
-          <ApproveMultisigTx
-            closeDialog={approveAction.closeDialog}
-            multisigConfig={approveAction.multisigConfig}
-            offlineSignJson={approveAction.offlineSignJson}
-            isMainnet={isMainnet}
-          />
-        )}
-      </dialog>
+        </Dialog>
+      ) : null}
+
+      <AlertDialog
+        show={deleteAction.isDialogOpen}
+        title={t('multisig-address.delete-failed')}
+        message={deleteAction.deleteErrorMessage}
+        type="failed"
+        onCancel={deleteAction.closeDialog}
+      />
+
+      <AlertDialog
+        show={showDeleteDialog}
+        title={t('send.remove-receiving-address')}
+        message={t('send.remove-receiving-address-msg')}
+        type="warning"
+        onCancel={() => setShowDeleteDialog(false)}
+        onOk={() => {
+          deleteAction.action()
+          setShowDeleteDialog(false)
+        }}
+      />
+
+      {sendAction.sendFromMultisig && sendAction.isDialogOpen ? (
+        <SendFromMultisigDialog
+          closeDialog={sendAction.closeDialog}
+          multisigConfig={sendAction.sendFromMultisig}
+          balance={sendTotalBalance}
+        />
+      ) : null}
+
+      {approveAction.isDialogOpen && approveAction.multisigConfig && approveAction.offlineSignJson ? (
+        <ApproveMultisigTxDialog
+          closeDialog={approveAction.closeDialog}
+          multisigConfig={approveAction.multisigConfig}
+          offlineSignJson={approveAction.offlineSignJson}
+          isMainnet={isMainnet}
+        />
+      ) : null}
       <PasswordRequest />
     </div>
   )
diff --git a/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss b/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss
index f3a0a2baa9..02dd6dc9ea 100644
--- a/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss
+++ b/packages/neuron-ui/src/components/MultisigAddress/multisigAddress.module.scss
@@ -1,115 +1,197 @@
 @import '../../styles/mixin.scss';
 
-.head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .searchBox {
-      width: 60%;
-  }
+.container {
+  .head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 24px;
+
+    .searchBox {
+      height: 40px;
+      background: var(--secondary-background-color);
+      border: 1px solid var(--divide-line-color);
+      border-radius: 40px;
+      display: flex;
+      column-gap: 10px;
+      align-items: center;
+      padding: 0 16px;
+      flex: 1;
+
+      input {
+        display: block;
+        border: none;
+        background: transparent;
+        width: 100%;
+        color: var(--input-second-color);
+      }
+    }
 
-  .actions {
-      & > button {
-          margin-left: 4px;
+    .actions {
+      display: flex;
+      column-gap: 16px;
+      button {
+        height: 40px;
+        border: none;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+      .addBtn {
+        width: 112px;
+        color: var(--primary-text-color);
+        background: var(--primary-color);
+        font-size: 500;
+        svg {
+          margin-right: 4px;
+          g,
+          path {
+            fill: var(--primary-text-color);
+          }
+        }
+      }
+      .iconBtn {
+        width: 40px;
+        background: var(--input-disabled-color);
+        border: 1px solid var(--divide-line-color);
+        border-radius: 8px;
+        svg {
+          g,
+          path {
+            fill: var(--secondary-text-color);
+          }
+        }
+        &:hover {
+          background: var(--fourth-background-color);
+          border-color: var(--fourth-background-color);
+          svg {
+            g,
+            path {
+              fill: var(--primary-color);
+            }
+          }
+        }
       }
+    }
   }
-}
 
-@mixin copyzone-fullpayload {
-  min-width: 100px;
-  max-width: calc(100% - 20px);
-  display: flex;
-  height: 1.625rem;
+  .tableWrap {
+    margin-top: 16px;
+    min-height: 360px;
+    min-width: 648px;
+    border: 1px solid var(--table-head-border-color);
+    border-radius: 16px;
+    border-top: none;
+    color: var(--main-text-color);
 
-  .overflow {
-    word-break: break-all;
-    text-align: right;
-    line-height: 1.625rem;
-    overflow: hidden;
+    @include checkbox;
   }
 
-  & > span {
-    line-height: 1.625rem;
+  .address {
+    font-family: 'JetBrains Mono';
   }
-}
-
-.dialog {
-  @include dialog-container;
-  padding: 30px 50px;
-}
-
-.approveDialog {
-  @include dialog-container;
-  padding: 30px 50px;
-  max-width: 800px;
-}
-
-.multisigConfig {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 16px;
 
-  thead {
-    th {
-      padding: 8px;
-      min-width: 40px;
-      text-align: left;
-
-      &[data-field="sync-block"] {
-        min-width: 70px;
+  .descTipRoot {
+    position: relative;
+    width: 200px;
+    .autoHeight {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+
+      & > svg {
+        position: absolute;
+        right: 0;
+        bottom: 8px;
       }
     }
-
-    .checkBoxTh {
-      text-align: left;
+    .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;
+      }
     }
-  }
-
-  tr {
-    border-bottom: 1px solid #b3b3b3;
-  }
-
-  tbody {
-    td {
-      padding: 8px;
-      min-width: 40px;
-      text-align: left;
-      font-size: 14px;
+    & > .hidden {
+      word-break: break-word;
+      white-space: break-spaces;
+      visibility: hidden;
+      min-width: 100px;
+      min-height: 24px;
+      padding: 2px;
+      line-height: 24px;
     }
   }
 
-  .fullPayload {
-    @include copyzone-fullpayload;
-  }
-  
-  .more {
-    transform: rotate(90deg);
-
+  .hoverBtn {
+    cursor: pointer;
+    padding-right: 30px;
     &:hover {
-      path {
-        fill: var(--nervos-green);
-        stroke: var(--nervos-green);
+      color: var(--primary-color);
+    }
+  }
+  .action {
+    padding-right: 20px;
+    .tip {
+      left: 10px !important;
+    }
+    .actionOptions {
+      padding-top: 5px;
+      button {
+        background: none;
+        font-size: 14px;
+        padding: 0 16px;
+        height: 40px;
+        width: 100%;
+        color: var(--main-text-color);
+        border: none;
+        text-align: left;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        &[disabled] {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        svg {
+          width: 16px;
+          height: 16px;
+          margin-right: 16px;
+          g,
+          path {
+            fill: var(--main-text-color);
+          }
+        }
+        &:hover {
+          border-radius: 8px;
+          background-color: var(--tooltip-hover-background-color);
+        }
       }
     }
   }
 }
 
-.ok {
-  margin: 12px 0;
-  text-align: center;
+.dialog {
+  @include dialog-container;
+  padding: 30px 50px;
 }
 
-.importActions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 12px;
-
-  & > button {
-    margin-left: 12px;
-  }
+.approveDialog {
+  @include dialog-container;
+  padding: 30px 50px;
+  max-width: 800px;
 }
 
-.noData {
-  margin-top: 16px;
+.ok {
+  margin: 12px 0;
+  text-align: center;
 }
diff --git a/packages/neuron-ui/src/components/MultisigAddressCreateDialog/hooks.ts b/packages/neuron-ui/src/components/MultisigAddressCreateDialog/hooks.ts
index 243d3c17d6..7bc6a1e5af 100644
--- a/packages/neuron-ui/src/components/MultisigAddressCreateDialog/hooks.ts
+++ b/packages/neuron-ui/src/components/MultisigAddressCreateDialog/hooks.ts
@@ -3,29 +3,32 @@ import { validateAddress, isSecp256k1Address, getMultisigAddress } from 'utils'
 import { useTranslation } from 'react-i18next'
 import { addressToScript } from '@nervosnetwork/ckb-sdk-utils'
 import { ErrorWithI18n, isErrorWithI18n } from 'exceptions'
+import { MAX_M_N_NUMBER } from 'utils/const'
 
-export enum Step {
-  setMN = 0,
-  setMultiAddress,
-  viewMultiAddress,
+const handleEvent = (e: React.SyntheticEvent<HTMLInputElement>, cb: (val: string) => void) => {
+  const { value } = e.currentTarget
+  let val = Number(value)
+  if (val > MAX_M_N_NUMBER) {
+    val = MAX_M_N_NUMBER
+  }
+  if (!Number.isNaN(val)) {
+    cb(val ? `${val}` : '')
+  }
 }
 
 export const useMAndN = () => {
   const [m, setM] = useState('')
   const [n, setN] = useState('')
-  const setMBySelect = useCallback(
-    (value: string) => {
-      if (!Number.isNaN(Number(value))) {
-        setM(value)
-      }
+
+  const setMByInput = useCallback(
+    (e: React.SyntheticEvent<HTMLInputElement>) => {
+      handleEvent(e, setM)
     },
     [setM]
   )
-  const setNBySelect = useCallback(
-    (value: string) => {
-      if (!Number.isNaN(Number(value))) {
-        setN(value)
-      }
+  const setNByInput = useCallback(
+    (e: React.SyntheticEvent<HTMLInputElement>) => {
+      handleEvent(e, setN)
     },
     [setN]
   )
@@ -38,7 +41,7 @@ export const useMAndN = () => {
     if (numM > numN) {
       return 'm-less-equal-n'
     }
-    if (numM < 1 || numM > 255 || numN < 1 || numN > 255) {
+    if (numM < 1 || numM > MAX_M_N_NUMBER || numN < 1 || numN > MAX_M_N_NUMBER) {
       return 'm-n-between-0-255'
     }
     return undefined
@@ -46,8 +49,8 @@ export const useMAndN = () => {
   return {
     m,
     n,
-    setMBySelect,
-    setNBySelect,
+    setMByInput,
+    setNByInput,
     errorI18nKey,
   }
 }
@@ -113,14 +116,14 @@ export const useMultiAddress = ({ n, isMainnet }: { n: number; isMainnet: boolea
 }
 
 export const useViewMultisigAddress = ({
-  step,
+  isView,
   m,
   n,
   r,
   addresses,
   isMainnet,
 }: {
-  step: Step
+  isView: boolean
   m: number
   n: number
   r: number
@@ -129,7 +132,7 @@ export const useViewMultisigAddress = ({
 }) => {
   const [multisigAddress, changeMultisigAddress] = useState('')
   useEffect(() => {
-    if (step === Step.viewMultiAddress) {
+    if (isView) {
       try {
         const address = getMultisigAddress(
           addresses.map(v => addressToScript(v).args),
@@ -143,6 +146,6 @@ export const useViewMultisigAddress = ({
         // ignore error. The ui ensures the correctness of the parameters
       }
     }
-  }, [step, changeMultisigAddress, m, n, r, addresses, isMainnet])
+  }, [isView, changeMultisigAddress, m, n, r, addresses, isMainnet])
   return multisigAddress
 }
diff --git a/packages/neuron-ui/src/components/MultisigAddressCreateDialog/index.tsx b/packages/neuron-ui/src/components/MultisigAddressCreateDialog/index.tsx
index a5ba185406..b6ad621098 100644
--- a/packages/neuron-ui/src/components/MultisigAddressCreateDialog/index.tsx
+++ b/packages/neuron-ui/src/components/MultisigAddressCreateDialog/index.tsx
@@ -1,17 +1,13 @@
 import React, { useState, useCallback } from 'react'
-
 import { useTranslation } from 'react-i18next'
-import Button from 'widgets/Button'
-import InputSelect from 'widgets/InputSelect'
 import { useState as useGlobalState } from 'states'
 import { MultisigConfig } from 'services/remote'
 import MultisigAddressInfo, { MultisigAddressTable } from 'components/MultisigAddressInfo'
 import { isMainnet as isMainnetUtil } from 'utils'
-
-import { useMAndN, useMultiAddress, Step, useViewMultisigAddress } from './hooks'
-import styles from './multisig-address-create-dialog.module.scss'
-
-const keysCountArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(number => ({ value: number.toString(), label: number }))
+import Dialog from 'widgets/Dialog'
+import TextField from 'widgets/TextField'
+import { useMAndN, useMultiAddress, useViewMultisigAddress } from './hooks'
+import styles from './multisigAddressCreateDialog.module.scss'
 
 const SetMN = ({
   m,
@@ -22,21 +18,31 @@ const SetMN = ({
 }: {
   m: string
   n: string
-  changeM: (v: string) => void
-  changeN: (v: string) => void
+  changeM: (e: React.SyntheticEvent<HTMLInputElement>) => void
+  changeN: (e: React.SyntheticEvent<HTMLInputElement>) => void
   errorI18nKey?: string
 }) => {
   const [t] = useTranslation()
+
   return (
     <div className={styles.setMNRoot}>
-      <span>{t('multisig-address.create-dialog.m-n.title')}</span>
-      <br />
+      <p className={styles.title}>{t('multisig-address.create-dialog.m-n.title')}</p>
       <div className={styles.countSelect}>
-        <InputSelect options={keysCountArr} value={m} onChange={changeM} />
-        &nbsp;&nbsp;&nbsp;&nbsp;of&nbsp;&nbsp;&nbsp;&nbsp;
-        <InputSelect options={keysCountArr} value={n} onChange={changeN} />
+        <TextField
+          value={m}
+          placeholder={t('multisig-address.create-dialog.placeholder', { type: 'm' })}
+          onChange={changeM}
+          width="100%"
+        />
+        <p>of</p>
+        <TextField
+          value={n}
+          placeholder={t('multisig-address.create-dialog.placeholder', { type: 'n' })}
+          onChange={changeN}
+          width="100%"
+        />
       </div>
-      {errorI18nKey && <span className={styles.error}>{t(`multisig-address.create-dialog.m-n.${errorI18nKey}`)}</span>}
+      {errorI18nKey && <p className={styles.error}>{t(`multisig-address.create-dialog.m-n.${errorI18nKey}`)}</p>}
     </div>
   )
 }
@@ -48,18 +54,10 @@ const MultisigAddressCreateDialog = ({
   closeDialog: () => void
   confirm: (v: Omit<MultisigConfig, 'id' | 'walletId' | 'fullPayload' | 'blake160s'>) => Promise<void>
 }) => {
-  const [step, changeStep] = useState(Step.setMN)
+  const [isView, setIsPreview] = useState(false)
   const [t] = useTranslation()
-  const { m, n, setMBySelect, setNBySelect, errorI18nKey: mnErr } = useMAndN()
+  const { m, n, setMByInput, setNByInput, errorI18nKey: mnErr } = useMAndN()
   const [confirmErr, setConfirmErr] = useState<string | null>(null)
-  const next = useCallback(() => {
-    changeStep(step + 1)
-    setConfirmErr(null)
-  }, [changeStep, step])
-  const back = useCallback(() => {
-    changeStep(step - 1)
-    setConfirmErr(null)
-  }, [changeStep, step])
   const {
     chain: { networkID },
     settings: { networks = [] },
@@ -82,7 +80,7 @@ const MultisigAddressCreateDialog = ({
     n: Number(n),
     r,
     addresses,
-    step,
+    isView,
     isMainnet,
   })
 
@@ -101,43 +99,55 @@ const MultisigAddressCreateDialog = ({
       })
   }, [m, n, r, addresses, saveConfig, closeDialog])
 
+  const handleCancel = useCallback(() => {
+    if (isView) {
+      setIsPreview(false)
+    } else {
+      closeDialog()
+    }
+  }, [closeDialog, isView, setIsPreview])
+
+  const handleConfirm = useCallback(() => {
+    if (isView) {
+      confirm()
+    } else {
+      setIsPreview(true)
+    }
+  }, [confirm, isView, setIsPreview])
+
   return (
-    <>
-      <p>{t('multisig-address.create-dialog.title')}</p>
-      {step === Step.setMN && <SetMN m={m} n={n} changeM={setMBySelect} changeN={setNBySelect} errorI18nKey={mnErr} />}
-      {step === Step.setMultiAddress && (
-        <>
-          <p>{t('multisig-address.create-dialog.multi-address-info.title', { m, n })}</p>
-          <MultisigAddressTable
-            r={r}
-            addresses={addresses}
-            changeR={changeR}
-            changeAddress={changeAddress}
-            addressErrors={addressErrors}
-          />
-          {isAddressesDuplicated && (
-            <div className={styles.errorMessage}>{t('multisig-address.create-dialog.duplicate-address-forbid')}</div>
-          )}
-        </>
-      )}
-      {step === Step.viewMultiAddress && (
-        <MultisigAddressInfo m={m} n={n} r={r} addresses={addresses} multisigAddress={multisigAddress} />
-      )}
-      {confirmErr && <div className={styles.errorMessage}>{confirmErr}</div>}
-      <div className={styles.actions}>
-        <Button
-          label={t(`multisig-address.create-dialog.actions.${step === Step.setMN ? 'cancel' : 'back'}`)}
-          type="cancel"
-          onClick={step === Step.setMN ? closeDialog : back}
-        />
-        <Button
-          label={t(`multisig-address.create-dialog.actions.${step === Step.viewMultiAddress ? 'confirm' : 'next'}`)}
-          type="primary"
-          disabled={(step === Step.setMN && !!mnErr) || (step === Step.setMultiAddress && addressErr)}
-          onClick={step === Step.viewMultiAddress ? confirm : next}
-        />
+    <Dialog
+      show
+      title={t(`multisig-address.create-dialog.${isView ? 'preview-title' : 'title'}`)}
+      onCancel={handleCancel}
+      cancelText={t('multisig-address.create-dialog.actions.back')}
+      onConfirm={handleConfirm}
+      confirmText={t(`multisig-address.create-dialog.actions.${isView ? 'confirm' : 'generate-address'}`)}
+      disabled={!isView && (!!mnErr || addressErr)}
+    >
+      <div>
+        {isView ? (
+          <MultisigAddressInfo m={m} n={n} r={r} addresses={addresses} multisigAddress={multisigAddress} />
+        ) : (
+          <div>
+            <SetMN m={m} n={n} changeM={setMByInput} changeN={setNByInput} errorI18nKey={mnErr} />
+            <p className={styles.title}>{t('multisig-address.create-dialog.multi-address-info.title', { m, n })}</p>
+            <MultisigAddressTable
+              r={r}
+              addresses={mnErr ? ['', ''] : addresses}
+              changeR={changeR}
+              changeAddress={changeAddress}
+              addressErrors={addressErrors}
+              disabled={!!mnErr}
+            />
+            {isAddressesDuplicated && (
+              <div className={styles.errorMessage}>{t('multisig-address.create-dialog.duplicate-address-forbid')}</div>
+            )}
+          </div>
+        )}
+        {confirmErr && <div className={styles.errorMessage}>{confirmErr}</div>}
       </div>
-    </>
+    </Dialog>
   )
 }
 
diff --git a/packages/neuron-ui/src/components/MultisigAddressCreateDialog/multisig-address-create-dialog.module.scss b/packages/neuron-ui/src/components/MultisigAddressCreateDialog/multisig-address-create-dialog.module.scss
deleted file mode 100644
index 30529f4c6a..0000000000
--- a/packages/neuron-ui/src/components/MultisigAddressCreateDialog/multisig-address-create-dialog.module.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 12px;
-
-  & > button {
-    margin-left: 12px;
-  }
-}
-
-.setMNRoot {
-  height: 340px;
-}
-
-.countSelect {
-  display: flex;
-  align-items: center;
-  padding: 40px 0;
-  justify-content: center;
-
-  & > div {
-    width: 160px;
-  }
-}
-
-.error {
-  color: #d50000;
-}
-
-.errorMessage {
-  color: #d50000;
-  margin-top: 8px;
-}
\ No newline at end of file
diff --git a/packages/neuron-ui/src/components/MultisigAddressCreateDialog/multisigAddressCreateDialog.module.scss b/packages/neuron-ui/src/components/MultisigAddressCreateDialog/multisigAddressCreateDialog.module.scss
new file mode 100644
index 0000000000..c1eebb869c
--- /dev/null
+++ b/packages/neuron-ui/src/components/MultisigAddressCreateDialog/multisigAddressCreateDialog.module.scss
@@ -0,0 +1,50 @@
+.title {
+  color: var(--secondary-text-color);
+  margin: 20px 0 8px;
+  max-width: 646px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+
+  & > button {
+    margin-left: 12px;
+  }
+}
+
+.setMNRoot {
+  .title {
+    color: var(--secondary-text-color);
+    margin: 0 0 8px;
+  }
+
+  .countSelect {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 16px;
+
+    p {
+      color: var(--main-text-color);
+    }
+    div {
+      flex: 1;
+      height: 56px;
+    }
+  }
+}
+
+.error {
+  color: var(--error-color);
+}
+
+.errorMessage {
+  color: var(--error-color);
+  margin-top: 8px;
+}
+
+.content {
+  margin-top: 20px;
+}
diff --git a/packages/neuron-ui/src/components/MultisigAddressInfo/index.tsx b/packages/neuron-ui/src/components/MultisigAddressInfo/index.tsx
index 68b061a6b6..4d0cc51bcf 100644
--- a/packages/neuron-ui/src/components/MultisigAddressInfo/index.tsx
+++ b/packages/neuron-ui/src/components/MultisigAddressInfo/index.tsx
@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { ErrorWithI18n } from 'exceptions'
 import TextField from 'widgets/TextField'
 import CopyZone from 'widgets/CopyZone'
-import { ErrorWithI18n } from 'exceptions'
-
+import { Copy } from 'widgets/Icons/icon'
+import Table from 'widgets/Table'
+import Tooltip from 'widgets/Tooltip'
 import styles from './multisig-address-info.module.scss'
 
 export const MultisigAddressTable = ({
@@ -22,57 +24,62 @@ export const MultisigAddressTable = ({
   addressErrors?: (ErrorWithI18n | undefined)[]
 }) => {
   const [t] = useTranslation()
+  const dataSource = useMemo(() => addresses.map((value, idx) => ({ value, idx, index: idx + 1 })), [addresses])
   return (
-    <table className={styles.multiAddressTable}>
-      <thead>
-        <tr>
-          {['index', 'required', 'signer-address'].map(field => (
-            <th key={field}>{t(`multisig-address.create-dialog.${field}`)}</th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {addresses.map((v, idx) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <tr key={idx.toString()}>
-            <td>{`#${idx + 1}`}</td>
-            <td>
-              <input
-                type="checkbox"
-                data-idx={idx}
-                onChange={changeR}
-                checked={idx < r}
-                disabled={idx > r || disabled}
-              />
-            </td>
-            <td className={styles.address}>
-              {disabled ? (
-                <CopyZone
-                  content={v}
-                  className={styles.copyzone}
-                  name={t('multisig-address.create-dialog.copy-address')}
-                >
-                  <span className={styles.overflow}>{v.slice(0, -6)}</span>
-                  <span>...</span>
-                  <span>{v.slice(-6)}</span>
-                </CopyZone>
-              ) : (
+    <div className={styles.tableWrap}>
+      <Table
+        columns={[
+          {
+            title: t('multisig-address.create-dialog.index'),
+            dataIndex: 'index',
+          },
+          {
+            title: t('multisig-address.create-dialog.required'),
+            dataIndex: 'idx',
+            render(_, __, item) {
+              return (
+                <label htmlFor={`${item.idx}`}>
+                  <input
+                    id={`${item.idx}`}
+                    data-idx={item.idx}
+                    type="checkbox"
+                    onChange={changeR}
+                    checked={item.idx < r}
+                    disabled={item.idx > r || disabled}
+                  />
+                  <span />
+                </label>
+              )
+            },
+          },
+          {
+            title: t('multisig-address.table.address'),
+            dataIndex: 'value',
+            align: 'left',
+            render(_, __, item) {
+              return (
                 <TextField
-                  field={`${idx}_address`}
-                  data-idx={idx}
-                  value={v}
+                  field={`${item.idx}_address`}
+                  rows={item.value ? 2 : 1}
+                  data-idx={item.idx}
+                  value={item.value}
                   className={styles.addressField}
                   onChange={changeAddress}
                   disabled={disabled}
                   placeholder={t('multisig-address.create-dialog.multi-address-info.ckb-address-placeholder')}
-                  error={addressErrors?.[idx] ? t(addressErrors[idx]!.message, addressErrors[idx]!.i18n) : undefined}
+                  error={
+                    addressErrors?.[item.idx]
+                      ? t(addressErrors[item.idx]!.message, addressErrors[item.idx]!.i18n)
+                      : undefined
+                  }
                 />
-              )}
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
+              )
+            },
+          },
+        ]}
+        dataSource={dataSource}
+      />
+    </div>
   )
 }
 
@@ -91,20 +98,27 @@ const MultiSignAddressInfo = ({
 }) => {
   const [t] = useTranslation()
   return (
-    <>
-      <p>{t('multisig-address.create-dialog.multi-address-info.view-title', { m, n })}</p>
-      <CopyZone
-        content={multisigAddress}
-        className={styles.copyzone}
-        name={t('multisig-address.create-dialog.copy-address')}
+    <div className={styles.container}>
+      <p className={styles.title}>{t('multisig-address.create-dialog.multi-address-info.view-title', { m, n })}</p>
+      <Tooltip
+        tip={
+          <CopyZone content={multisigAddress} className={styles.copyTableAddress}>
+            {multisigAddress}
+            <Copy />
+          </CopyZone>
+        }
+        showTriangle
+        isTriggerNextToChild
       >
-        <span className={styles.overflow}>{multisigAddress.slice(0, -6)}</span>
-        <span>...</span>
-        <span>{multisigAddress.slice(-6)}</span>
-      </CopyZone>
-      <p>{t('multisig-address.create-dialog.multi-list', { m, n })}</p>
+        <div className={styles.addressWrap}>
+          <span className={styles.overflow}>
+            {multisigAddress.slice(0, 34)}...{multisigAddress.slice(-34)}
+          </span>
+        </div>
+      </Tooltip>
+      <p className={styles.title}>{t('multisig-address.create-dialog.multi-list', { m, n })}</p>
       <MultisigAddressTable r={r} addresses={addresses} disabled />
-    </>
+    </div>
   )
 }
 
diff --git a/packages/neuron-ui/src/components/MultisigAddressInfo/multisig-address-info.module.scss b/packages/neuron-ui/src/components/MultisigAddressInfo/multisig-address-info.module.scss
index 88c40af718..66e7241cfe 100644
--- a/packages/neuron-ui/src/components/MultisigAddressInfo/multisig-address-info.module.scss
+++ b/packages/neuron-ui/src/components/MultisigAddressInfo/multisig-address-info.module.scss
@@ -1,27 +1,76 @@
+@import '../../styles/mixin.scss';
 
-.multiAddressTable {
-  width: 100%;
-  border-collapse: collapse;
+.container {
+  width: 646px;
+  .title {
+    color: var(--secondary-text-color);
+    margin: 0;
+  }
 
-  tr {
-    border-bottom: 1px solid #b3b3b3;
+  .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;
+    }
   }
 
-  tbody {
-    td {
-      padding: 8px;
-      min-width: 40px;
-      text-align: left;
+  .addressWrap {
+    height: 56px;
+    margin: 8px 0 20px;
+    line-height: 56px;
+    border: 1px solid var(--divide-line-color);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--main-text-color);
+
+    span {
+      line-height: 56px;
+      font-family: 'JetBrains Mono';
+    }
+
+    .overflow {
+      word-break: break-all;
+      line-height: 56px;
+      overflow: hidden;
+    }
+
+    &:hover {
+      color: var(--activity-color);
     }
   }
+}
+
+.tableWrap {
+  margin-top: 16px;
+  border: 1px solid var(--table-head-border-color);
+  border-radius: 16px;
+  border-top: none;
+  color: var(--main-text-color);
+  @include checkbox;
 
-  .address {
-    width: 400px;
-    
-    .addressField {
-      display: block;
+  tr {
+    &:last-child {
+      td {
+        border: none;
+      }
     }
   }
+
+  .addressField {
+    margin-bottom: 0;
+    margin-right: 20px;
+    padding: 10px 0;
+    min-width: 476px;
+  }
 }
 
 .copyzone {
diff --git a/packages/neuron-ui/src/components/PasswordRequest/index.tsx b/packages/neuron-ui/src/components/PasswordRequest/index.tsx
index f2d6445d5b..a1debde2e9 100644
--- a/packages/neuron-ui/src/components/PasswordRequest/index.tsx
+++ b/packages/neuron-ui/src/components/PasswordRequest/index.tsx
@@ -366,6 +366,7 @@ const PasswordRequest = () => {
       />
     )
   }
+
   return (
     <Dialog
       show={!!actionType}
@@ -377,6 +378,7 @@ const PasswordRequest = () => {
       isLoading={isLoading}
       cancelText={t('common.cancel')}
       confirmText={t('common.confirm')}
+      showConfirm={actionType !== 'send-from-multisig'}
     >
       <div>
         {[
diff --git a/packages/neuron-ui/src/components/ScriptTag/index.tsx b/packages/neuron-ui/src/components/ScriptTag/index.tsx
index a84d8f9eec..4af75cf46b 100644
--- a/packages/neuron-ui/src/components/ScriptTag/index.tsx
+++ b/packages/neuron-ui/src/components/ScriptTag/index.tsx
@@ -7,6 +7,7 @@ import {
   AnyoneCanPayLockInfoOnLina,
   ChequeLockInfoOnAggron,
   ChequeLockInfoOnLina,
+  clsx,
 } from 'utils'
 import styles from './scriptTag.module.scss'
 
@@ -14,10 +15,12 @@ const ScriptTag = ({
   script,
   isMainnet,
   onClick,
+  className = '',
 }: {
   script: CKBComponents.Script | null
   isMainnet: boolean
   onClick?: () => void
+  className?: string
 }) => {
   if (!script) {
     return null
@@ -41,7 +44,7 @@ const ScriptTag = ({
   }
 
   return (
-    <button type="button" className={styles.tag} onClick={onClick}>
+    <button type="button" className={clsx(styles.tag, className)} onClick={onClick}>
       {foundLock.TagName}
     </button>
   )
diff --git a/packages/neuron-ui/src/components/SendFieldset/index.tsx b/packages/neuron-ui/src/components/SendFieldset/index.tsx
index 3ea71a7118..ba6ffa78c4 100644
--- a/packages/neuron-ui/src/components/SendFieldset/index.tsx
+++ b/packages/neuron-ui/src/components/SendFieldset/index.tsx
@@ -8,7 +8,7 @@ import { ReactComponent as Attention } from 'widgets/Icons/ExperimentalAttention
 import TimeClock from 'widgets/Icons/TimeClock.svg'
 
 import { formatDate } from 'widgets/DatetimePickerDialog'
-import { localNumberFormatter, PlaceHolders, isSecp256k1Address } from 'utils'
+import { localNumberFormatter, PlaceHolders, isSecp256k1Address, clsx } from 'utils'
 import { ErrorWithI18n } from 'exceptions'
 
 import styles from './sendFieldset.module.scss'
@@ -26,6 +26,7 @@ interface SendSubformProps {
   onLocktimeClick?: React.EventHandler<React.SyntheticEvent<HTMLButtonElement>>
   onSendMaxClick?: React.EventHandler<React.SyntheticEvent<HTMLButtonElement>>
   onItemChange: React.EventHandler<React.SyntheticEvent<HTMLInputElement>>
+  className?: string
   isMainnet: boolean
 }
 
@@ -42,6 +43,7 @@ const SendFieldset = ({
   onSendMaxClick,
   onItemChange,
   isTimeLockable = true,
+  className = '',
   isMainnet,
 }: SendSubformProps) => {
   const [t] = useTranslation()
@@ -64,7 +66,7 @@ const SendFieldset = ({
   }
 
   return (
-    <div className={styles.container}>
+    <div className={clsx(styles.container, className)}>
       <TextField
         className={`${styles.addresstField} ${styles.textFieldClass}`}
         rows={2}
@@ -134,7 +136,9 @@ const SendFieldset = ({
               </div>
               <div className={styles.locktimeWarn}>
                 <Attention />
-                {t('send.locktime-warning', { extraNote: isMainnet ? null : t('messages.light-client-locktime-warning') })}
+                {t('send.locktime-warning', {
+                  extraNote: isMainnet ? null : t('messages.light-client-locktime-warning'),
+                })}
               </div>
             </div>
           ) : (
diff --git a/packages/neuron-ui/src/components/SendFromMultisigDialog/index.tsx b/packages/neuron-ui/src/components/SendFromMultisigDialog/index.tsx
index a20eace8b0..4f96b56649 100644
--- a/packages/neuron-ui/src/components/SendFromMultisigDialog/index.tsx
+++ b/packages/neuron-ui/src/components/SendFromMultisigDialog/index.tsx
@@ -1,13 +1,16 @@
 import React, { useMemo } from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 import { MultisigConfig } from 'services/remote'
-import Button from 'widgets/Button'
+import Tooltip from 'widgets/Tooltip'
+import { Copy } from 'widgets/Icons/icon'
 import CopyZone from 'widgets/CopyZone'
 import TextField from 'widgets/TextField'
 import SendFieldset from 'components/SendFieldset'
 import { calculateFee, isMainnet as isMainnetUtil, shannonToCKBFormatter, validateTotalAmount } from 'utils'
 import { useState as useGlobalState } from 'states'
-import CopyZoneAddress from 'widgets/CopyZoneAddress'
+import { ReactComponent as Add } from 'widgets/Icons/Add.svg'
+import Button from 'widgets/Button'
+import Dialog from 'widgets/Dialog'
 
 import { AmountNotEnoughException } from 'exceptions'
 import { useSendInfo, useOnSubmit, useExport, useCanSign } from './hooks'
@@ -42,6 +45,8 @@ const SendFromMultisigDialog = ({
     onSendMaxClick,
     isSendMax,
     isMaxBtnDisabled,
+    addSendInfo,
+    isAddOneBtnDisabled,
   } = useSendInfo({ isMainnet, balance, multisigConfig, t })
   const fee = useMemo(() => calculateFee(generatedTx), [generatedTx])
   const totalAmountErrorMessage = useMemo(() => {
@@ -67,77 +72,101 @@ const SendFromMultisigDialog = ({
   const onExport = useExport({ generatedTx, closeDialog })
   const canSign = useCanSign({ addresses: wallet.addresses, multisigConfig })
   return (
-    <>
-      <div className={styles.sendCKBTitle}>
-        <Trans
-          i18nKey="multisig-address.send-ckb.title"
-          values={multisigConfig}
-          components={[<CopyZoneAddress fullPayload={multisigConfig.fullPayload} />]}
-        />
-      </div>
-      <div className={styles.sendContainer}>
-        <div className={styles.balance}>
-          <span>{`${t('overview.balance')}:`}</span>
-          <CopyZone content={shannonToCKBFormatter(balance, false, '')} name={t('overview.copy-balance')}>
-            <span className={styles.balanceValue}>{shannonToCKBFormatter(balance)}</span>
-          </CopyZone>
+    <Dialog
+      show
+      title={t('multisig-address.send-ckb.title')}
+      onCancel={closeDialog}
+      cancelText={t('multisig-address.send-ckb.cancel')}
+      confirmText={canSign ? t('multisig-address.send-ckb.send') : t('multisig-address.send-ckb.export')}
+      onConfirm={canSign ? onSubmit : onExport}
+      disabled={isSendDisabled}
+      confirmProps={{
+        'data-wallet-id': wallet.id,
+      }}
+      contentClassName={styles.dialogContainer}
+    >
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <Tooltip
+            tipClassName={styles.tip}
+            placement="right-bottom"
+            tip={
+              <CopyZone content={multisigConfig.fullPayload} className={styles.copyTableAddress}>
+                {multisigConfig.fullPayload}
+                <Copy />
+              </CopyZone>
+            }
+            showTriangle
+            isTriggerNextToChild
+          >
+            <div>
+              <Trans
+                i18nKey="multisig-address.send-ckb.detail"
+                values={multisigConfig}
+                components={[
+                  <span className={styles.address}>
+                    <span>{multisigConfig.fullPayload.slice(0, 6)}</span>
+                    <span>...</span>
+                    <span>{multisigConfig.fullPayload.slice(-6)}</span>
+                  </span>,
+                ]}
+              />
+            </div>
+          </Tooltip>
+
+          <div className={styles.balance}>
+            {t('overview.balance')}: {shannonToCKBFormatter(balance)} CKB
+          </div>
         </div>
-        <div className={styles.sendFieldContainer}>
-          {sendInfoList.map((item, idx) => (
-            <SendFieldset
-              key={item.address || idx}
-              idx={idx}
-              item={item}
-              errors={outputErrors[idx]}
-              isSendMax={isSendMax}
-              isMaxBtnDisabled={isMaxBtnDisabled}
-              isTimeLockable={false}
-              isMaxBtnShow={idx === sendInfoList.length - 1}
-              isRemoveBtnShow={sendInfoList.length > 1}
-              onOutputRemove={deleteSendInfo}
-              onItemChange={onSendInfoChange}
-              onSendMaxClick={onSendMaxClick}
-              isMainnet={isMainnet}
+        <div className={styles.sendContainer}>
+          <div className={styles.sendFieldContainer}>
+            {sendInfoList.map((item, idx) => (
+              <SendFieldset
+                key={item.address || idx}
+                idx={idx}
+                item={item}
+                errors={outputErrors[idx]}
+                isSendMax={isSendMax}
+                isMaxBtnDisabled={isMaxBtnDisabled}
+                isTimeLockable={false}
+                isMaxBtnShow={false}
+                isRemoveBtnShow={sendInfoList.length > 1}
+                onOutputRemove={deleteSendInfo}
+                onItemChange={onSendInfoChange}
+                onSendMaxClick={onSendMaxClick}
+                className={styles.flexWrap}
+                isMainnet={isMainnet}
+              />
+            ))}
+          </div>
+
+          <div className={styles.addWrap}>
+            <Button type="text" className={styles.addButton} disabled={isAddOneBtnDisabled} onClick={addSendInfo}>
+              <Add /> {t('send.add-receiving-address')}
+            </Button>
+          </div>
+
+          <div className={styles.flexWrap}>
+            <TextField
+              field="totalAmount"
+              label={t('send.total-amount')}
+              value={`${shannonToCKBFormatter(totalAmount)} CKB`}
+              readOnly
+              error={totalAmountErrorMessage}
+              width="100%"
             />
-          ))}
+            <TextField
+              label={t('send.fee')}
+              field="fee"
+              value={`${shannonToCKBFormatter(fee)} CKB`}
+              readOnly
+              disabled
+              width="100%"
+            />
+          </div>
         </div>
-        <TextField
-          field="totalAmount"
-          label={t('send.total-amount')}
-          value={`${shannonToCKBFormatter(totalAmount)} CKB`}
-          readOnly
-          error={totalAmountErrorMessage}
-          className={styles.textFieldClass}
-        />
-        <TextField
-          className={styles.textFieldClass}
-          label={t('send.fee')}
-          field="fee"
-          value={`${shannonToCKBFormatter(fee)} CKB`}
-          readOnly
-          disabled
-        />
-      </div>
-      <div className={styles.sendActions}>
-        <Button label={t('multisig-address.send-ckb.cancel')} type="cancel" onClick={closeDialog} />
-        {canSign ? (
-          <Button
-            disabled={isSendDisabled}
-            label={t('multisig-address.send-ckb.send')}
-            type="primary"
-            onClick={onSubmit}
-            data-wallet-id={wallet.id}
-          />
-        ) : (
-          <Button
-            disabled={isSendDisabled}
-            label={t('multisig-address.send-ckb.export')}
-            type="primary"
-            onClick={onExport}
-          />
-        )}
       </div>
-    </>
+    </Dialog>
   )
 }
 
diff --git a/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss b/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss
index 6d42461cfe..aebee65b67 100644
--- a/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss
+++ b/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss
@@ -1,44 +1,61 @@
-.sendCKBTitle {
-  display: flex;
-  line-height: 1.625rem;
-  flex-wrap: wrap;
+.dialogContainer {
+  padding: 0;
 }
 
-.sendContainer {
-  margin: 16px 0;
-  padding: 8px;
-  margin-bottom: 12px;
-}
+.container {
+  width: 680px;
 
-.balance {
-  grid-area: balance;
-  display: flex;
-  align-items: center;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
+  .header {
+    display: flex;
+    line-height: 48px;
+    padding: 0 16px;
+    font-size: 14px;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--table-head-background-color);
+    color: var(--secondary-text-color);
+    border-bottom: 1px solid var(--table-head-border-color);
 
-.sendFieldContainer {
-  margin-bottom: 16px;
-  & > div {
-    grid-template:
-      'address scanner add-or-remove' auto
-      'amount max add-or-remove' auto
-      'locktime locktime locktime' auto /
-      calc(100% - 130px) 50px 30px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    .tip {
+      left: calc(100% - 240px) !important;
+    }
+
+    .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;
+      }
+    }
+
+    .address {
+      height: 56px;
+      text-decoration: underline;
+
+      &:hover {
+        color: var(--activity-color);
+      }
+    }
+  }
+
+  .balance {
+    font-weight: 500;
+    color: var(--main-text-color);
   }
 }
 
-.sendActions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 12px;
+.sendContainer {
+  padding: 16px 16px 0;
+}
 
-  & > button {
-    margin-left: 12px;
-  }
+.sendFieldContainer {
+  margin-bottom: 16px;
 }
 
 .balanceValue {
@@ -52,6 +69,32 @@
     content: ' CKB';
   }
 }
-.textFieldClass {
-  margin-bottom: 10px;
+
+.addWrap {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.addButton {
+  justify-content: flex-end;
+  height: auto;
+  svg {
+    margin-right: 6px;
+    g,
+    path {
+      fill: var(--primary-color);
+    }
+  }
+}
+
+.flexWrap {
+  padding: 0;
+  display: flex;
+  column-gap: 16px;
+  & > div {
+    flex: 1;
+  }
+  &:last-child {
+    margin-top: 16px;
+  }
 }
diff --git a/packages/neuron-ui/src/components/SignAndVerify/index.tsx b/packages/neuron-ui/src/components/SignAndVerify/index.tsx
index e7f3eb5dd2..559894ec42 100644
--- a/packages/neuron-ui/src/components/SignAndVerify/index.tsx
+++ b/packages/neuron-ui/src/components/SignAndVerify/index.tsx
@@ -156,18 +156,6 @@ const SignAndVerify = () => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   useOnLocaleChange(i18n)
   useExitOnWalletChange()
-  useEffect(() => {
-    window.document.title = i18n.t(`sign-and-verify.window-title`)
-    // eslint-disable-next-line
-  }, [i18n.language])
-
-  useEffect(() => {
-    const id = window.location.href.split('id=').pop()
-    if (!id) {
-      showErrorMessage(t('messages.error'), t(`messages.codes.${ErrorCode.FieldNotFound}`, { fieldName: 'wallet' }))
-      window.close()
-    }
-  }, [t])
 
   const handlePasswordDialogOpen = useCallback(() => {
     setShowDialog(false)
diff --git a/packages/neuron-ui/src/components/SignAndVerify/signAndVerify.module.scss b/packages/neuron-ui/src/components/SignAndVerify/signAndVerify.module.scss
index 57acda3267..34f0db6312 100644
--- a/packages/neuron-ui/src/components/SignAndVerify/signAndVerify.module.scss
+++ b/packages/neuron-ui/src/components/SignAndVerify/signAndVerify.module.scss
@@ -59,7 +59,7 @@
 .tips {
   display: flex;
   align-items: center;
-  margin: -16px 0 20px;
+  margin: -6px 0 20px;
   color: var(--input-hint-color);
   span {
     margin-right: 4px;
@@ -113,7 +113,7 @@
     .selects {
       position: fixed;
       overflow-x: hidden;
-      margin-top: -16px;
+      margin-top: -8px;
       width: 648px;
       z-index: 1;
       max-height: 228px;
diff --git a/packages/neuron-ui/src/containers/Main/hooks.ts b/packages/neuron-ui/src/containers/Main/hooks.ts
index d3d7a6f9c4..17f47bd15b 100644
--- a/packages/neuron-ui/src/containers/Main/hooks.ts
+++ b/packages/neuron-ui/src/containers/Main/hooks.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useCallback } from 'react'
 import { useLocation, NavigateFunction } from 'react-router-dom'
 import { NeuronWalletActions, StateDispatch, AppActions } from 'states/stateProvider/reducer'
 import {
@@ -108,6 +108,22 @@ export const useSubscription = ({
   dispatch: StateDispatch
 }) => {
   const { pageNo, pageSize, keywords } = chain.transactions
+
+  const navigateToolsRouter = useCallback(
+    path => {
+      const { pathname } = location
+      const currentPath = [RoutePath.OfflineSign, RoutePath.SignVerify, RoutePath.MultisigAddress].find(item =>
+        pathname.includes(item)
+      )
+      if (currentPath) {
+        navigate(location.pathname.replace(currentPath, path))
+      } else {
+        navigate(`${location.pathname}/${path}`)
+      }
+    },
+    [navigate, location]
+  )
+
   useEffect(() => {
     const dataUpdateSubscription = DataUpdateSubject.subscribe(({ dataType, walletID: walletIDOfMessage }: any) => {
       if (walletIDOfMessage && walletIDOfMessage !== walletID) {
@@ -252,14 +268,13 @@ export const useSubscription = ({
                   filePath,
                 },
               })
-              navigate(location.pathname + url)
+              navigateToolsRouter(url)
             }
             break
           }
           case 'sign-verify':
-            if (!location.pathname.includes('/sign-verify')) {
-              navigate(`${location.pathname}/sign-verify?id=${payload}`)
-            }
+          case 'multisig-address':
+            navigateToolsRouter(type)
             break
           default: {
             break
diff --git a/packages/neuron-ui/src/index.tsx b/packages/neuron-ui/src/index.tsx
index adab586fbc..15fed414d2 100755
--- a/packages/neuron-ui/src/index.tsx
+++ b/packages/neuron-ui/src/index.tsx
@@ -8,7 +8,6 @@ import 'styles/index.scss'
 import 'utils/i18n'
 
 import Transaction from 'components/Transaction'
-import MultiSignAddress from 'components/MultisigAddress'
 import ErrorBoundary from 'components/ErrorBoundary'
 import Spinner from 'widgets/Spinner'
 import { withProvider } from 'states'
@@ -16,13 +15,6 @@ import mainRouterConfig from 'router'
 
 if (window.location.hash.startsWith('#/transaction/')) {
   ReactDOM.render(<Transaction />, document.getElementById('root'))
-} else if (window.location.hash.startsWith('#/multisig-address/')) {
-  ReactDOM.render(
-    <Router>
-      <MultiSignAddress />
-    </Router>,
-    document.getElementById('root')
-  )
 } else {
   window.neuron = {
     role: 'main',
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
index 896cc3b38a..3fd58a6921 100644
--- a/packages/neuron-ui/src/locales/en.json
+++ b/packages/neuron-ui/src/locales/en.json
@@ -486,10 +486,10 @@
         "title": "Destroy Asset Account"
       },
       "send-from-multisig": {
-        "title": "Submit the transaction"
+        "title": "Send CKB from multisig address"
       },
       "send-from-multisig-need-one": {
-        "title": "Submit the transaction"
+        "title": "Send CKB from multisig address"
       },
       "xpub-notice": "For watch-only wallet, only exporting transactions are supported"
     },
@@ -983,7 +983,7 @@
         "placeholder": "search by multisig address,alias"
       },
       "add": {
-        "label": "Add"
+        "label": "Create"
       },
       "import": {
         "label": "Import"
@@ -994,11 +994,13 @@
       "ok": "OK",
       "no-data": "No multisig address",
       "table": {
-        "address": "address",
-        "alias": "alias",
-        "type": "type",
-        "balance": "balance",
+        "address": "Signer address",
+        "alias": "Alias",
+        "type": "Type",
+        "balance": "Balance",
         "copy-address": "Copy Address",
+        "action": "Actions",
+        "more": "More",
         "sync-block": "Synced Block",
         "actions": {
           "info": "Info",
@@ -1014,9 +1016,10 @@
         },
         "notice": "Only one configuration can be imported at a time. If the content of the file is an array, the first one is imported by default."
       },
-      "delete-failed": "Delete multisig config failed, Reason for failure: {{reason}}",
+      "delete-failed": "Delete multisig config failed",
       "send-ckb": {
-        "title": "Send CKB from {{m}}-of-{{n}} multisig address: <0></0>",
+        "title": "Send CKB from multisig address",
+        "detail": "Send CKB from {{m}}-of-{{n}} multisig address: <0></0>",
         "balance": "Balance",
         "address": "Address",
         "amount": "Amount",
@@ -1024,34 +1027,39 @@
         "cancel": "Cancel",
         "export": "Export Tx"
       },
+      "multi-details": "Multisig address details",
       "create-dialog": {
         "title": "Create multisig address",
-        "index": "index",
-        "required": "required",
-        "signer-address": "signer address",
+        "preview-title": "Multisig address has been generated",
+        "index": "Index",
+        "required": "Required",
+        "signer-address": "Signer address",
         "copy-address": "Copy Address",
+        "placeholder": "Please input {{type}}(1-255)",
         "m-n": {
-          "title": "Please choose the multisig address configuration in the m-of-n type where any m private keys out of a possible n are required to move the asset.",
+          "title": "Please input the multisig address configuration in the m-of-n type where any m private keys out of a possible n are required to move the asset.",
           "m-less-equal-n": "For m-of-n multisig address, m shouldn't be greater than n",
-          "m-n-required": "Please input or choose m/n",
+          "m-n-required": "Please input m/n",
           "m-n-between-0-256": "m/n should be between 0 and 256"
         },
         "multi-address-info": {
           "title": "Please input the signers for the {{m}}-of-{{n}} multisig address",
-          "view-title": "The {{m}}-of-{{n}} multisig address is",
-          "ckb-address-placeholder": "ckb address"
+          "view-title": "The {{m}}-of-{{n}} multisig address",
+          "ckb-address-placeholder": "Please input ckb address"
         },
         "multi-list": "Signer list",
         "actions": {
           "cancel": "Cancel",
           "back": "Back",
           "next": "Next",
+          "generate-address": "Generate Address",
           "confirm": "Confirm"
         },
         "duplicate-address-forbid": "Address can't be duplicated"
       },
       "approve-dialog": {
-        "title": "Approve with {{m}}-of-{{n}} multisig address <0></0>",
+        "title": "Approve with multisig address",
+        "detail": "Approve with {{m}}-of-{{n}} multisig address <0></0>",
         "transaction": "Transaction",
         "cancel": "Cancel",
         "signAndExport": "Sign & Export",
@@ -1063,8 +1071,8 @@
         "signerApprove": "Lack of {{m}} signer approval(s), including {{r}} from specified signer(s)",
         "noRSignerApprove": "Lack of {{m}} signer approval(s)",
         "signed": "Signed",
-        "view-concise-data": "View concise data",
-        "view-raw-data": "View raw data"
+        "view-concise-data": "Concise data",
+        "view-raw-data": "Raw data"
       }
     },
     "dropdown": {
diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json
index c85020625d..9424afea0c 100644
--- a/packages/neuron-ui/src/locales/zh-tw.json
+++ b/packages/neuron-ui/src/locales/zh-tw.json
@@ -478,10 +478,10 @@
         "title": "銷毀資產賬戶"
       },
       "send-from-multisig": {
-        "title": "發起交易"
+        "title": "多簽地址轉賬"
       },
       "send-from-multisig-need-one": {
-        "title": "發起交易"
+        "title": "多簽地址轉賬"
       },
       "xpub-notice": "對於觀察錢包，只支持導出交易"
     },
@@ -952,7 +952,7 @@
         "placeholder": "使用地址或者别名搜索"
       },
       "add": {
-        "label": "添加"
+        "label": "創建"
       },
       "import": {
         "label": "導入"
@@ -960,14 +960,16 @@
       "export": {
         "label": "導出"
       },
-      "ok": "好的",
+      "ok": "確定",
       "no-data": "沒有多簽地址",
       "table": {
-        "address": "地址",
+        "address": "簽名者地址",
         "alias": "别名",
         "type": "類型",
         "balance": "余额",
         "copy-address": "復製地址",
+        "action": "操作",
+        "more": "更多",
         "sync-block": "同步高度",
         "actions": {
           "info": "詳情",
@@ -983,9 +985,10 @@
         },
         "notice": "導入配置一次只能導入一個，如果是文件內容是數組默認取第一個導入"
       },
-      "delete-failed": "刪除多簽配置失敗，失敗原因：{{reason}}",
+      "delete-failed": "刪除多簽配置失敗",
       "send-ckb": {
-        "title": "從 {{m}}-of-{{n}} 多簽地址 <0></0> 轉賬",
+        "title": "多簽地址轉賬",
+        "detail": "從 {{m}}-of-{{n}} 多簽地址 <0></0> 轉賬",
         "balance": "余額",
         "address": "地址",
         "amount": "金額",
@@ -993,34 +996,39 @@
         "cancel": "取消",
         "export": "導出交易"
       },
+      "multi-details": "多簽地址詳情",
       "create-dialog": {
         "title": "創建多重簽名地址",
+        "preview-title": "簽名地址已生成",
         "index": "序號",
-        "required": "必選",
+        "required": "必選項",
         "signer-address": "簽名者地址",
         "copy-address": "復製地址",
+        "placeholder": "輸入{{type}}的數值(1-255)",
         "m-n": {
           "title": "請選擇 m-of-n 類型的多重簽名地址配置，從 n 個密鑰中通過 m 個確認來轉移資產。",
           "m-less-equal-n": "對於 m-of-n 多重簽名地址，m 不應大於 n",
-          "m-n-required": "請輸入或選擇 m/n",
+          "m-n-required": "請輸入 m/n",
           "m-n-between-0-256": "m/n 應該在 0-256 之間"
         },
         "multi-address-info": {
           "title": "對於 {{m}}-of-{{n}}, 請輸入 {{n}} 個簽名者地址",
-          "view-title": " {{m}}-of-{{n}} 的多簽地址是",
-          "ckb-address-placeholder": "ckb address"
+          "view-title": " {{m}}-of-{{n}} 多簽地址",
+          "ckb-address-placeholder": "輸入ckb地址"
         },
         "multi-list": "多簽地址列表",
         "actions": {
           "cancel": "取消",
           "back": "上一步",
           "next": "下一步",
+          "generate-address": "生成地址",
           "confirm": "確認"
         },
         "duplicate-address-forbid": "地址不能重復"
       },
       "approve-dialog": {
-        "title": "從{{m}}-of-{{n}}多簽地址<0></0>確認交易",
+        "title": "多簽地址確認",
+        "detail": "從{{m}}-of-{{n}}多簽地址<0></0>確認交易",
         "transaction": "交易",
         "cancel": "取消",
         "signAndExport": "簽名並導出",
@@ -1032,8 +1040,8 @@
         "signerApprove": "缺少 {{m}} 個簽名者同意, 其中包括 {{r}} 個指定簽名者",
         "noRSignerApprove": "缺少 {{m}} 個簽名者同意",
         "signed": "已簽名",
-        "view-concise-data": "查看概要",
-        "view-raw-data": "查看原始數據"
+        "view-concise-data": "概要",
+        "view-raw-data": "原始數據"
       }
     },
     "dropdown": {
diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
index d28b2c2295..f588cd5b3e 100644
--- a/packages/neuron-ui/src/locales/zh.json
+++ b/packages/neuron-ui/src/locales/zh.json
@@ -479,10 +479,10 @@
         "title": "销毁资产账户"
       },
       "send-from-multisig": {
-        "title": "发起交易"
+        "title": "多签地址转账"
       },
       "send-from-multisig-need-one": {
-        "title": "发起交易"
+        "title": "多签地址转账"
       },
       "xpub-notice": "对于观察钱包，只支持导出交易"
     },
@@ -975,7 +975,7 @@
         "placeholder": "使用地址或者别名搜索"
       },
       "add": {
-        "label": "添加"
+        "label": "创建"
       },
       "import": {
         "label": "导入"
@@ -983,14 +983,16 @@
       "export": {
         "label": "导出"
       },
-      "ok": "好的",
+      "ok": "确定",
       "no-data": "没有多签地址",
       "table": {
-        "address": "地址",
+        "address": "签名者地址",
         "alias": "别名",
         "type": "类型",
         "balance": "余额",
         "copy-address": "复制地址",
+        "action": "操作",
+        "more": "更多",
         "sync-block": "同步高度",
         "actions": {
           "info": "详情",
@@ -1006,9 +1008,10 @@
         },
         "notice": "导入配置一次只能导入一个，如果是文件内容是数组默认取第一个导入"
       },
-      "delete-failed": "删除多签配置失败，失败原因：{{reason}}",
+      "delete-failed": "删除多签配置失败",
       "send-ckb": {
-        "title": "从 {{m}}-of-{{n}} 多签地址 <0></0> 转账",
+        "title": "多签地址转账",
+        "detail": "从 {{m}}-of-{{n}} 多签地址 <0></0> 转账",
         "balance": "余额",
         "address": "地址",
         "amount": "金额",
@@ -1016,34 +1019,39 @@
         "cancel": "取消",
         "export": "导出交易"
       },
+      "multi-details": "多签地址详情",
       "create-dialog": {
         "title": "创建多重签名地址",
+        "preview-title": "多签地址已生成",
         "index": "序号",
-        "required": "必选",
+        "required": "必选项",
         "signer-address": "签名者地址",
         "copy-address": "复制地址",
+        "placeholder": "输入{{type}}的数值(1-255)",
         "m-n": {
           "title": "请选择 m-of-n 类型的多重签名地址配置，从 n 个密钥中通过 m 个确认来转移资产。",
           "m-less-equal-n": "对于 m-of-n 多重签名地址，m 不应大于 n",
-          "m-n-required": "请输入或选择 m/n",
+          "m-n-required": "请输入 m/n",
           "m-n-between-0-256": "m/n 应该在 0-256 之间"
         },
         "multi-address-info": {
           "title": "对于 {{m}}-of-{{n}}, 请输入 {{n}} 个签名者地址",
-          "view-title": " {{m}}-of-{{n}} 的多签地址是",
-          "ckb-address-placeholder": "ckb address"
+          "view-title": " {{m}}-of-{{n}} 多签地址",
+          "ckb-address-placeholder": "输入ckb地址"
         },
         "multi-list": "多签地址列表",
         "actions": {
           "cancel": "取消",
           "back": "上一步",
           "next": "下一步",
+          "generate-address": "生成地址",
           "confirm": "确认"
         },
         "duplicate-address-forbid": "地址不能重复"
       },
       "approve-dialog": {
-        "title": "从{{m}}-of-{{n}}多签地址<0></0>确认交易",
+        "title": "多签地址确认",
+        "detail": "从{{m}}-of-{{n}}多签地址<0></0>确认交易",
         "transaction": "交易",
         "cancel": "取消",
         "signAndExport": "签名并导出",
@@ -1055,8 +1063,8 @@
         "signerApprove": "缺少 {{m}} 个签名者同意, 其中包括 {{r}} 个指定签名者",
         "noRSignerApprove": "缺少 {{m}} 个签名者同意",
         "signed": "已签名",
-        "view-concise-data": "查看概要",
-        "view-raw-data": "查看原始数据"
+        "view-concise-data": "概要",
+        "view-raw-data": "原始数据"
       }
     },
     "dropdown": {
diff --git a/packages/neuron-ui/src/router.tsx b/packages/neuron-ui/src/router.tsx
index d2810ae23e..0a701cf31e 100644
--- a/packages/neuron-ui/src/router.tsx
+++ b/packages/neuron-ui/src/router.tsx
@@ -23,16 +23,22 @@ import OfflineSign from 'components/OfflineSign'
 import NFTSend from 'components/NFTSend'
 import Settings from 'components/Settings'
 import SignAndVerify from 'components/SignAndVerify'
+import MultisigAddress from 'components/MultisigAddress'
 
-const offlineRouter = {
-  path: RoutePath.OfflineSign,
-  element: <OfflineSign />,
-}
-
-const signVerifyRouter = {
-  path: RoutePath.SignVerify,
-  element: <SignAndVerify />,
-}
+const toolsRouters = [
+  {
+    path: RoutePath.OfflineSign,
+    element: <OfflineSign />,
+  },
+  {
+    path: RoutePath.SignVerify,
+    element: <SignAndVerify />,
+  },
+  {
+    path: RoutePath.MultisigAddress,
+    element: <MultisigAddress />,
+  },
+]
 
 const mainRouterConfig: RouteObject[] = [
   {
@@ -57,7 +63,7 @@ const mainRouterConfig: RouteObject[] = [
             <Outlet />
           </>
         ),
-        children: [offlineRouter, signVerifyRouter],
+        children: [...toolsRouters],
       },
       {
         path: RoutePath.Send,
@@ -70,7 +76,7 @@ const mainRouterConfig: RouteObject[] = [
                 <Outlet />
               </>
             ),
-            children: [offlineRouter, signVerifyRouter],
+            children: [...toolsRouters],
           },
           {
             path: ':address?',
@@ -80,7 +86,7 @@ const mainRouterConfig: RouteObject[] = [
                 <Outlet />
               </>
             ),
-            children: [offlineRouter, signVerifyRouter],
+            children: [...toolsRouters],
           },
         ],
       },
@@ -95,7 +101,7 @@ const mainRouterConfig: RouteObject[] = [
                 <Outlet />
               </>
             ),
-            children: [offlineRouter, signVerifyRouter],
+            children: [...toolsRouters],
           },
           {
             path: ':address?',
@@ -105,7 +111,7 @@ const mainRouterConfig: RouteObject[] = [
                 <Outlet />
               </>
             ),
-            children: [offlineRouter, signVerifyRouter],
+            children: [...toolsRouters],
           },
         ],
       },
@@ -117,7 +123,7 @@ const mainRouterConfig: RouteObject[] = [
             <Outlet />
           </>
         ),
-        children: [offlineRouter, signVerifyRouter],
+        children: [...toolsRouters],
       },
       {
         path: `${RoutePath.Transaction}/:hash`,
@@ -127,7 +133,7 @@ const mainRouterConfig: RouteObject[] = [
             <Outlet />
           </>
         ),
-        children: [offlineRouter, signVerifyRouter],
+        children: [...toolsRouters],
       },
       {
         path: `${RoutePath.HistoryDetailPage}/:hash`,
@@ -137,7 +143,7 @@ const mainRouterConfig: RouteObject[] = [
             <Outlet />
           </>
         ),
-        children: [offlineRouter],
+        children: [...toolsRouters],
       },
       {
         path: `${RoutePath.WalletWizard}*`,
@@ -147,7 +153,7 @@ const mainRouterConfig: RouteObject[] = [
             <Outlet />
           </>
         ),
-        children: [offlineRouter, signVerifyRouter],
+        children: [...toolsRouters],
       },
       {
         path: RoutePath.ImportKeystore,
@@ -157,7 +163,7 @@ const mainRouterConfig: RouteObject[] = [
             <Outlet />
           </>
         ),
-        children: [offlineRouter, signVerifyRouter],
+        children: [...toolsRouters],
       },
       {
         path: RoutePath.NervosDAO,
@@ -170,7 +176,7 @@ const mainRouterConfig: RouteObject[] = [
                 <Outlet />
               </>
             ),
-            children: [offlineRouter],
+            children: [...toolsRouters],
           },
           {
             path: ':depositOutPoint',
@@ -180,7 +186,7 @@ const mainRouterConfig: RouteObject[] = [
                 <Outlet />
               </>
             ),
-            children: [offlineRouter],
+            children: [...toolsRouters],
           },
         ],
       },
@@ -192,7 +198,7 @@ const mainRouterConfig: RouteObject[] = [
             <Outlet />
           </>
         ),
-        children: [offlineRouter, signVerifyRouter],
+        children: [...toolsRouters],
       },
       {
         path: RoutePath.SUDTAccountList,
@@ -202,7 +208,7 @@ const mainRouterConfig: RouteObject[] = [
             <Outlet />
           </>
         ),
-        children: [offlineRouter, signVerifyRouter],
+        children: [...toolsRouters],
       },
       {
         path: RoutePath.SUDTSend,
@@ -215,7 +221,7 @@ const mainRouterConfig: RouteObject[] = [
                 <Outlet />
               </>
             ),
-            children: [offlineRouter, signVerifyRouter],
+            children: [...toolsRouters],
           },
           {
             path: ':accountId',
@@ -225,7 +231,7 @@ const mainRouterConfig: RouteObject[] = [
                 <Outlet />
               </>
             ),
-            children: [offlineRouter, signVerifyRouter],
+            children: [...toolsRouters],
           },
         ],
       },
@@ -237,7 +243,7 @@ const mainRouterConfig: RouteObject[] = [
             <Outlet />
           </>
         ),
-        children: [offlineRouter, signVerifyRouter],
+        children: [...toolsRouters],
       },
       {
         path: RoutePath.NFTSend,
@@ -250,7 +256,7 @@ const mainRouterConfig: RouteObject[] = [
                 <Outlet />
               </>
             ),
-            children: [offlineRouter, signVerifyRouter],
+            children: [...toolsRouters],
           },
           {
             path: ':nftId',
@@ -260,7 +266,7 @@ const mainRouterConfig: RouteObject[] = [
                 <Outlet />
               </>
             ),
-            children: [offlineRouter, signVerifyRouter],
+            children: [...toolsRouters],
           },
         ],
       },
@@ -272,7 +278,7 @@ const mainRouterConfig: RouteObject[] = [
             <Outlet />
           </>
         ),
-        children: [offlineRouter],
+        children: [...toolsRouters],
       },
     ],
   },
diff --git a/packages/neuron-ui/src/services/remote/updater.ts b/packages/neuron-ui/src/services/remote/updater.ts
index 03868ff237..c30f32e650 100644
--- a/packages/neuron-ui/src/services/remote/updater.ts
+++ b/packages/neuron-ui/src/services/remote/updater.ts
@@ -1,6 +1,6 @@
 import { remoteApi } from './remoteApiWrapper'
 
 export const checkForUpdates = remoteApi<void>('check-for-updates')
-export const downloadUpdate = remoteApi<void>('download-update')
-export const installUpdate = remoteApi<void>('quit-and-install-update')
+export const downloadUpdate = remoteApi<any>('download-update')
+export const installUpdate = remoteApi<any>('quit-and-install-update')
 export const migrateData = remoteApi<void>('start-migrate')
diff --git a/packages/neuron-ui/src/styles/mixin.scss b/packages/neuron-ui/src/styles/mixin.scss
index 1871b30bce..95b664eb13 100644
--- a/packages/neuron-ui/src/styles/mixin.scss
+++ b/packages/neuron-ui/src/styles/mixin.scss
@@ -25,7 +25,7 @@
   border-radius: 16px;
   background-color: var(--secondary-background-color);
   min-width: 450px;
-  max-width: 650px;
+  max-width: 80vw;
   box-sizing: border-box;
 }
 
@@ -185,3 +185,30 @@
     cursor: not-allowed;
   }
 }
+
+@mixin checkbox {
+  input[type='checkbox'] {
+    display: none;
+  }
+  input[type='checkbox'] + span {
+    padding-left: 30px;
+    line-height: 22px;
+    background: url('../widgets/Icons/Checkbox.svg') no-repeat left top;
+    user-select: none;
+  }
+  input[type='checkbox']:checked + span {
+    background: url('../widgets/Icons/CheckboxSelected.svg') no-repeat left top;
+  }
+
+  input[type='checkbox']:disabled:checked + span {
+    background: url('../widgets/Icons/CheckboxSelected.svg') no-repeat left top;
+    opacity: 0.5;
+  }
+  input[type='checkbox']:disabled + span {
+    background: url('../widgets/Icons/CheckboxDisabled.svg') no-repeat left top;
+
+    @media (prefers-color-scheme: dark) {
+      background: url('../widgets/Icons/CheckboxDisabledDark.svg') no-repeat left top;
+    }
+  }
+}
diff --git a/packages/neuron-ui/src/styles/theme.scss b/packages/neuron-ui/src/styles/theme.scss
index 2e12f6829f..86c3771c0d 100644
--- a/packages/neuron-ui/src/styles/theme.scss
+++ b/packages/neuron-ui/src/styles/theme.scss
@@ -47,6 +47,7 @@ body {
   --hover-background-color: #f5f9f4;
   --tooltip-hover-background-color: #f5f9f4;
   --process-background-color: #f0f0f0;
+  --tag-background-color: #ecf9f0;
   --orange-color: #f68c2a;
 
   @media (prefers-color-scheme: dark) {
@@ -96,5 +97,6 @@ body {
     --hover-background-color: #2d3534;
     --tooltip-hover-background-color: rgba(255, 255, 255, 0.2);
     --process-background-color: #282e2d;
+    --tag-background-color: #171b1a;
   }
 }
diff --git a/packages/neuron-ui/src/types/Subject/index.d.ts b/packages/neuron-ui/src/types/Subject/index.d.ts
index be0e19ecfd..7e026c3834 100644
--- a/packages/neuron-ui/src/types/Subject/index.d.ts
+++ b/packages/neuron-ui/src/types/Subject/index.d.ts
@@ -15,6 +15,7 @@ declare namespace Command {
     | 'load-transaction-json'
     | 'migrate-acp'
     | 'sign-verify'
+    | 'multisig-address'
   type Payload = string | null
 }
 
diff --git a/packages/neuron-ui/src/utils/const.ts b/packages/neuron-ui/src/utils/const.ts
index c85f228a34..fd1b58056a 100644
--- a/packages/neuron-ui/src/utils/const.ts
+++ b/packages/neuron-ui/src/utils/const.ts
@@ -68,3 +68,5 @@ export const HIDE_BALANCE = '******'
 export const LIGHT_CLIENT_TESTNET = 'light_client_testnet'
 export const LIGHT_NETWORK_TYPE = 2
 export const METHOD_NOT_FOUND = -32601
+
+export const MAX_M_N_NUMBER = 255
diff --git a/packages/neuron-ui/src/utils/enums.ts b/packages/neuron-ui/src/utils/enums.ts
index f810e3ba4d..ae795d1f1e 100644
--- a/packages/neuron-ui/src/utils/enums.ts
+++ b/packages/neuron-ui/src/utils/enums.ts
@@ -32,6 +32,7 @@ export enum RoutePath {
   ImportHardware = '/import-hardware',
   OfflineSign = 'offline-sign',
   SignVerify = 'sign-verify',
+  MultisigAddress = 'multisig-address',
 }
 
 export enum CapacityUnit {
diff --git a/packages/neuron-ui/src/utils/multisig.ts b/packages/neuron-ui/src/utils/multisig.ts
index cada54220e..e5f3f89ae7 100644
--- a/packages/neuron-ui/src/utils/multisig.ts
+++ b/packages/neuron-ui/src/utils/multisig.ts
@@ -1,9 +1,10 @@
 import { scriptToAddress, blake2b, PERSONAL, hexToBytes } from '@nervosnetwork/ckb-sdk-utils'
 import { MultiSigLockInfo } from './enums'
+import { MAX_M_N_NUMBER } from './const'
 
 function getMultisigParamsHex(v: number) {
-  if (v < 0 || v > 255) {
-    throw new Error("Multisig's r/m/n should between 0 and 255")
+  if (v < 0 || v > MAX_M_N_NUMBER) {
+    throw new Error(`Multisig's r/m/n should between 0 and ${MAX_M_N_NUMBER}`)
   }
   return v.toString(16).padStart(2, '0')
 }
diff --git a/packages/neuron-ui/src/widgets/Dialog/dialog.module.scss b/packages/neuron-ui/src/widgets/Dialog/dialog.module.scss
index c1f04062b6..7353a97921 100644
--- a/packages/neuron-ui/src/widgets/Dialog/dialog.module.scss
+++ b/packages/neuron-ui/src/widgets/Dialog/dialog.module.scss
@@ -2,7 +2,6 @@
 
 .dialogWrap {
   @include dialog-container;
-  max-width: 90vw;
   padding: 0;
   position: relative;
 
@@ -12,7 +11,11 @@
 }
 
 .header {
-  position: relative;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--secondary-background-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -43,12 +46,28 @@
 }
 
 .content {
-  padding: 20px 16px 0;
+  padding: 20px 16px;
   position: relative;
+  max-height: calc(90vh - 200px);
+  overflow-y: scroll;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.footerWrap {
+  height: 104px;
 }
 
 .footer {
-  padding: 24px 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background: var(--secondary-background-color);
+  padding: 4px 0 20px;
   @include dialog-footer;
 
   button {
diff --git a/packages/neuron-ui/src/widgets/Dialog/index.tsx b/packages/neuron-ui/src/widgets/Dialog/index.tsx
index 962eff0cf6..f94a40c2c2 100644
--- a/packages/neuron-ui/src/widgets/Dialog/index.tsx
+++ b/packages/neuron-ui/src/widgets/Dialog/index.tsx
@@ -9,7 +9,7 @@ interface DialogProps {
   show: boolean
   title?: string | ReactNode
   subTitle?: string
-  onConfirm?: () => void
+  onConfirm?: (e: React.FormEvent) => void
   onCancel?: () => void
   confirmText?: string
   cancelText?: string
@@ -67,13 +67,13 @@ const Dialog = ({
     [onCancel]
   )
 
-  const onSubmit = useCallback(
+  const handleConfirm = useCallback(
     (e: React.FormEvent) => {
       e.preventDefault()
       if (disabled) {
         return
       }
-      onConfirm?.()
+      onConfirm?.(e)
     },
     [onConfirm, disabled]
   )
@@ -101,8 +101,8 @@ const Dialog = ({
       ) : null}
       <div className={clsx(styles.content, contentClassName)}>{children}</div>
       {showFooter ? (
-        <form onSubmit={onSubmit}>
-          <div className={styles.footer}>
+        <div className={styles.footerWrap}>
+          <form className={styles.footer}>
             {showCancel ? (
               <Button type="cancel" onClick={onCancel || closeDialog} label={cancelText || t('common.cancel')} />
             ) : null}
@@ -112,11 +112,12 @@ const Dialog = ({
                 label={confirmText || t('common.confirm')}
                 loading={isLoading}
                 disabled={disabled}
+                onClick={handleConfirm}
                 {...confirmProps}
               />
             ) : null}
-          </div>
-        </form>
+          </form>
+        </div>
       ) : null}
     </dialog>
   )
diff --git a/packages/neuron-ui/src/widgets/Icons/CheckboxDisabled.svg b/packages/neuron-ui/src/widgets/Icons/CheckboxDisabled.svg
new file mode 100644
index 0000000000..993d2a0607
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/CheckboxDisabled.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="19" height="19" rx="3.5" fill="#F0F0F0" stroke="#CCCCCC"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/CheckboxDisabledDark.svg b/packages/neuron-ui/src/widgets/Icons/CheckboxDisabledDark.svg
new file mode 100644
index 0000000000..b0e25a3aa7
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/CheckboxDisabledDark.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="19" height="19" rx="3.5" fill="#333333" stroke="#666666"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/Confirm.svg b/packages/neuron-ui/src/widgets/Icons/Confirm.svg
new file mode 100644
index 0000000000..3c249f17e0
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/Confirm.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 d="M7.99999 15C4.14019 15 1 11.8595 1 7.99999C1 4.14048 4.14019 1 7.99999 1C11.8598 1 15 4.14048 15 7.99999C15 11.8595 11.8601 15 7.99999 15ZM7.99999 2.4C4.91216 2.4 2.4 4.91216 2.4 7.99999C2.4 11.0878 4.91216 13.6 7.99999 13.6C11.0878 13.6 13.6 11.0878 13.6 7.99999C13.6 4.91216 11.0878 2.4 7.99999 2.4ZM6.10495 10.595L4.70495 9.19503C4.43638 8.91696 4.44408 8.47381 4.72215 8.20524C4.99342 7.94324 5.42348 7.94324 5.69475 8.20524L6.59999 9.1102L10.3052 5.40496C10.5833 5.13638 11.0264 5.14409 11.295 5.42216C11.557 5.69343 11.557 6.12349 11.295 6.39476L7.09503 10.5948H7.09503C6.82178 10.8682 6.37856 10.8684 6.10508 10.5952C6.10504 10.5951 6.10499 10.5951 6.10495 10.595L6.10495 10.595Z" fill="#333333"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/Details.svg b/packages/neuron-ui/src/widgets/Icons/Details.svg
new file mode 100644
index 0000000000..284336bd01
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/Details.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 d="M3.25198 1H12.7485C13.9608 1.00377 14.9481 1.96234 14.998 3.16367L15 3.252V12.7485C14.9962 13.9608 14.0377 14.9481 12.8363 14.998L12.748 15H3.25152C2.03919 14.9962 1.05186 14.0377 1.00197 12.8363L1 12.748V3.25154C1.00375 2.03921 1.96232 1.05188 3.16324 1.00197L3.25198 1ZM12.748 2.33861H3.25198C2.77064 2.33861 2.37303 2.71617 2.34073 3.18969L2.33861 3.25198V12.7476C2.33989 13.2307 2.71494 13.6259 3.18953 13.6591L3.25198 13.6614H12.748C13.2294 13.6614 13.627 13.2838 13.6593 12.8103L13.6614 12.748V3.25198C13.6614 2.74971 13.2503 2.33861 12.748 2.33861ZM4.84583 10.496C5.19331 10.4992 5.47605 10.7686 5.50203 11.1076L5.50396 11.1765C5.50082 11.524 5.23138 11.8067 4.88635 11.8326L4.82818 11.8345L4.76641 11.8313C4.4431 11.7993 4.19594 11.546 4.16798 11.2265L4.16535 11.153C4.16911 10.8055 4.43906 10.5232 4.77932 10.4979L4.84583 10.496ZM11.1765 10.496C11.524 10.4992 11.8067 10.7686 11.8328 11.1077L11.8347 11.1765C11.8315 11.524 11.5621 11.8067 11.2229 11.8327L11.1658 11.8347H6.94535C6.59086 11.8347 6.30688 11.5694 6.27797 11.2241L6.27555 11.1542C6.27872 10.8067 6.54816 10.5239 6.88837 10.498L6.9457 10.496H11.1765ZM4.84583 7.33069C5.19331 7.33383 5.47605 7.60326 5.50203 7.94229L5.50396 8.01118C5.50082 8.35865 5.23138 8.64139 4.88635 8.66724L4.82818 8.66913L4.76641 8.66593C4.4431 8.634 4.19594 8.38064 4.16798 8.06111L4.16535 7.98762C4.16911 7.64014 4.43906 7.35789 4.77932 7.33252L4.84583 7.33069ZM11.1765 7.33069C11.524 7.33383 11.8067 7.60325 11.8328 7.94239L11.8347 8.01119C11.8315 8.35866 11.5621 8.64139 11.2229 8.66738L11.1658 8.6693H6.94535C6.59086 8.6693 6.30688 8.40401 6.27797 8.05872L6.27555 7.9888C6.27872 7.64133 6.54816 7.3586 6.88837 7.33262L6.9457 7.33069H11.1765ZM11.1765 4.16533C11.524 4.16847 11.8067 4.4379 11.8328 4.77704L11.8347 4.84583C11.8315 5.19331 11.5621 5.47604 11.2229 5.50203L11.1658 5.50395H6.94535C6.59059 5.50395 6.30685 5.23924 6.27797 4.89346L6.27555 4.82345C6.27872 4.47597 6.54816 4.19324 6.88837 4.16726L6.9457 4.16533H11.1765ZM4.84583 4.16533C5.19331 4.16847 5.47605 4.43791 5.50203 4.77693L5.50396 4.84582C5.50082 5.1933 5.23138 5.47604 4.88637 5.50188L4.8282 5.50378L4.76647 5.50059C4.4429 5.46876 4.19591 5.21588 4.16798 4.89586L4.16535 4.82226C4.16911 4.47479 4.43906 4.19253 4.77932 4.16716L4.84583 4.16533Z" fill="white"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/Search.svg b/packages/neuron-ui/src/widgets/Icons/Search.svg
index 9a0b02c23a..22a299a105 100644
--- a/packages/neuron-ui/src/widgets/Icons/Search.svg
+++ b/packages/neuron-ui/src/widgets/Icons/Search.svg
@@ -1 +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="1645428427178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2862" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M469.333 192c153.174 0 277.334 124.16 277.334 277.333 0 68.054-24.534 130.411-65.216 178.688L846.336 818.24l-48.341 49.877L630.4 695.125a276.053 276.053 0 0 1-161.067 51.542C316.16 746.667 192 622.507 192 469.333S316.16 192 469.333 192z m0 64C351.51 256 256 351.51 256 469.333s95.51 213.334 213.333 213.334 213.334-95.51 213.334-213.334S587.157 256 469.333 256z" p-id="2863" fill="#000000"></path></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 opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M1.59995 7.60023C1.59995 4.28633 4.28626 1.59995 7.59992 1.59995C10.9136 1.59995 13.5999 4.28633 13.5999 7.60023C13.5999 9.20973 12.9662 10.6712 11.9348 11.7488C11.8994 11.7741 11.8656 11.8026 11.8339 11.8344C11.8021 11.8662 11.7736 11.8999 11.7483 11.9353C10.6707 12.9668 9.20932 13.6005 7.59992 13.6005C4.28626 13.6005 1.59995 10.9141 1.59995 7.60023ZM12.3786 13.5104C11.0731 14.5673 9.41045 15.2005 7.59992 15.2005C3.40257 15.2005 0 11.7977 0 7.60023C0 3.40277 3.40257 0 7.59992 0C11.7973 0 15.1998 3.40277 15.1998 7.60023C15.1998 9.41079 14.5668 11.0735 13.5099 12.379L15.7653 14.6344C16.0777 14.9468 16.0777 15.4533 15.7653 15.7657C15.4529 16.0781 14.9464 16.0782 14.634 15.7657L12.3786 13.5104Z" fill="#999999"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/Transfer.svg b/packages/neuron-ui/src/widgets/Icons/Transfer.svg
index 8b92c924a8..ccbfb3309c 100644
--- a/packages/neuron-ui/src/widgets/Icons/Transfer.svg
+++ b/packages/neuron-ui/src/widgets/Icons/Transfer.svg
@@ -1,5 +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="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM7.9998 14.6637C11.6796 14.6637 14.6627 11.6806 14.6627 8.00078C14.6627 4.32097 11.6796 1.33789 7.9998 1.33789C4.31999 1.33789 1.33691 4.32097 1.33691 8.00078C1.33691 11.6806 4.31999 14.6637 7.9998 14.6637ZM5.62266 5.99023H11.7553C12.1143 5.99023 12.4053 6.28125 12.4053 6.64023C12.4053 6.99922 12.1143 7.29023 11.7553 7.29023H4.05527C3.73029 7.29023 3.46102 7.05174 3.41292 6.74023C3.38171 6.5419 3.44253 6.33189 3.59536 6.17905L5.91876 3.85565C6.1726 3.60181 6.58416 3.60181 6.838 3.85565C7.09184 4.10949 7.09184 4.52105 6.838 4.77489L5.62266 5.99023ZM3.98008 10.0098H10.1127L8.89735 11.2251C8.64351 11.479 8.64351 11.8905 8.89735 12.1444C9.15119 12.3982 9.56275 12.3982 9.81659 12.1443L12.14 9.82095C12.2928 9.66811 12.3536 9.45811 12.3224 9.25977C12.2743 8.94826 12.0051 8.70977 11.6801 8.70977H3.98008C3.62109 8.70977 3.33008 9.00078 3.33008 9.35977C3.33008 9.71875 3.62109 10.0098 3.98008 10.0098Z"
-    fill="#050505" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.96979 2.90866H2.28553L3.76767 2.10866L5.75123 1.03802C6.04117 0.881516 6.36322 0.799805 6.69009 0.799805C7.54012 0.799805 8.26834 1.34067 8.5722 2.10866C8.6698 2.35535 8.72362 2.62549 8.72362 2.90866H7.92362H3.96979ZM7.66692 2.10866L5.45194 2.10866L6.13121 1.74201C6.30539 1.648 6.49699 1.5998 6.69009 1.5998C7.0764 1.5998 7.43668 1.79456 7.66692 2.10866ZM2.01732 4.65356C2.09056 4.57761 2.18511 4.53623 2.28579 4.53623H14.1715C14.2722 4.53623 14.3667 4.57761 14.44 4.65356C14.5136 4.72989 14.562 4.83824 14.562 4.96339V7.7434H13.2417C12.7145 7.7434 12.2411 7.96696 11.9037 8.3184C11.5668 8.66942 11.3617 9.15089 11.3617 9.67673C11.3617 10.2026 11.5668 10.684 11.9037 11.0351C12.2411 11.3865 12.7145 11.6101 13.2417 11.6101H14.562V13.2004C14.562 13.3256 14.5136 13.4339 14.44 13.5103C14.3667 13.5862 14.2722 13.6276 14.1715 13.6276H2.28579C2.18511 13.6276 2.09056 13.5862 2.01732 13.5103C1.94372 13.4339 1.89531 13.3256 1.89531 13.2004V4.96339C1.89531 4.83824 1.94372 4.72989 2.01732 4.65356ZM2.28579 3.33623C1.83944 3.33623 1.43876 3.52478 1.15351 3.8206C0.86863 4.11603 0.695312 4.52126 0.695312 4.96339V13.2004C0.695312 13.6426 0.86863 14.0478 1.15351 14.3432C1.43876 14.639 1.83944 14.8276 2.28579 14.8276H14.1715C14.6178 14.8276 15.0185 14.639 15.3038 14.3432C15.5887 14.0478 15.762 13.6426 15.762 13.2004V4.96339C15.762 4.52126 15.5887 4.11603 15.3038 3.8206C15.0185 3.52478 14.6178 3.33623 14.1715 3.33623H2.28579ZM13.2417 8.9434C13.062 8.9434 12.8953 9.01832 12.7694 9.14944C12.6431 9.281 12.5617 9.46619 12.5617 9.67673C12.5617 9.88727 12.6431 10.0725 12.7694 10.204C12.8953 10.3351 13.062 10.4101 13.2417 10.4101H14.5617V8.9434H13.2417ZM5.81283 7.01364C5.9154 6.88898 6.06837 6.81674 6.2298 6.81674C6.38275 6.81674 6.52852 6.88161 6.63092 6.99523L6.71769 7.09151L7.86604 8.28261C8.05432 8.47789 8.0543 8.78714 7.86601 8.98241C7.66773 9.18803 7.33838 9.18798 7.14016 8.9823L6.71769 8.54391V10.9437C6.71769 11.2172 6.49596 11.439 6.22245 11.439C5.94894 11.439 5.72721 11.2172 5.72721 10.9437V8.57011L5.32965 8.98245C5.1314 9.18807 4.8021 9.18808 4.60383 8.98247C4.41552 8.78718 4.41552 8.47787 4.60385 8.28259L5.72721 7.1177L5.81283 7.01364Z" fill="white"/>
 </svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/Upload.svg b/packages/neuron-ui/src/widgets/Icons/Upload.svg
new file mode 100644
index 0000000000..359980f5fd
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/Upload.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="M7.19948 10.4145L7.19948 2.73137L4.56516 5.36569C4.25274 5.67811 3.74621 5.67811 3.43379 5.36569C3.12137 5.05327 3.12137 4.54673 3.43379 4.23432L7.43379 0.234315C7.74621 -0.078104 8.25274 -0.078104 8.56516 0.234315L12.5652 4.23431C12.8776 4.54673 12.8776 5.05327 12.5652 5.36569C12.2527 5.6781 11.7462 5.6781 11.4338 5.36569L8.79948 2.73137V10.4145C8.79948 10.8484 8.44131 11.2002 7.99948 11.2002C7.55765 11.2002 7.19948 10.8484 7.19948 10.4145ZM1.6 10.4002C1.6 9.95841 1.24183 9.60024 0.8 9.60024C0.358172 9.60024 0 9.95841 0 10.4002V13.6002C0 14.2368 0.252856 14.8472 0.702944 15.2973C1.15303 15.7474 1.76348 16.0002 2.4 16.0002H13.6C14.2365 16.0002 14.847 15.7474 15.2971 15.2973C15.7471 14.8472 16 14.2368 16 13.6002V10.4002C16 9.95841 15.6418 9.60024 15.2 9.60024C14.7582 9.60024 14.4 9.95841 14.4 10.4002V13.6002C14.4 13.8124 14.3157 14.0159 14.1657 14.1659C14.0157 14.316 13.8122 14.4002 13.6 14.4002H2.4C2.18783 14.4002 1.98434 14.316 1.83431 14.1659C1.68429 14.0159 1.6 13.8124 1.6 13.6002V10.4002Z" fill="#00C891"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/InputSelect/index.tsx b/packages/neuron-ui/src/widgets/InputSelect/index.tsx
index 9265023e7c..5ea0d45ad4 100644
--- a/packages/neuron-ui/src/widgets/InputSelect/index.tsx
+++ b/packages/neuron-ui/src/widgets/InputSelect/index.tsx
@@ -35,7 +35,7 @@ const Select = ({ value, options, placeholder, disabled, onChange, className, in
 
   const onDocumentClick = useCallback(
     (e: any) => {
-      if (mounted.current && !root.current?.contains(e.target) && openRef.current) {
+      if (mounted.current && !root.current?.contains?.(e.target) && openRef.current) {
         setOpen(false)
       }
     },
diff --git a/packages/neuron-ui/src/widgets/Table/index.tsx b/packages/neuron-ui/src/widgets/Table/index.tsx
index db05aa2dcd..569a8340ff 100755
--- a/packages/neuron-ui/src/widgets/Table/index.tsx
+++ b/packages/neuron-ui/src/widgets/Table/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useState, useMemo } from 'react'
 import { PasswordHide, PasswordShow } from 'widgets/Icons/icon'
 import TableNoData from 'widgets/Icons/TableNoData.png'
 
@@ -17,6 +17,7 @@ export type TableProps<T> = {
     align?: 'left' | 'right' | 'center'
     className?: string
     tdClassName?: string
+    hidden?: boolean
   }[]
   dataKey?: string
   dataSource: T[]
@@ -50,6 +51,8 @@ const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
     setExpandedRow(prevIndex => (prevIndex === index ? null : index))
   }
 
+  const columnList = useMemo(() => columns.filter(item => !item.hidden), [columns])
+
   return (
     <div
       className={`${styles.tableRoot} ${className} ${isFixedTable ? styles.fixedTableRoot : ''}`}
@@ -59,32 +62,34 @@ const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
       <table className={`${styles.table} ${head === null || head === undefined ? styles.noHead : ''}`}>
         <thead>
           <tr>
-            {columns.map(({ title, dataIndex, key, isBalance, align, width, minWidth, className: headClassName }) => {
-              return (
-                <th
-                  key={key || dataIndex}
-                  title={typeof title === 'string' ? title : dataIndex}
-                  aria-label={typeof title === 'string' ? title : dataIndex}
-                  data-field={dataIndex}
-                  align={align ?? 'left'}
-                  className={headClassName}
-                  style={{ width, minWidth }}
-                >
-                  {!!dataSource.length && isBalance ? (
-                    <div className={styles.headWithBalance} style={{ justifyContent: align }}>
-                      {title}
-                      {showBalance ? (
-                        <PasswordShow onClick={onClickBalanceIcon} className={styles.balanceIcon} />
-                      ) : (
-                        <PasswordHide onClick={onClickBalanceIcon} className={styles.balanceIcon} />
-                      )}
-                    </div>
-                  ) : (
-                    title
-                  )}
-                </th>
-              )
-            })}
+            {columnList.map(
+              ({ title, dataIndex, key, isBalance, align, width, minWidth, className: headClassName }) => {
+                return (
+                  <th
+                    key={key || dataIndex}
+                    title={typeof title === 'string' ? title : dataIndex}
+                    aria-label={typeof title === 'string' ? title : dataIndex}
+                    data-field={dataIndex}
+                    align={align ?? 'left'}
+                    className={headClassName}
+                    style={{ width, minWidth }}
+                  >
+                    {!!dataSource.length && isBalance ? (
+                      <div className={styles.headWithBalance} style={{ justifyContent: align }}>
+                        {title}
+                        {showBalance ? (
+                          <PasswordShow onClick={onClickBalanceIcon} className={styles.balanceIcon} />
+                        ) : (
+                          <PasswordHide onClick={onClickBalanceIcon} className={styles.balanceIcon} />
+                        )}
+                      </div>
+                    ) : (
+                      title
+                    )}
+                  </th>
+                )
+              }
+            )}
           </tr>
         </thead>
         <tbody>
@@ -98,7 +103,7 @@ const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
                   className={styles.trClassName}
                   data-idx={idx}
                 >
-                  {columns.map(({ dataIndex, key, render, align, className: bodyTdClassName, tdClassName }) => (
+                  {columnList.map(({ dataIndex, key, render, align, className: bodyTdClassName, tdClassName }) => (
                     <td
                       align={align ?? 'left'}
                       key={key ?? dataIndex}
diff --git a/packages/neuron-ui/src/widgets/Tooltip/index.tsx b/packages/neuron-ui/src/widgets/Tooltip/index.tsx
index 8ebb84ee8a..b887f32ce7 100644
--- a/packages/neuron-ui/src/widgets/Tooltip/index.tsx
+++ b/packages/neuron-ui/src/widgets/Tooltip/index.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useState, useRef } from 'react'
+import { useDidMount } from 'utils'
 import styles from './tooltip.module.scss'
 
 export type Placement = 'top' | 'right' | 'left' | 'bottom' | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'
@@ -27,12 +28,29 @@ const Tooltip: React.FC<TooltipProps> = ({
   isTriggerNextToChild,
 }) => {
   const [isTipShow, setIsTipShow] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
   const onChangeIsTipShow = useCallback(() => {
     setIsTipShow(v => !v)
   }, [setIsTipShow])
+
+  const onDocumentClick = useCallback(
+    (e: MouseEvent) => {
+      if (e.target instanceof Node && !ref.current?.contains(e.target)) {
+        setIsTipShow(false)
+      }
+    },
+    [isTipShow]
+  )
+
+  useDidMount(() => {
+    document.addEventListener('click', onDocumentClick, false)
+    return () => document.removeEventListener('click', onDocumentClick, false)
+  })
+
   if (typeof tip === 'string') {
     return (
       <div
+        ref={ref}
         className={`${styles.tipWithString} ${className}`}
         data-tooltip={tip}
         data-placement={placement}
@@ -52,6 +70,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   }
   return (
     <div
+      ref={ref}
       className={`${styles.tipWithNode} ${className}`}
       data-placement={placement}
       data-placement-center={center}
diff --git a/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss b/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss
index d200d26d6d..f4cb436f8b 100644
--- a/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss
+++ b/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss
@@ -15,14 +15,14 @@
 }
 
 @mixin left($class) {
-  &[data-placement="left"] {
+  &[data-placement='left'] {
     &#{$class} {
       right: calc(100% - 4px);
       top: 0;
     }
   }
 
-  &[data-placement="left"][data-placement-center="true"] {
+  &[data-placement='left'][data-placement-center='true'] {
     &#{$class} {
       top: 50%;
       transform: translateY(-50%);
@@ -31,14 +31,14 @@
 }
 
 @mixin right($class) {
-  &[data-placement="right"] {
+  &[data-placement='right'] {
     &#{$class} {
       left: calc(100% - 4px);
       top: 0;
     }
   }
 
-  &[data-placement="right"][data-placement-center="true"] {
+  &[data-placement='right'][data-placement-center='true'] {
     &#{$class} {
       top: 50%;
       transform: translateY(-50%);
@@ -47,14 +47,14 @@
 }
 
 @mixin top($class) {
-  &[data-placement="top"] {
+  &[data-placement='top'] {
     &#{$class} {
       left: 0;
       bottom: 100%;
     }
   }
 
-  &[data-placement="top"][data-placement-center="true"] {
+  &[data-placement='top'][data-placement-center='true'] {
     &#{$class} {
       left: 50%;
       transform: translateX(-50%);
@@ -63,13 +63,13 @@
 }
 
 @mixin bottom($class) {
-  &[data-placement="bottom"] {
+  &[data-placement='bottom'] {
     &#{$class} {
       left: 0;
       top: 100%;
     }
   }
-  &[data-placement="bottom"][data-placement-center="true"]{
+  &[data-placement='bottom'][data-placement-center='true'] {
     &#{$class} {
       left: 50%;
       transform: translateX(-50%);
@@ -78,13 +78,13 @@
 }
 
 @mixin left-top($class) {
-  &[data-placement="left-top"] {
+  &[data-placement='left-top'] {
     &#{$class} {
       right: 100%;
       bottom: 100%;
     }
   }
-  &[data-placement="left-top"][data-placement-center="true"]{
+  &[data-placement='left-top'][data-placement-center='true'] {
     &#{$class} {
       right: 50%;
     }
@@ -92,13 +92,13 @@
 }
 
 @mixin right-top($class) {
-  &[data-placement="right-top"] {
+  &[data-placement='right-top'] {
     &#{$class} {
       left: 100%;
       bottom: 100%;
     }
   }
-  &[data-placement="right-top"][data-placement-center="true"]{
+  &[data-placement='right-top'][data-placement-center='true'] {
     &#{$class} {
       left: 50%;
     }
@@ -106,13 +106,13 @@
 }
 
 @mixin left-bottom($class) {
-  &[data-placement="left-bottom"] {
+  &[data-placement='left-bottom'] {
     &#{$class} {
       right: 100%;
       top: 100%;
     }
   }
-  &[data-placement="left-bottom"][data-placement-center="true"]{
+  &[data-placement='left-bottom'][data-placement-center='true'] {
     &#{$class} {
       right: 50%;
     }
@@ -120,13 +120,13 @@
 }
 
 @mixin right-bottom($class) {
-  &[data-placement="right-bottom"] {
+  &[data-placement='right-bottom'] {
     &#{$class} {
       left: 100%;
       top: 100%;
     }
   }
-  &[data-placement="right-bottom"][data-placement-center="true"]{
+  &[data-placement='right-bottom'][data-placement-center='true'] {
     &#{$class} {
       left: 50%;
     }
@@ -138,19 +138,19 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
 @mixin tip-placement($placement, $class) {
   @if $placement == left {
     @include left($class);
-  }@else if $placement == right {
+  } @else if $placement == right {
     @include right($class);
-  }@else if $placement == top {
+  } @else if $placement == top {
     @include top($class);
-  }@else if $placement == bottom {
+  } @else if $placement == bottom {
     @include bottom($class);
-  }@else if $placement == left-top {
+  } @else if $placement == left-top {
     @include left-top($class);
-  }@else if $placement == right-top {
+  } @else if $placement == right-top {
     @include right-top($class);
-  }@else if $placement == left-bottom {
+  } @else if $placement == left-bottom {
     @include left-bottom($class);
-  }@else if $placement == right-bottom {
+  } @else if $placement == right-bottom {
     @include right-bottom($class);
   }
 }
@@ -188,18 +188,18 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
         content: attr(data-tooltip);
       }
 
-      &[data-type="always-dark"] {
+      &[data-type='always-dark'] {
         &::after {
           background: #000000;
-          color: #FFFFFF;
+          color: #ffffff;
         }
       }
 
       @each $placement in $placements {
-        @include tip-placement($placement, "::after");
+        @include tip-placement($placement, '::after');
       }
 
-      &[data-trigger="hover"] {
+      &[data-trigger='hover'] {
         &:hover {
           &::after {
             display: block;
@@ -210,17 +210,17 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
         }
       }
 
-      &[data-trigger="click"] {
-        &[data-tip-show="true"] .tip {
+      &[data-trigger='click'] {
+        &[data-tip-show='true'] .tip {
           display: block;
         }
       }
 
-      &[data-has-trigger="true"] {
-        &[data-placement="bottom"] {
-          &:not([data-trigger-next-to-child="true"]) {
+      &[data-has-trigger='true'] {
+        &[data-placement='bottom'] {
+          &:not([data-trigger-next-to-child='true']) {
             &::after {
-              top: calc(100% + 20px)
+              top: calc(100% + 20px);
             }
           }
           .triangle {
@@ -241,24 +241,24 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
     @include tip;
   }
 
-  &[data-type="always-dark"] {
+  &[data-type='always-dark'] {
     .tip {
       background: #000000;
-      color: #FFFFFF;
+      color: #ffffff;
     }
   }
 
-  &[data-trigger="click"] {
-    &[data-tip-show="true"] .tip {
+  &[data-trigger='click'] {
+    &[data-tip-show='true'] .tip {
       display: block;
     }
   }
 
   @each $placement in $placements {
-    @include tip-placement($placement, " .tip");
+    @include tip-placement($placement, ' .tip');
   }
 
-  &[data-trigger="hover"] {
+  &[data-trigger='hover'] {
     &:hover {
       .tip {
         display: block;
@@ -269,11 +269,11 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
     }
   }
 
-  &[data-has-trigger="true"] {
-    &[data-placement="bottom"] {
-      &:not([data-trigger-next-to-child="true"]) {
+  &[data-has-trigger='true'] {
+    &[data-placement='bottom'] {
+      &:not([data-trigger-next-to-child='true']) {
         & .tip {
-          top: calc(100% + 20px)
+          top: calc(100% + 20px);
         }
       }
     }
diff --git a/packages/neuron-wallet/src/block-sync-renderer/sync/indexer-cache-service.ts b/packages/neuron-wallet/src/block-sync-renderer/sync/indexer-cache-service.ts
index aee4715bb5..012889fe55 100644
--- a/packages/neuron-wallet/src/block-sync-renderer/sync/indexer-cache-service.ts
+++ b/packages/neuron-wallet/src/block-sync-renderer/sync/indexer-cache-service.ts
@@ -149,10 +149,13 @@ export default class IndexerCacheService {
 
   private async getCachedBlockNumber() {
     if (!this.#cacheBlockNumberEntity) {
-      this.#cacheBlockNumberEntity = (await getConnection().getRepository(SyncInfoEntity).findOne({ name: SyncInfoEntity.getLastCachedKey(this.walletId) })) ?? 
+      this.#cacheBlockNumberEntity =
+        (await getConnection()
+          .getRepository(SyncInfoEntity)
+          .findOne({ name: SyncInfoEntity.getLastCachedKey(this.walletId) })) ??
         SyncInfoEntity.fromObject({
           name: SyncInfoEntity.getLastCachedKey(this.walletId),
-          value: '0x0'
+          value: '0x0',
         })
     }
 
diff --git a/packages/neuron-wallet/src/block-sync-renderer/sync/queue.ts b/packages/neuron-wallet/src/block-sync-renderer/sync/queue.ts
index aa927a6bc4..506af6dc94 100644
--- a/packages/neuron-wallet/src/block-sync-renderer/sync/queue.ts
+++ b/packages/neuron-wallet/src/block-sync-renderer/sync/queue.ts
@@ -45,11 +45,15 @@ export default class Queue {
     this.#lockHashes = AddressParser.batchToLockHash(this.#addresses.map(meta => meta.address))
 
     const blake160s = this.#addresses.map(meta => meta.blake160)
-    this.#lockArgsSet = new Set(blake160s.map(blake160 => [
-      blake160,
-      Multisig.hash([blake160]),
-      SystemScriptInfo.generateSecpScript(blake160).computeHash().slice(0, 42)
-    ]).flat())
+    this.#lockArgsSet = new Set(
+      blake160s
+        .map(blake160 => [
+          blake160,
+          Multisig.hash([blake160]),
+          SystemScriptInfo.generateSecpScript(blake160).computeHash().slice(0, 42),
+        ])
+        .flat()
+    )
     this.#multiSignBlake160s = blake160s.map(blake160 => Multisig.hash([blake160]))
     this.#anyoneCanPayLockHashes = blake160s.map(b =>
       this.#assetAccountInfo.generateAnyoneCanPayScript(b).computeHash()
diff --git a/packages/neuron-wallet/src/controllers/api.ts b/packages/neuron-wallet/src/controllers/api.ts
index 458bccacec..37ff3ee885 100644
--- a/packages/neuron-wallet/src/controllers/api.ts
+++ b/packages/neuron-wallet/src/controllers/api.ts
@@ -45,7 +45,7 @@ import {
   UpdateAssetAccountParams,
   MigrateACPParams,
   GenerateCreateChequeTxParams,
-  GenerateClaimChequeTxParams
+  GenerateClaimChequeTxParams,
 } from './asset-account'
 import AnyoneCanPayController from './anyone-can-pay'
 import { GenerateAnyoneCanPayTxParams, SendAnyoneCanPayTxParams } from './anyone-can-pay'
@@ -228,7 +228,7 @@ export default class ApiController {
         addresses,
         transactions,
         syncedBlockNumber,
-        connectionStatus
+        connectionStatus,
       }
 
       return { status: ResponseCode.Success, result: initState }
@@ -271,14 +271,14 @@ export default class ApiController {
     handle('is-dark', async () => {
       return {
         status: ResponseCode.Success,
-        result: nativeTheme.shouldUseDarkColors
+        result: nativeTheme.shouldUseDarkColors,
       }
     })
 
     handle('set-theme', async (_, theme: 'system' | 'light' | 'dark') => {
       SettingsService.getInstance().themeSource = theme
       return {
-        status: ResponseCode.Success
+        status: ResponseCode.Success,
       }
     })
 
@@ -579,7 +579,7 @@ export default class ApiController {
         })
         if (response === 1) {
           return {
-            status: ResponseCode.Fail
+            status: ResponseCode.Fail,
           }
         }
       }
@@ -595,14 +595,14 @@ export default class ApiController {
     handle('start-process-monitor', (_, monitorName: string) => {
       startMonitor(monitorName, true)
       return {
-        status: ResponseCode.Success
+        status: ResponseCode.Success,
       }
     })
 
     handle('stop-process-monitor', async (_, monitorName: string) => {
       await Promise.race([stopMonitor(monitorName), CommonUtils.sleep(1000)])
       return {
-        status: ResponseCode.Success
+        status: ResponseCode.Success,
       }
     })
 
@@ -788,7 +788,7 @@ export default class ApiController {
     handle('start-migrate', async () => {
       migrateCkbData()
       return {
-        status: ResponseCode.Success
+        status: ResponseCode.Success,
       }
     })
 
@@ -824,7 +824,7 @@ export default class ApiController {
           if (!Number.isNaN(+e.code)) {
             return {
               status: ResponseCode.Fail,
-              message: e.message || err.message
+              message: e.message || err.message,
             }
           }
         } catch {
@@ -833,7 +833,7 @@ export default class ApiController {
 
         return {
           status: err.code || ResponseCode.Fail,
-          message: typeof err.message === 'string' ? { content: CommonUtils.tryParseError(err.message) } : err.message
+          message: typeof err.message === 'string' ? { content: CommonUtils.tryParseError(err.message) } : err.message,
         }
       }
     })
diff --git a/packages/neuron-wallet/src/controllers/app/menu.ts b/packages/neuron-wallet/src/controllers/app/menu.ts
index 83a5f3d51d..7c014bf087 100644
--- a/packages/neuron-wallet/src/controllers/app/menu.ts
+++ b/packages/neuron-wallet/src/controllers/app/menu.ts
@@ -5,7 +5,6 @@ import { t } from 'i18next'
 import env from '../../env'
 import UpdateController from '../../controllers/update'
 import ExportDebugController from '../../controllers/export-debug'
-import { showWindow } from '../../controllers/app/show-window'
 import WalletsService from '../../services/wallets'
 import OfflineSignService from '../../services/offline-sign'
 import CommandSubject from '../../models/subjects/command'
@@ -23,7 +22,7 @@ enum URL {
   ImportMnemonic = '/wizard/mnemonic/import',
   ImportKeystore = '/keystore/import',
   ImportHardware = '/import-hardware',
-  OfflineSign = '/offline-sign',
+  OfflineSign = 'offline-sign',
 }
 
 enum ExternalURL {
@@ -143,7 +142,7 @@ const updateApplicationMenu = (mainWindow: BrowserWindow | null) => {
         enabled: isMainWindow && !UpdateController.isChecking,
         click: () => {
           navigateTo(`${URL.Settings}?checkUpdate=1`)
-        }
+        },
       },
       separator,
       {
@@ -301,38 +300,31 @@ const updateApplicationMenu = (mainWindow: BrowserWindow | null) => {
       {
         label: t('application-menu.tools.sign-and-verify'),
         enabled: hasCurrentWallet,
-        click: async () => {
-          const result = await walletsService.getCurrent()
-          if (!result) {
-            return
-          }
+        click: () => {
           const window = BrowserWindow.getFocusedWindow()
           if (window) {
             CommandSubject.next({
               winID: window.id,
               type: 'sign-verify',
-              payload: currentWallet!.id,
-              dispatchToUI: true
+              payload: null,
+              dispatchToUI: true,
             })
           }
-        }
+        },
       },
       {
         label: t('application-menu.tools.multisig-address'),
         enabled: hasCurrentWallet,
         click: () => {
-          const currentWallet = walletsService.getCurrent()
-          showWindow(
-            `#/multisig-address/${currentWallet!.id}`,
-            t(`messageBox.multisig-address.title`),
-            {
-              width: 1000,
-              maxWidth: 1000,
-              minWidth: 1000,
-              resizable: true,
-            },
-            ['multisig-output-update']
-          )
+          const window = BrowserWindow.getFocusedWindow()
+          if (window) {
+            CommandSubject.next({
+              winID: window.id,
+              type: 'multisig-address',
+              payload: null,
+              dispatchToUI: true,
+            })
+          }
         },
       },
       {
@@ -480,7 +472,7 @@ const updateApplicationMenu = (mainWindow: BrowserWindow | null) => {
       enabled: isMainWindow && !UpdateController.isChecking,
       click: () => {
         navigateTo(`${URL.Settings}?checkUpdate=1`)
-      }
+      },
     })
     helpSubmenu.push({
       id: 'about',
diff --git a/packages/neuron-wallet/src/controllers/multisig.ts b/packages/neuron-wallet/src/controllers/multisig.ts
index 43dd200504..8f3cb76796 100644
--- a/packages/neuron-wallet/src/controllers/multisig.ts
+++ b/packages/neuron-wallet/src/controllers/multisig.ts
@@ -70,21 +70,10 @@ export default class MultisigController {
   }
 
   async deleteConfig(id: number) {
-    const { response } = await dialog.showMessageBox(BrowserWindow.getFocusedWindow()!, {
-      message: t('multisig-config.confirm-delete'),
-      type: 'question',
-      buttons: [t('multisig-config.delete-actions.ok'), t('multisig-config.delete-actions.cancel')],
-    })
-    if (response === 0) {
-      await this.#multisigService.deleteConfig(id)
-      return {
-        status: ResponseCode.Success,
-        result: true,
-      }
-    }
+    await this.#multisigService.deleteConfig(id)
     return {
       status: ResponseCode.Success,
-      result: false,
+      result: true
     }
   }
 
@@ -139,8 +128,8 @@ export default class MultisigController {
         message: t('multisig-config.import-result', {
           success: saveSuccessConfigs.length,
           fail: savedResult.length - saveSuccessConfigs.length,
-          failCheck: savedResult.length > saveSuccessConfigs.length ? t('multisig-config.import-duplicate') : undefined,
-        }),
+          failCheck: savedResult.length > saveSuccessConfigs.length ? t('multisig-config.import-duplicate') : undefined
+        })
       })
       return {
         status: ResponseCode.Success,
@@ -210,7 +199,7 @@ export default class MultisigController {
     const result = await OfflineSignService.loadTransactionJSON()
     if (!result) {
       return {
-        status: ResponseCode.Fail,
+        status: ResponseCode.Fail
       }
     }
     const tx = result.json
diff --git a/packages/neuron-wallet/src/database/chain/entities/sync-info.ts b/packages/neuron-wallet/src/database/chain/entities/sync-info.ts
index 9bbd26bf8a..c64813204e 100644
--- a/packages/neuron-wallet/src/database/chain/entities/sync-info.ts
+++ b/packages/neuron-wallet/src/database/chain/entities/sync-info.ts
@@ -13,11 +13,8 @@ export default class SyncInfo {
     type: 'varchar',
   })
   value!: string
-  
-  static fromObject(params: {
-    name: string,
-    value: string
-  }) {
+
+  static fromObject(params: { name: string; value: string }) {
     const res = new SyncInfo()
     res.name = params.name
     res.value = params.value
diff --git a/packages/neuron-wallet/src/database/chain/entities/tx-lock.ts b/packages/neuron-wallet/src/database/chain/entities/tx-lock.ts
index 61aa2b0058..db700983b0 100644
--- a/packages/neuron-wallet/src/database/chain/entities/tx-lock.ts
+++ b/packages/neuron-wallet/src/database/chain/entities/tx-lock.ts
@@ -3,7 +3,7 @@ import { BaseEntity, Entity, PrimaryColumn } from 'typeorm'
 @Entity()
 export default class TxLock extends BaseEntity {
   @PrimaryColumn({
-    type: 'varchar'
+    type: 'varchar',
   })
   transactionHash!: string
 
@@ -11,11 +11,8 @@ export default class TxLock extends BaseEntity {
     type: 'varchar',
   })
   lockHash!: string
-  
-  static fromObject(obj: {
-    txHash: string
-    lockHash: string
-  }) {
+
+  static fromObject(obj: { txHash: string; lockHash: string }) {
     const res = new TxLock()
     res.transactionHash = obj.txHash
     res.lockHash = obj.lockHash
diff --git a/packages/neuron-wallet/src/database/chain/index.ts b/packages/neuron-wallet/src/database/chain/index.ts
index 69aebff209..74e755a62f 100644
--- a/packages/neuron-wallet/src/database/chain/index.ts
+++ b/packages/neuron-wallet/src/database/chain/index.ts
@@ -16,9 +16,7 @@ import TxLock from './entities/tx-lock'
 export const clean = async (clearAllLightClientData?: boolean) => {
   await Promise.all([
     ...[InputEntity, OutputEntity, TransactionEntity, IndexerTxHashCache, MultisigOutput, TxLock].map(entity => {
-      return getConnection()
-        .getRepository(entity)
-        .clear()
+      return getConnection().getRepository(entity).clear()
     }),
     clearAllLightClientData
       ? getConnection().getRepository(SyncProgress).clear()
diff --git a/packages/neuron-wallet/src/models/subjects/command.ts b/packages/neuron-wallet/src/models/subjects/command.ts
index 8a2ee9e2d2..f840618928 100644
--- a/packages/neuron-wallet/src/models/subjects/command.ts
+++ b/packages/neuron-wallet/src/models/subjects/command.ts
@@ -12,6 +12,7 @@ const CommandSubject = new Subject<{
     | 'load-transaction-json'
     | 'migrate-acp'
     | 'sign-verify'
+    | 'multisig-address'
   payload: string | null
   dispatchToUI: boolean
 }>()
diff --git a/packages/neuron-wallet/src/services/asset-account-service.ts b/packages/neuron-wallet/src/services/asset-account-service.ts
index 4c20080786..a7a7c2b43b 100644
--- a/packages/neuron-wallet/src/services/asset-account-service.ts
+++ b/packages/neuron-wallet/src/services/asset-account-service.ts
@@ -261,17 +261,12 @@ export default class AssetAccountService {
       .createQueryBuilder()
       .where({
         tokenID,
-        blake160
+        blake160,
       })
       .getCount()
     // check whether the entity exists before insert. Reason: https://github.com/Magickbase/neuron-public-issues/issues/184#issue-1749746997
     if (!existAccountAccount) {
-      await getConnection()
-        .createQueryBuilder()
-        .insert()
-        .into(AssetAccountEntity)
-        .values(assetAccountEntity)
-        .execute()
+      await getConnection().createQueryBuilder().insert().into(AssetAccountEntity).values(assetAccountEntity).execute()
     }
   }
 
diff --git a/packages/neuron-wallet/tests/controllers/multisig.test.ts b/packages/neuron-wallet/tests/controllers/multisig.test.ts
index 6b793af56e..be977b1c88 100644
--- a/packages/neuron-wallet/tests/controllers/multisig.test.ts
+++ b/packages/neuron-wallet/tests/controllers/multisig.test.ts
@@ -146,12 +146,6 @@ describe('test for multisig controller', () => {
   })
 
   describe('test delete config', () => {
-    it('cancel delete config', async () => {
-      response = 1
-      const result = await multisigController.deleteConfig(10)
-      expect(MultiSigServiceMock.prototype.deleteConfig).not.toHaveBeenCalled()
-      expect(result.result).toBeFalsy()
-    })
     it('confirm delete config', async () => {
       const result = await multisigController.deleteConfig(10)
       expect(MultiSigServiceMock.prototype.deleteConfig).toHaveBeenCalled()