diff --git a/packages/neuron-ui/public/css/fonts.css b/packages/neuron-ui/public/css/fonts.css
index cac08b5ad6..f461d01884 100644
--- a/packages/neuron-ui/public/css/fonts.css
+++ b/packages/neuron-ui/public/css/fonts.css
@@ -18,4 +18,10 @@
   font-family: 'ProximaNova-Semibold';
   src: url('../fonts/ProximaNova-Semibold.otf') format('opentype'),
       url('../fonts/ProximaNova-Semibold.ttf') format('opentype');
-}
\ No newline at end of file
+}
+
+@font-face {
+  font-family: 'D-DIN-PRO';
+  src: url('../fonts/D-DIN-PRO-500-Medium.otf') format('opentype'),
+      url('../fonts/D-DIN-PRO-500-Medium.ttf') format('opentype');
+}
diff --git a/packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.otf b/packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.otf
new file mode 100755
index 0000000000..d72d454eb9
Binary files /dev/null and b/packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.otf differ
diff --git a/packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.ttf b/packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.ttf
new file mode 100755
index 0000000000..ca0abecb19
Binary files /dev/null and b/packages/neuron-ui/public/fonts/D-DIN-PRO-500-Medium.ttf differ
diff --git a/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss b/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss
index a1563ce800..b88f591b6c 100644
--- a/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss
+++ b/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss
@@ -1,55 +1,7 @@
-$arrow: 10px;
+.confirm {
+  margin-left: 4px;
 
-.container {
-  display: inline;
-  position: relative;
-  font-size: 0.75rem;
-  color: var(--nervos-green);
-  border-radius: 2px;
-  z-index: 1;
-
-  svg {
-    width: 1rem;
-    height: 0.75rem;
-    pointer-events: none;
-    position: relative;
-    top: 1px;
-  }
-
-  &::after {
-    display: none;
-    content: attr(data-content);
-    position: absolute;
-    top: calc(100% + 7px);
-    left: 50%;
-    transform: translateX(-50%);
-    background: #fff;
-    font-size: 0.75rem;
-    color: #000000;
-    padding: 10px 15px;
-    box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
-    min-width: 150px;
-    pointer-events: none;
-  }
-
-  &::before {
-    z-index: 1;
-    display: none;
-    content: '';
-    top: 2px;
-    left: 50%;
-    transform: translateX(-50%);
-    position: absolute;
-    border: $arrow solid transparent;
-    border-bottom-color: #fff;
-    filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.12));
-    pointer-events: none;
-  }
-
-  &:hover {
-    &::after,
-    &::before {
-      display: block;
-    }
+  path {
+    fill: #FFFFFF;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx b/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx
index be761394e2..ce4884e44a 100644
--- a/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx
+++ b/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { ConnectionStatus, SyncStatus } from 'utils'
-import { ReactComponent as BalanceSyncing } from 'widgets/Icons/BalanceSyncing.svg'
-import { ReactComponent as BalanceSyncFailed } from 'widgets/Icons/BalanceSyncFailed.svg'
+import { Confirming } from 'widgets/Icons/icon'
 import styles from './balanceSyncIcon.module.scss'
 
 export interface BalanceSyncIconProps {
@@ -11,40 +9,14 @@ export interface BalanceSyncIconProps {
 }
 
 const BalanceSyncIcon = ({ connectionStatus, syncStatus }: BalanceSyncIconProps) => {
-  const [t] = useTranslation()
-  if (ConnectionStatus.Connecting === connectionStatus) {
-    return (
-      <div className={styles.container} data-content={t('sync.connecting')}>
-        <BalanceSyncing />
-      </div>
-    )
+  if (ConnectionStatus.Connecting === connectionStatus || ConnectionStatus.Offline === connectionStatus) {
+    return <Confirming className={styles.confirm} />
   }
-  if (ConnectionStatus.Offline === connectionStatus) {
-    return (
-      <div className={styles.container} data-content={t('sync.sync-failed')}>
-        <BalanceSyncFailed />
-      </div>
-    )
-  }
-
   switch (syncStatus) {
-    case SyncStatus.SyncNotStart: {
-      return (
-        <div className={styles.container} data-content={t('sync.sync-not-start')}>
-          <BalanceSyncFailed />
-        </div>
-      )
-    }
-    case SyncStatus.Syncing:
-    case SyncStatus.SyncPending: {
-      return (
-        <div className={styles.container} data-content={t('sync.syncing-balance')}>
-          <BalanceSyncing />
-        </div>
-      )
-    }
-    default: {
+    case SyncStatus.SyncCompleted:
       return null
+    default: {
+      return <Confirming className={styles.confirm} />
     }
   }
 }
diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx
index cb615e7eeb..d845f8fc6e 100644
--- a/packages/neuron-ui/src/components/Overview/index.tsx
+++ b/packages/neuron-ui/src/components/Overview/index.tsx
@@ -1,8 +1,6 @@
-import React, { useCallback, useMemo, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
+import React, { useCallback, useMemo, useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
-import Balance from 'components/Balance'
-import PageContainer from 'components/PageContainer'
 import { showTransactionDetails } from 'services/remote'
 import { useState as useGlobalState, useDispatch, updateTransactionList } from 'states'
 
@@ -15,13 +13,20 @@ import {
   backToTop,
   CONSTANTS,
   RoutePath,
-  getCurrentUrl,
-  getSyncStatus,
   nftFormatter,
   useFirstLoadApp,
 } from 'utils'
 
 import { UANTokenName, UANTonkenSymbol } from 'components/UANDisplay'
+import PageContainer from 'components/PageContainer'
+import Table from 'widgets/Table'
+import { ReactComponent as Send } from 'widgets/Icons/OverviewSend.svg'
+import { ReactComponent as Receive } from 'widgets/Icons/OverviewReceive.svg'
+import { ReactComponent as BalanceRight } from 'widgets/Icons/BalanceRight.svg'
+import { ArrowOpenRight, Confirming, PasswordHide, PasswordShow } from 'widgets/Icons/icon'
+import BalanceSyncIcon from 'components/BalanceSyncingIcon'
+import CopyZone from 'widgets/CopyZone'
+import { HIDE_BALANCE } from 'utils/const'
 import styles from './overview.module.scss'
 
 const { PAGE_SIZE, CONFIRMATION_THRESHOLD } = CONSTANTS
@@ -55,30 +60,159 @@ const genTypeLabel = (
   }
 }
 
+const TransactionStatus = ({
+  item,
+  cacheTipBlockNumber,
+  bestKnownBlockNumber,
+}: {
+  item: Omit<State.Transaction, 'status'> & { status: State.Transaction['status'] | 'confirming' }
+  cacheTipBlockNumber: number
+  bestKnownBlockNumber: number
+}) => {
+  const [t] = useTranslation()
+  let confirmations = ''
+  let { status } = item
+  if (item.blockNumber !== undefined) {
+    const confirmationCount =
+      item.blockNumber === null || item.status === 'failed'
+        ? 0
+        : 1 + Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - +item.blockNumber
+
+    if (status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD) {
+      status = 'confirming'
+
+      if (confirmationCount === 1) {
+        confirmations = t('overview.confirmation', {
+          confirmationCount: localNumberFormatter(confirmationCount),
+        })
+      } else if (confirmationCount > 1) {
+        confirmations = `${t('overview.confirmations', {
+          confirmationCount: localNumberFormatter(confirmationCount),
+        })}`
+      }
+    }
+  }
+  return (
+    <div className={styles.txStatus} data-status={status}>
+      {status === 'confirming' ? <Confirming className={styles.confirm} /> : null}
+      <span>{t(`overview.statusLabel.${status}`)}</span>
+      {confirmations ? <span className={styles.confirmText}>{confirmations}</span> : null}
+    </div>
+  )
+}
+
+const Amount = ({ item, show }: { item: State.Transaction; show: boolean }) => {
+  let amount = '--'
+  let sudtAmount = ''
+  let isReceive = false
+
+  if (item.blockNumber !== undefined) {
+    if (item.nftInfo) {
+      // NFT
+      const { type, data } = item.nftInfo
+      amount = show ? `${type === 'receive' ? '+' : '-'}${nftFormatter(data)}` : `${HIDE_BALANCE}mNFT`
+      isReceive = type === 'receive'
+    } else if (item.sudtInfo?.sUDT) {
+      if (item.sudtInfo.sUDT.decimal) {
+        sudtAmount = sUDTAmountFormatter(sudtValueToAmount(item.sudtInfo.amount, item.sudtInfo.sUDT.decimal))
+      }
+    } else {
+      amount = show ? `${shannonToCKBFormatter(item.value, true)} CKB` : `${HIDE_BALANCE} CKB`
+      isReceive = !amount.includes('-')
+    }
+  }
+  return sudtAmount ? (
+    <>
+      {show ? sudtAmount : HIDE_BALANCE}&nbsp;
+      <UANTonkenSymbol
+        className={styles.symbol}
+        name={item.sudtInfo!.sUDT.tokenName}
+        symbol={item.sudtInfo!.sUDT.symbol}
+      />
+    </>
+  ) : (
+    <span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>
+  )
+}
+
+const TracsactionType = ({
+  item,
+  cacheTipBlockNumber,
+  bestKnownBlockNumber,
+}: {
+  item: Omit<State.Transaction, 'status'> & { status: State.Transaction['status'] | 'confirming' }
+  cacheTipBlockNumber: number
+  bestKnownBlockNumber: number
+}) => {
+  const [t] = useTranslation()
+  let typeLabel: string = '--'
+  let { status } = item
+  let typeTransProps: {
+    i18nKey: string
+    components: JSX.Element[]
+  } = {
+    i18nKey: '',
+    components: [],
+  }
+
+  if (item.blockNumber !== undefined) {
+    const confirmationCount =
+      item.blockNumber === null || item.status === 'failed'
+        ? 0
+        : 1 + Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - +item.blockNumber
+
+    if (status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD) {
+      status = 'confirming'
+    }
+    if (item.nftInfo) {
+      // NFT
+      const { type } = item.nftInfo
+      typeLabel = `${t(`overview.${genTypeLabel(type, status)}`)}`
+    } else if (item.sudtInfo?.sUDT) {
+      // Asset Account
+      if (['create', 'destroy'].includes(item.type)) {
+        // create/destroy an account
+        typeTransProps = {
+          i18nKey: `overview.${item.type}SUDT`,
+          components: [
+            <UANTokenName
+              name={item.sudtInfo.sUDT.tokenName}
+              symbol={item.sudtInfo.sUDT.symbol}
+              className={styles.tokenName}
+            />,
+          ],
+        }
+      } else {
+        // send/receive to/from an account
+        const type = +item.sudtInfo.amount <= 0 ? 'send' : 'receive'
+        typeLabel = `UDT ${t(`overview.${genTypeLabel(type, status)}`)}`
+      }
+    } else if (item.type === 'create' || item.type === 'destroy') {
+      // normal tx
+      if (item.assetAccountType === 'CKB') {
+        typeLabel = `${t(`overview.${item.type}`, { name: 'CKB' })}`
+      } else {
+        typeLabel = `${t(`overview.${item.type}`, { name: 'Unknown' })}`
+      }
+    } else {
+      typeLabel = item.nervosDao ? 'Nervos DAO' : t(`overview.${genTypeLabel(item.type, status)}`)
+    }
+  }
+  return typeTransProps.i18nKey ? <Trans {...typeTransProps} /> : <>{typeLabel}</>
+}
+
 const Overview = () => {
   const {
     app: { pageNotice },
     wallet: { id, balance = '' },
     chain: {
-      syncState: { cacheTipBlockNumber, bestKnownBlockNumber, bestKnownBlockTimestamp },
+      syncState: { cacheTipBlockNumber, bestKnownBlockNumber, syncStatus },
       transactions: { items = [] },
       connectionStatus,
-      networkID,
     },
-    settings: { networks },
   } = useGlobalState()
   const dispatch = useDispatch()
   const [t] = useTranslation()
-  const navigate = useNavigate()
-  useFirstLoadApp(dispatch)
-
-  const syncStatus = getSyncStatus({
-    bestKnownBlockNumber,
-    bestKnownBlockTimestamp,
-    cacheTipBlockNumber,
-    currentTimestamp: Date.now(),
-    url: getCurrentUrl(networkID, networks),
-  })
 
   useEffect(() => {
     if (id) {
@@ -94,14 +228,10 @@ const Overview = () => {
       walletID: id,
     })(dispatch)
   }, [id, dispatch])
-  const onGoToHistory = useCallback(() => {
-    navigate(RoutePath.History)
-  }, [navigate])
 
-  const onRecentActivityDoubleClick = useCallback((e: React.SyntheticEvent) => {
-    const cellElement = e.target as HTMLTableCellElement
-    if (cellElement?.parentElement?.dataset?.hash) {
-      showTransactionDetails(cellElement.parentElement.dataset.hash)
+  const onRecentActivityDoubleClick = useCallback((_, item: State.Transaction) => {
+    if (item?.hash) {
+      showTransactionDetails(item?.hash)
     }
   }, [])
 
@@ -109,190 +239,103 @@ const Overview = () => {
     return items.slice(0, 10)
   }, [items])
 
-  const RecentActivites = useMemo(() => {
-    const activities = recentItems.map(item => {
-      let confirmations = ''
-      let typeLabel: string = '--'
-      let amount = '--'
-      let amountValue = ''
-      let { status } = item
-      let typeTransProps: {
-        i18nKey: string
-        components: JSX.Element[]
-      } = {
-        i18nKey: '',
-        components: [],
-      }
-
-      if (item.blockNumber !== undefined) {
-        const confirmationCount =
-          item.blockNumber === null || item.status === 'failed'
-            ? 0
-            : 1 + Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - +item.blockNumber
-
-        if (status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD) {
-          status = 'confirming' as any
-
-          if (confirmationCount === 1) {
-            confirmations = t('overview.confirmation', {
-              confirmationCount: localNumberFormatter(confirmationCount),
-            })
-          } else if (confirmationCount > 1) {
-            confirmations = `${t('overview.confirmations', {
-              confirmationCount: localNumberFormatter(confirmationCount),
-            })}`
-          }
-        }
-
-        if (item.nftInfo) {
-          // NFT
-          const { type, data } = item.nftInfo
-          typeLabel = `${t(`overview.${genTypeLabel(type, status)}`)}`
-          amount = `${type === 'receive' ? '+' : '-'}${nftFormatter(data)}`
-        } else if (item.sudtInfo?.sUDT) {
-          // Asset Account
-          if (['create', 'destroy'].includes(item.type)) {
-            // create/destroy an account
-            typeTransProps = {
-              i18nKey: `overview.${item.type}SUDT`,
-              components: [
-                <UANTokenName
-                  name={item.sudtInfo.sUDT.tokenName}
-                  symbol={item.sudtInfo.sUDT.symbol}
-                  className={styles.tokenName}
-                />,
-              ],
-            }
-          } else {
-            // send/receive to/from an account
-            const type = +item.sudtInfo.amount <= 0 ? 'send' : 'receive'
-            typeLabel = `UDT ${t(`overview.${genTypeLabel(type, status)}`)}`
-          }
-          if (item.sudtInfo.sUDT.decimal) {
-            amount = `${sUDTAmountFormatter(sudtValueToAmount(item.sudtInfo.amount, item.sudtInfo.sUDT.decimal))} ${
-              item.sudtInfo.sUDT.symbol
-            }`
-            amountValue = sUDTAmountFormatter(sudtValueToAmount(item.sudtInfo.amount, item.sudtInfo.sUDT.decimal))
-          }
-        } else {
-          // normal tx
-          amount = `${shannonToCKBFormatter(item.value)} CKB`
-          if (item.type === 'create' || item.type === 'destroy') {
-            if (item.assetAccountType === 'CKB') {
-              typeLabel = `${t(`overview.${item.type}`, { name: 'CKB' })}`
-            } else {
-              typeLabel = `${t(`overview.${item.type}`, { name: 'Unknown' })}`
-            }
-          } else {
-            typeLabel = item.nervosDao ? 'Nervos DAO' : t(`overview.${genTypeLabel(item.type, status)}`)
-          }
-        }
-      }
-
-      return {
-        ...item,
-        status,
-        statusLabel: t(`overview.statusLabel.${status}`),
-        amount,
-        confirmations,
-        typeLabel,
-        amountValue,
-        typeTransProps,
-      }
-    })
-    return (
-      <div className={styles.recentActivities}>
-        <table>
-          <thead>
-            <tr>
-              {['date', 'type', 'amount', 'status'].map(field => {
-                const title = t(`overview.${field}`)
-                return (
-                  <th key={field} title={title} aria-label={title} data-field={field}>
-                    {title}
-                  </th>
-                )
-              })}
-            </tr>
-          </thead>
-          <tbody>
-            {activities.map(item => {
-              const {
-                confirmations,
-                createdAt,
-                status,
-                hash,
-                statusLabel,
-                timestamp,
-                typeLabel,
-                amount,
-                typeTransProps,
-                amountValue,
-                sudtInfo,
-              } = item
-              const time = uniformTimeFormatter(timestamp || createdAt)
+  useFirstLoadApp(dispatch)
 
-              return (
-                <tr data-hash={hash} onDoubleClick={onRecentActivityDoubleClick} key={hash}>
-                  <td title={time}>{time.split(' ')[0]}</td>
-                  {typeTransProps.i18nKey ? (
-                    <td>
-                      <Trans {...typeTransProps} />
-                    </td>
-                  ) : (
-                    <td>{typeLabel}</td>
-                  )}
-                  {amountValue ? (
-                    <td>
-                      {amountValue}&nbsp;
-                      <UANTonkenSymbol
-                        className={styles.symbol}
-                        name={sudtInfo!.sUDT.tokenName}
-                        symbol={sudtInfo!.sUDT.symbol}
-                      />
-                    </td>
-                  ) : (
-                    <td>{amount}</td>
-                  )}
-                  <td className={styles.txStatus} data-status={status}>
-                    <div>
-                      <span>{statusLabel}</span>
-                      {confirmations ? <span>{confirmations}</span> : null}
-                    </div>
-                  </td>
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
-      </div>
-    )
-  }, [recentItems, cacheTipBlockNumber, bestKnownBlockNumber, t, onRecentActivityDoubleClick])
+  const [showBalance, setShowBalance] = useState(true)
+  const onChangeShowBalance = useCallback(() => {
+    setShowBalance(v => !v)
+  }, [setShowBalance])
 
   return (
     <PageContainer head={t('navbar.overview')} notice={pageNotice}>
-      <div className={styles.overview}>
-        <h1 className={styles.pageTitle}>{t('navbar.overview')}</h1>
+      <div className={styles.mid}>
         <div className={styles.balance}>
-          <Balance balance={balance} connectionStatus={connectionStatus} syncStatus={syncStatus} />
+          <span className={styles.balanceTitle}>
+            {t('overview.balance')}
+            {showBalance && <PasswordShow onClick={onChangeShowBalance} className={styles.balanceIcon} />}
+            {!!showBalance || <PasswordHide onClick={onChangeShowBalance} className={styles.balanceIcon} />}
+          </span>
+          <CopyZone content={shannonToCKBFormatter(balance, false, '')} className={styles.copyBalance}>
+            <span className={styles.balanceValue}>{showBalance ? shannonToCKBFormatter(balance) : HIDE_BALANCE}</span>
+          </CopyZone>
+          <span className={styles.balanceUnit}>CKB</span>
+          <BalanceSyncIcon connectionStatus={connectionStatus} syncStatus={syncStatus} />
+          <BalanceRight className={styles.backgroundImg} />
         </div>
-
-        <h2 className={styles.recentActivitiesTitle}>{t('overview.recent-activities')}</h2>
-        {items.length ? (
-          <>
-            {RecentActivites}
-            {items.length > 10 ? (
-              <div className={styles.linkToHistory}>
-                <span role="link" onClick={onGoToHistory} onKeyPress={() => {}} tabIndex={0}>
-                  {t('overview.more')}
-                </span>
-              </div>
-            ) : null}
-          </>
-        ) : (
-          <div className={styles.noActivities}>{t('overview.no-recent-activities')}</div>
-        )}
+        <Link className={styles.send} to={RoutePath.Send}>
+          <Send />
+          <div>{t('overview.send')}</div>
+        </Link>
+        <Link className={styles.receive} to={RoutePath.Receive}>
+          <Receive />
+          <div>{t('overview.receive')}</div>
+        </Link>
       </div>
+      <Table
+        head={
+          <div className={styles.transactionTablleHead}>
+            <h2 className={styles.recentActivitiesTitle}>{t('overview.recent-activities')}</h2>
+            {items.length > 10 && (
+              <Link className={styles.linkToHistory} to={RoutePath.History}>
+                {t('overview.more')}
+                <ArrowOpenRight />
+              </Link>
+            )}
+          </div>
+        }
+        columns={[
+          {
+            title: t('overview.date'),
+            dataIndex: 'date',
+            align: 'left',
+            render: (_, __, item) => {
+              const time = uniformTimeFormatter(item.timestamp || item.createdAt)
+              return time.split(' ')[0]
+            },
+          },
+          {
+            title: t('overview.type'),
+            dataIndex: 'type',
+            align: 'left',
+            render(_, __, item) {
+              return (
+                <TracsactionType
+                  item={item}
+                  cacheTipBlockNumber={cacheTipBlockNumber}
+                  bestKnownBlockNumber={bestKnownBlockNumber}
+                />
+              )
+            },
+          },
+          {
+            title: t('overview.amount'),
+            dataIndex: 'amount',
+            align: 'left',
+            isBalance: true,
+            render(_, __, item, show) {
+              return <Amount item={item} show={show} />
+            },
+          },
+          {
+            title: t('overview.status'),
+            dataIndex: 'status',
+            align: 'left',
+            className: styles.txStatusTh,
+            render(_, __, item) {
+              return (
+                <TransactionStatus
+                  item={item}
+                  cacheTipBlockNumber={cacheTipBlockNumber}
+                  bestKnownBlockNumber={bestKnownBlockNumber}
+                />
+              )
+            },
+          },
+        ]}
+        dataSource={recentItems}
+        noDataContent={t('overview.no-recent-activities')}
+        onRowDoubleClick={onRecentActivityDoubleClick}
+      />
     </PageContainer>
   )
 }
diff --git a/packages/neuron-ui/src/components/Overview/overview.module.scss b/packages/neuron-ui/src/components/Overview/overview.module.scss
index 140b41296b..13e95aee6a 100644
--- a/packages/neuron-ui/src/components/Overview/overview.module.scss
+++ b/packages/neuron-ui/src/components/Overview/overview.module.scss
@@ -1,182 +1,111 @@
 @import '../../styles/mixin.scss';
+@import '../../styles/theme.scss';
 
-$success-color: #3cc68a;
-$failed-color: #d50000;
-$pending-color: #b3b3b3;
-$confirming-color: #b3b3b3;
-
-.overview {
+.mid {
+  height: 200px;
   display: grid;
   grid-template:
-    'page-title page-title' auto
-    'balance balance' auto
-    'activities-title activities-title' auto
-    'activities activities' auto
-    'more-link more-link' auto/
-    1fr auto;
-}
-
-.pageTitle,
-.recentActivitiesTitle {
-  @include bold-text;
-  font-size: 1.375rem;
-  color: #000;
-  margin: 0;
-}
-
-.pageTitle {
-  @include page-title;
-  grid-area: page-title;
-}
-
-.recentActivitiesTitle {
-  grid-area: activities-title;
-  margin-top: 20px;
-  margin-bottom: 10px;
-  font-size: 1rem;
-  font-weight: 500;
-}
-
-.balance {
-  grid-area: balance;
-  display: flex;
-  align-items: center;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.recentActivities {
-  grid-area: activities;
-  padding: 0px 11px 16px;
-  background-color: #fff;
-
-  table {
-    border-collapse: collapse;
-    width: 100%;
-    table-layout: fixed;
-  }
-
-  tr {
-    height: 46px;
-    border-bottom: 1px solid #b3b3b3;
-    padding: 0 15px;
-  }
-
-  tbody {
-    tr:hover {
-      background-color: #eee;
+    'balance send receive' 200px /
+    2fr 1fr 1fr;
+  grid-column-gap: 16px;
+  margin-bottom: 16px;
+  .balance {
+    grid-area: balance;
+    border-radius: 16px;
+    background-color: #26C786;
+    position: relative;
+    padding: 24px 16px;
+    color: var(--primary-text-color);
+
+    & > .backgroundImg {
+      position: absolute;
+      top: 0px;
+      right: 0px;
     }
-  }
 
-  th {
-    text-align: left;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: #000;
-    line-height: 1em;
-    padding: 16px 0;
-
-    &[data-field='date'] {
-      width: 100px;
+    & > .copyBalance {
+      .balanceValue {
+        font-family: 'D-DIN-PRO';
+        font-weight: 500;
+        font-size: 36px;
+      }
     }
-    &[data-field='status'] {
-      width: 130px;
+
+    & > .balanceUnit {
+      font-size: 16px;
+      font-weight: 500;
+      margin-left: 8px;
     }
-  }
 
-  td {
-    font-size: 0.875rem;
-    line-height: 1em;
-    padding: 8px 2px;
-    color: #000;
-    white-space: nowrap;
-  }
+    & > .balanceTitle {
+      font-weight: 500;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 36px;
 
-  .tokenName {
-    max-width: 50%;
-    display: inline-flex;
-    line-height: 24px;
+      & > svg {
+        margin-left: 8px;
 
-    &::after {
-      min-width: 300px;
-    }
-    & > span {
-      max-width: 100%;
+        path {
+          fill: var(--svg-fill-color);
+        }
+      }
     }
   }
-
-  .symbol {
-    max-width: 90%;
-    display: inline-flex;
-
-    &::after {
-      max-width: 400px;
-    }
+  .send {
+    grid-area: send;
+  }
+  .receive {
+    grid-area: receive;
   }
 
-  .txStatus {
-    & > div::after {
-      position: absolute;
-      display: block;
-      content: '';
-      border-radius: 50%;
-      width: 8px;
-      height: 8px;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    &[data-status='pending'] > div::after {
-      background-color: $pending-color;
-      filter: drop-shadow(0 0 1px $pending-color);
-      animation: blink 5s infinite;
-    }
-
-    &[data-status='confirming'] > div::after {
-      background-color: $pending-color;
-      filter: drop-shadow(0 0 1px $pending-color);
-      animation: blink 5s infinite;
-    }
-
-    &[data-status='success'] > div::after {
-      background-color: $success-color;
-      filter: drop-shadow(0 0 1px $success-color);
-    }
-
-    &[data-status='failed'] > div::after {
-      background-color: $failed-color;
-      filter: drop-shadow(0 0 1px $failed-color);
+  & > a {
+    border: none;
+    background: var(--secondary-background-color);
+    border-radius: 16px;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--primary-color);
+    text-align: center;
+    padding-top: 48px;
+
+    @media (prefers-color-scheme: dark) {
+      & > svg {
+        :first-child {
+          fill: var(--primary-color);
+        }
+        :not(:first-child) {
+          fill: #14221C;
+        }
+     }
     }
+  }
+}
 
-    & > div {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      padding-left: 20px;
+.txStatusTh {
+  padding-left: 34px !important;
+}
 
-      & > span:first-child {
-        flex: 1;
-      }
+.txStatus {
+  display: flex;
+  position: relative;
+  padding-left: 16px;
+  align-items: center;
 
-      & > span:nth-child(2) {
-        color: #626262;
-        font-size: 0.625rem;
-        line-height: 0.8125rem;
-        margin-top: 3px;
-      }
-    }
+  .confirmText {
+    color: #999;
+    font-size: 12px;
+    margin-left: 4px;
   }
-}
 
-.linkToHistory {
-  grid-area: more-link;
-  font-size: 0.75rem;
-  color: #000;
-  margin-top: 13px;
+  .confirm {
+    position: absolute;
+    left: -4px;
+  }
 
-  & > span:hover {
-    color: var(--nervos-green);
+  &[data-status="failed"] {
+    color: #FF1E1E;
   }
 }
 
@@ -196,3 +125,39 @@ $confirming-color: #b3b3b3;
     opacity: 1;
   }
 }
+
+.transactionTablleHead {
+  display: flex;
+  padding: 18px 16px;
+  justify-content: space-between;
+  align-items: center;
+
+  .recentActivitiesTitle {
+    font-weight: 500;
+    font-size: 16px;
+    color: var(--main-text-color);
+    margin: 0;
+  }
+
+  .linkToHistory {
+    font-size: 14px;
+    color: #8DA394;
+    cursor: pointer;
+  
+    &:hover {
+      color: var(--activity-color);
+
+      & > svg > path {
+        stroke: var(--activity-color);
+      }
+    }
+
+    & > svg {
+      margin-left: 4px;
+    }
+  }
+}
+
+.isReceive {
+  color: $main-color;
+}
diff --git a/packages/neuron-ui/src/components/PageContainer/index.tsx b/packages/neuron-ui/src/components/PageContainer/index.tsx
index 6debba269d..af006c8c9e 100755
--- a/packages/neuron-ui/src/components/PageContainer/index.tsx
+++ b/packages/neuron-ui/src/components/PageContainer/index.tsx
@@ -139,7 +139,7 @@ const PageContainer: React.FC<ComponentProps> = props => {
           <Close className={styles.close} onClick={closeSyncNotice} />
         </Alert>
       )}
-      {children}
+      <div className={styles.body}>{children}</div>
     </div>
   )
 }
diff --git a/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss b/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
index db6fd8deb1..9b85f459bf 100755
--- a/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
+++ b/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
@@ -1,11 +1,15 @@
 .page {
   background: var(--main-background-color);
   color: var(--main-text-color);
-  padding: 0 24px 24px;
+  padding: 0 24px;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
   
   .head {
     display: flex;
+    flex: 0 0 auto;
     align-items: center;
     height: 72px;
     margin: 0;
@@ -76,6 +80,7 @@
 }
 
 .syncNotification {
+  flex: 0 0 auto;
   background: var(--warn-background-color);
   border-radius: 16px;
   padding: 10px 0;
@@ -99,4 +104,9 @@
     transform: translateY(-50%);
     cursor: pointer;
   }
-}
\ No newline at end of file
+}
+
+.body {
+  flex: 1 1 auto;
+  padding-bottom: 24px;
+}
diff --git a/packages/neuron-ui/src/styles/index.scss b/packages/neuron-ui/src/styles/index.scss
index fbe0292a43..1e3be0d41f 100755
--- a/packages/neuron-ui/src/styles/index.scss
+++ b/packages/neuron-ui/src/styles/index.scss
@@ -14,6 +14,11 @@
 [type='submit'],
 button {
   -webkit-appearance: none !important;
+  color: inherit;
+}
+
+a {
+  text-decoration: none;
 }
 
 ul {
diff --git a/packages/neuron-ui/src/styles/theme.scss b/packages/neuron-ui/src/styles/theme.scss
index 1df408a883..7a3a44b39c 100644
--- a/packages/neuron-ui/src/styles/theme.scss
+++ b/packages/neuron-ui/src/styles/theme.scss
@@ -42,7 +42,7 @@ body {
     --secondary-text-color: #8DA394;
     --link-color: #{$main-color};
     --third-background-color: #2D3534;
-    --notice-background-color: rgba(255, 140, 0, 0.2);
+    --notice-background-color: #093F29;
     --notice-text-color: #F78C2A;
     --border-color: #343E3C;
     --input-border-color: #343E3C;
diff --git a/packages/neuron-ui/src/utils/const.ts b/packages/neuron-ui/src/utils/const.ts
index 419adb3478..31a715e29c 100644
--- a/packages/neuron-ui/src/utils/const.ts
+++ b/packages/neuron-ui/src/utils/const.ts
@@ -63,3 +63,5 @@ export const DEPRECATED_CODE_HASH: Record<string, string> = {
   AcpOnLina: '0x0fb343953ee78c9986b091defb6252154e0bb51044fd2879fde5b27314506111',
   AcpOnAggron: '0x86a1c6987a4acbe1a887cca4c9dd2ac9fcb07405bbeda51b861b18bbf7492c4b',
 }
+
+export const HIDE_BALANCE = '******'
diff --git a/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss b/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss
index d7ec95224d..50ea5e06de 100644
--- a/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss
+++ b/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss
@@ -1,9 +1,10 @@
+@import '../../styles/theme.scss';
+
 .container {
   position: relative;
   display: inline-block;
-  padding: 0 3px;
 
-  &::before {
+  .hoverShow {
     position: absolute;
     top: 0;
     left: 0;
@@ -12,17 +13,27 @@
     display: none;
     justify-content: center;
     align-items: center;
-    content: attr(data-prompt);
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #666;
-    background-color: rgba(224, 224, 224, 0.9);
+    font-weight: 400;
+    color: $main-color;
+    background-color: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(1px);
     user-select: none;
     white-space: nowrap;
+    border-radius: 16px;
+
+    & > svg {
+      margin-right: 4px;
+    }
   }
 
-  &:hover::before {
-    display: flex;
+  &:hover {
+    padding-right: 14px;
+    .hoverShow {
+      display: flex;
+    }
+
+    .copyIcon {
+      visibility: visible;
+    }
   }
 }
diff --git a/packages/neuron-ui/src/widgets/CopyZone/index.tsx b/packages/neuron-ui/src/widgets/CopyZone/index.tsx
index 72852312e3..c5b275de96 100644
--- a/packages/neuron-ui/src/widgets/CopyZone/index.tsx
+++ b/packages/neuron-ui/src/widgets/CopyZone/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Copy, SuccessNoBorder } from 'widgets/Icons/icon'
 import styles from './copyZone.module.scss'
 
 type CopyZoneProps = React.PropsWithChildren<{
@@ -27,12 +28,15 @@ const CopyZone = ({ children, content, name, style, className = '' }: CopyZonePr
     <div
       role="presentation"
       data-copied={copied}
-      data-prompt={prompt}
       onClick={onCopy}
       className={`${styles.container} ${className}`}
       style={style}
       title={content}
     >
+      <div className={styles.hoverShow}>
+        {copied ? <SuccessNoBorder className={styles.copyIcon} /> : <Copy className={styles.copyIcon} />}
+        {prompt}
+      </div>
       {children}
     </div>
   )
diff --git a/packages/neuron-ui/src/widgets/Icons/BalanceRight.svg b/packages/neuron-ui/src/widgets/Icons/BalanceRight.svg
new file mode 100755
index 0000000000..dfd822b136
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/BalanceRight.svg
@@ -0,0 +1,19 @@
+<svg width="488" height="200" viewBox="0 0 488 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1023_15240" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="488" height="200">
+<rect width="488" height="200" rx="16" fill="#26C786"/>
+</mask>
+<g mask="url(#mask0_1023_15240)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M390.248 -16.4318C381.726 -11.4536 370.768 -0.278263 365.459 17.0913C360.146 34.4743 360.503 58.0195 374.548 87.7138C409.449 161.505 386.5 243.213 321.748 281.068L322.252 281.932C387.5 243.787 410.55 161.495 375.452 87.2862C361.496 57.7804 361.187 34.4924 366.416 17.3836C371.649 0.261541 382.441 -10.7131 390.752 -15.5683L390.248 -16.4318ZM410.248 -16.4318C401.726 -11.4536 390.768 -0.278263 385.459 17.0913C380.146 34.4743 380.503 58.0195 394.548 87.7138C429.449 161.505 406.5 243.213 341.748 281.068L342.252 281.932C407.5 243.787 430.55 161.495 395.452 87.2862C381.496 57.7804 381.187 34.4924 386.416 17.3836C391.649 0.261541 402.441 -10.7131 410.752 -15.5683L410.248 -16.4318ZM405.459 17.0913C410.768 -0.278263 421.726 -11.4536 430.248 -16.4318L430.752 -15.5683C422.441 -10.7131 411.649 0.261541 406.416 17.3836C401.187 34.4924 401.496 57.7804 415.452 87.2862C450.55 161.495 427.5 243.787 362.252 281.932L361.748 281.068C426.5 243.213 449.449 161.505 414.548 87.7138C400.503 58.0195 400.146 34.4743 405.459 17.0913ZM450.248 -16.4318C441.726 -11.4536 430.768 -0.278263 425.459 17.0913C420.146 34.4743 420.503 58.0195 434.548 87.7138C469.449 161.505 446.5 243.213 381.748 281.068L382.252 281.932C447.5 243.787 470.55 161.495 435.452 87.2862C421.496 57.7804 421.187 34.4924 426.416 17.3836C431.649 0.261541 442.441 -10.7131 450.752 -15.5683L450.248 -16.4318ZM445.459 17.0913C450.768 -0.278263 461.726 -11.4536 470.248 -16.4318L470.752 -15.5683C462.441 -10.7131 451.649 0.261541 446.416 17.3836C441.187 34.4924 441.496 57.7804 455.452 87.2862C490.55 161.495 467.5 243.787 402.252 281.932L401.748 281.068C466.5 243.213 489.449 161.505 454.548 87.7138C440.503 58.0195 440.146 34.4743 445.459 17.0913ZM490.248 -16.4318C481.726 -11.4536 470.768 -0.278263 465.459 17.0913C460.146 34.4743 460.503 58.0195 474.548 87.7138C509.449 161.505 486.5 243.213 421.748 281.068L422.252 281.932C487.5 243.787 510.55 161.495 475.452 87.2862C461.496 57.7804 461.187 34.4924 466.416 17.3836C471.649 0.261541 482.441 -10.7131 490.752 -15.5683L490.248 -16.4318Z" fill="url(#paint0_linear_1023_15240)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M400.5 -18C391.978 -13.0218 381.02 -1.8465 375.712 15.5231C370.399 32.906 370.756 56.4513 384.8 86.1455C419.702 159.937 396.752 241.645 332 279.5L332.505 280.363C397.753 242.219 420.803 159.926 385.704 85.7179C371.749 56.2122 371.439 32.9241 376.668 15.8154C381.901 -1.3067 392.693 -12.2814 401.005 -17.1365L400.5 -18ZM420.5 -18C411.978 -13.0218 401.02 -1.8465 395.712 15.5231C390.399 32.906 390.756 56.4513 404.8 86.1455C439.702 159.937 416.752 241.645 352 279.5L352.505 280.363C417.753 242.219 440.803 159.926 405.704 85.7179C391.749 56.2122 391.439 32.9241 396.668 15.8154C401.901 -1.3067 412.693 -12.2814 421.005 -17.1365L420.5 -18ZM415.712 15.5231C421.02 -1.8465 431.978 -13.0218 440.5 -18L441.005 -17.1365C432.693 -12.2814 421.901 -1.3067 416.668 15.8154C411.439 32.9241 411.749 56.2122 425.704 85.7179C460.803 159.926 437.753 242.219 372.505 280.363L372 279.5C436.752 241.645 459.702 159.937 424.8 86.1455C410.756 56.4513 410.399 32.906 415.712 15.5231ZM460.5 -18C451.978 -13.0218 441.02 -1.8465 435.712 15.5231C430.399 32.906 430.756 56.4513 444.8 86.1455C479.702 159.937 456.752 241.645 392 279.5L392.505 280.363C457.753 242.219 480.803 159.926 445.704 85.7179C431.749 56.2122 431.439 32.9241 436.668 15.8154C441.901 -1.3067 452.693 -12.2814 461.005 -17.1365L460.5 -18ZM455.712 15.5231C461.02 -1.8465 471.978 -13.0218 480.5 -18L481.005 -17.1365C472.693 -12.2814 461.901 -1.3067 456.668 15.8154C451.439 32.9241 451.749 56.2122 465.704 85.7179C500.803 159.926 477.753 242.219 412.505 280.363L412 279.5C476.752 241.645 499.702 159.937 464.8 86.1455C450.756 56.4513 450.399 32.906 455.712 15.5231ZM500.5 -18C491.978 -13.0218 481.02 -1.84647 475.712 15.5231C470.399 32.9061 470.756 56.4513 484.8 86.1455C519.702 159.937 496.752 241.645 432 279.5L432.505 280.363C497.753 242.219 520.803 159.926 485.704 85.718C471.749 56.2122 471.439 32.9241 476.668 15.8154C481.901 -1.30667 492.693 -12.2814 501.005 -17.1365L500.5 -18ZM486.459 15.5231C491.768 -1.84647 502.726 -13.0218 511.248 -18L511.752 -17.1365C503.441 -12.2814 492.649 -1.30667 487.416 15.8154C482.187 32.9241 482.497 56.2122 496.452 85.718C531.551 159.926 508.5 242.219 443.252 280.363L442.748 279.5C507.5 241.645 530.449 159.937 495.548 86.1455C481.503 56.4513 481.147 32.9061 486.459 15.5231ZM523.248 -18C514.726 -13.0218 503.768 -1.84647 498.459 15.5231C493.147 32.9061 493.503 56.4513 507.548 86.1455C542.449 159.937 519.5 241.645 454.748 279.5L455.252 280.363C520.5 242.219 543.551 159.926 508.452 85.718C494.497 56.2122 494.187 32.9241 499.416 15.8154C504.649 -1.30667 515.441 -12.2814 523.752 -17.1365L523.248 -18Z" fill="url(#paint1_linear_1023_15240)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1023_15240" x1="779.5" y1="-43" x2="322" y2="108" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1023_15240" x1="789.752" y1="-44.5682" x2="332.252" y2="106.432" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/OverviewReceive.svg b/packages/neuron-ui/src/widgets/Icons/OverviewReceive.svg
new file mode 100755
index 0000000000..550f4b59af
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/OverviewReceive.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.22133 12.3967L22.0728 4.91415C23.2316 4.28815 24.5187 3.9613 25.8251 3.9613C30.3138 3.9613 33.9526 7.73796 33.9526 12.3967H8.22133ZM55.7262 16.5053C56.8194 16.5053 57.8091 16.9652 58.5254 17.7087C59.2418 18.4522 59.6849 19.4794 59.6849 20.6139V32.1523H59.6847H52.011C50.0241 32.1523 48.2388 32.9951 46.964 34.3241C45.6906 35.6516 44.9143 37.4738 44.9143 39.4666C44.9143 41.4593 45.6906 43.2816 46.964 44.6091C48.2388 45.9381 50.0241 46.7809 52.011 46.7809H59.6847H59.6849V53.5621C59.6849 54.6967 59.2418 55.7238 58.5254 56.4673C57.8091 57.2109 56.8194 57.6707 55.7262 57.6707H8.22233C7.12918 57.6707 6.13951 57.2109 5.42314 56.4673C4.70676 55.7238 4.26367 54.6967 4.26367 53.5621V20.6139C4.26367 19.4794 4.70676 18.4522 5.42314 17.7087C6.13951 16.9652 7.12918 16.5053 8.22233 16.5053H55.7262ZM52.011 36.1142C51.1725 36.1142 50.4 36.4653 49.8232 37.0666C49.245 37.6694 48.8762 38.5138 48.8762 39.4666C48.8762 40.4194 49.245 41.2638 49.8232 41.8665C50.4 42.4678 51.1725 42.819 52.011 42.819H57.7038V36.1142H52.011Z" fill="#DCF9E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.8713 46.4889C28.5165 46.4889 29.1278 46.2001 29.5375 45.7017L29.88 45.2851L34.371 40.6243C35.1232 39.8437 35.1232 38.6079 34.371 37.8272C33.5782 37.0043 32.2606 37.0043 31.4678 37.8273L29.88 39.4754V29.9793C29.88 28.8862 28.9939 28 27.9007 28C26.8076 28 25.9214 28.8862 25.9214 29.9793V39.5802L24.234 37.8279C23.4414 37.0047 22.1236 37.0045 21.3307 37.8274C20.5786 38.608 20.5786 39.8436 21.3306 40.6242L25.9214 45.3898L26.2685 45.7753C26.6775 46.2295 27.2601 46.4889 27.8713 46.4889Z" fill="#00C891"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/OverviewSend.svg b/packages/neuron-ui/src/widgets/Icons/OverviewSend.svg
new file mode 100755
index 0000000000..da9c312d81
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/OverviewSend.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.22133 12.3967L22.0728 4.91415C23.2316 4.28815 24.5187 3.9613 25.8251 3.9613C30.3138 3.9613 33.9526 7.73796 33.9526 12.3967H8.22133ZM55.7262 16.5053C56.8194 16.5053 57.8091 16.9652 58.5254 17.7087C59.2418 18.4522 59.6849 19.4794 59.6849 20.6139V32.1523H59.6847H52.011C50.0241 32.1523 48.2388 32.9951 46.964 34.3241C45.6906 35.6516 44.9143 37.4738 44.9143 39.4666C44.9143 41.4593 45.6906 43.2816 46.964 44.6091C48.2388 45.9381 50.0241 46.7809 52.011 46.7809H59.6847H59.6849V53.5621C59.6849 54.6967 59.2418 55.7238 58.5254 56.4673C57.8091 57.2109 56.8194 57.6707 55.7262 57.6707H8.22233C7.12918 57.6707 6.13951 57.2109 5.42314 56.4673C4.70676 55.7238 4.26367 54.6967 4.26367 53.5621V20.6139C4.26367 19.4794 4.70676 18.4522 5.42314 17.7087C6.13951 16.9652 7.12918 16.5053 8.22233 16.5053H55.7262ZM52.011 36.1142C51.1726 36.1142 50.4 36.4653 49.8232 37.0666C49.245 37.6694 48.8762 38.5138 48.8762 39.4666C48.8762 40.4194 49.245 41.2638 49.8232 41.8665C50.4 42.4678 51.1726 42.819 52.011 42.819H57.7038V36.1142H52.011Z" fill="#DCF9E4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8342 28C23.1891 28 22.5778 28.2888 22.168 28.7872L21.8255 29.2038L17.3346 33.8646C16.5824 34.6452 16.5824 35.881 17.3345 36.6617C18.1274 37.4846 19.445 37.4845 20.2377 36.6616L21.8255 35.0134L21.8255 44.5096C21.8255 45.6027 22.7117 46.4889 23.8048 46.4889C24.898 46.4889 25.7842 45.6027 25.7842 44.5096L25.7842 34.9087L27.4715 36.661C28.2642 37.4842 29.582 37.4844 30.3749 36.6615C31.1269 35.8809 31.127 34.6453 30.375 33.8647L25.7842 29.0991L25.4371 28.7136C25.0281 28.2594 24.4455 28 23.8342 28Z" fill="#00C891"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/SuccessNoBorder.svg b/packages/neuron-ui/src/widgets/Icons/SuccessNoBorder.svg
new file mode 100755
index 0000000000..f58789c7a1
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/SuccessNoBorder.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="M14.8569 3.69592L5.42829 13.1299L1.14258 8.84174" stroke="#00C891" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/icon.tsx b/packages/neuron-ui/src/widgets/Icons/icon.tsx
index e92c4be2ae..6937950aba 100644
--- a/packages/neuron-ui/src/widgets/Icons/icon.tsx
+++ b/packages/neuron-ui/src/widgets/Icons/icon.tsx
@@ -27,6 +27,7 @@ import { ReactComponent as TooltipSvg } from './Tooltip.svg'
 import { ReactComponent as OpenFolderSvg } from './OpenFolder.svg'
 import { ReactComponent as SuccessInfoSvg } from './SuccessInfo.svg'
 import { ReactComponent as ErrorSvg } from './Error.svg'
+import { ReactComponent as SuccessNoBorderSvg } from './SuccessNoBorder.svg'
 import { ReactComponent as LoadingSvg } from './Loading.svg'
 import { ReactComponent as AttentionSvg } from './ExperimentalAttention.svg'
 import { ReactComponent as AttentionOutlineSvg } from './AttentionOutline.svg'
@@ -43,6 +44,7 @@ import { ReactComponent as MenuExpandSvg } from './MenuExpand.svg'
 import { ReactComponent as ArrowEndSvg } from './ArrowEnd.svg'
 import { ReactComponent as ArrowNextSvg } from './ArrowNext.svg'
 import { ReactComponent as ConfirmingSvg } from './Confirming.svg'
+import { ReactComponent as CopySvg } from './Copy.svg'
 
 import styles from './icon.module.scss'
 
@@ -100,3 +102,5 @@ export const MenuExpand = WrapSvg(MenuExpandSvg)
 export const ArrowEnd = WrapSvg(ArrowEndSvg)
 export const ArrowNext = WrapSvg(ArrowNextSvg)
 export const Confirming = WrapSvg(ConfirmingSvg)
+export const SuccessNoBorder = WrapSvg(SuccessNoBorderSvg)
+export const Copy = WrapSvg(CopySvg)