diff --git a/packages/dashboard/src/components/LoadingButton/index.tsx b/packages/dashboard/src/components/LoadingButton/index.tsx
index 775ad9b9ed5d..92807bca309a 100644
--- a/packages/dashboard/src/components/LoadingButton/index.tsx
+++ b/packages/dashboard/src/components/LoadingButton/index.tsx
@@ -1,9 +1,10 @@
 import { getMaskColor, makeStyles, MaskLoadingButton } from '@masknet/theme'
 import { memo } from 'react'
-import { ButtonProps, Stack } from '@mui/material'
 import { LoadingAnimation } from '@masknet/shared'
+import classNames from 'classnames'
+import type { LoadingButtonProps } from '@mui/lab'
 
-interface LoadingButtonProps extends ButtonProps {
+interface DashboardLoadingButtonProps extends LoadingButtonProps {
     onClick(event: React.MouseEvent<HTMLButtonElement>): Promise<unknown>
 }
 const useStyles = makeStyles()((theme) => ({
@@ -11,26 +12,23 @@ const useStyles = makeStyles()((theme) => ({
         color: getMaskColor(theme).white,
         width: '100%',
     },
+    loadingButtonOverride: {
+        opacity: '1 !important',
+    },
 }))
 
-export const LoadingButton = memo<LoadingButtonProps>((props) => {
+export const LoadingButton = memo<DashboardLoadingButtonProps>((props) => {
     const { onClick, children, ...rest } = props
     const { classes } = useStyles()
     return (
         <MaskLoadingButton
-            classes={{
-                loadingIndicator: classes.icon,
-            }}
+            className={classNames(classes.icon, props.loading ? classes.loadingButtonOverride : '')}
             variant="contained"
+            loadingPosition="end"
             soloLoading={false}
-            loadingIndicator={
-                <Stack width="100%" direction="row" alignItems="center" gap={1} justifyContent="center">
-                    {children}
-                    <LoadingAnimation sx={{ fontSize: 18 }} />
-                </Stack>
-            }
-            {...rest}
-            onClick={onClick}>
+            loadingIndicator={<LoadingAnimation />}
+            onClick={onClick}
+            {...rest}>
             {children}
         </MaskLoadingButton>
     )
diff --git a/packages/dashboard/src/components/Restore/BackupInfoCard.tsx b/packages/dashboard/src/components/Restore/BackupInfoCard.tsx
index a0a1a8d6660c..0e14621f4ea0 100644
--- a/packages/dashboard/src/components/Restore/BackupInfoCard.tsx
+++ b/packages/dashboard/src/components/Restore/BackupInfoCard.tsx
@@ -3,12 +3,22 @@ import { Box, Card, Grid, Stack, Typography } from '@mui/material'
 import formatDateTime from 'date-fns/format'
 import fromUnixTime from 'date-fns/fromUnixTime'
 import type { BackupFileInfo } from '../../pages/Settings/type'
+import Tooltip from '@mui/material/Tooltip'
 
 interface BackupInfoProps {
     info: BackupFileInfo
 }
 
 export const BackupInfoCard = memo(({ info }: BackupInfoProps) => {
+    const economizeAbstract = (str: string) => {
+        if (!str.length) return <div>error</div>
+        if (str.length < 30) return <div>{str}</div>
+        return (
+            <Tooltip title={str} placement="top" arrow>
+                <div>{str.substr(0, 30) + '...' + '(' + str.split(',').length + ')'}</div>
+            </Tooltip>
+        )
+    }
     return (
         <Card variant="background">
             <Grid
@@ -20,7 +30,7 @@ export const BackupInfoCard = memo(({ info }: BackupInfoProps) => {
                 sx={{ padding: '8px' }}>
                 <Grid item xs={10}>
                     <Stack spacing={1}>
-                        <Typography variant="body2">{info.abstract}</Typography>
+                        <Typography variant="body2">{economizeAbstract(info.abstract)}</Typography>
                         <Typography variant="body2">
                             {formatDateTime(fromUnixTime(info.uploadedAt), 'yyyy-MM-dd HH:mm')}
                         </Typography>
diff --git a/packages/dashboard/src/locales/en-US.json b/packages/dashboard/src/locales/en-US.json
index fd9c8ad362fa..80c8416b763d 100644
--- a/packages/dashboard/src/locales/en-US.json
+++ b/packages/dashboard/src/locales/en-US.json
@@ -283,8 +283,10 @@
     "settings_dialogs_current_phone_validation": "The current phone number for verification is",
     "settings_dialogs_change_phone_validation": "To change the phone number, you need to verify your current phone number:",
     "settings_dialogs_backup_to_cloud": "Backup to cloud",
-    "settings_dialogs_merge_to_local_data": "Merge Cloud backup to local and backup to cloud",
+    "settings_dialogs_merge_to_local_data": "Merge Cloud backup to local and back up to cloud",
     "settings_dialogs_backup_action_desc": "There is already a cloud backup, please merge the cloud backup to local before you back up, or back up directly.",
+    "settings_dialogs_backup_to_cloud_action": "This option overwrites the existing cloud backup with the local data.",
+    "settings_dialogs_backup_merge_cloud": "This option requires you to enter the password of the existing cloud backup for decryption. The existing cloud backup and local data are combined and then encrypted and uploaded to cloud.",
     "settings_dialogs_backup_merged_tip": "You already obtained the cloud backup to your local. If you want to complete your back up, please click on the backup button to update all your data to cloud.",
     "settings_label_backup_password": "Backup Password",
     "settings_label_new_backup_password": "New Backup Password",
diff --git a/packages/dashboard/src/locales/zh-CN.json b/packages/dashboard/src/locales/zh-CN.json
index 0ef6904f0140..3cf1aceb2d97 100644
--- a/packages/dashboard/src/locales/zh-CN.json
+++ b/packages/dashboard/src/locales/zh-CN.json
@@ -285,6 +285,8 @@
     "settings_dialogs_backup_to_cloud": "备份至云端",
     "settings_dialogs_merge_to_local_data": "将云端备份合并到本地并再次备份到云端",
     "settings_dialogs_backup_action_desc": "云端备份已存在， 您可以选择在备份之前先合并此云端备份到您的本地数据，或者直接覆盖重新备份。",
+    "settings_dialogs_backup_to_cloud_action": "选择此选项会使用本地文件覆盖云端已存在备份.",
+    "settings_dialogs_backup_merge_cloud": "选择此选项会要求输入已存储云端文件密码进行解密.将云端备份和本地备份合并后加密上传.",
     "settings_dialogs_backup_merged_tip": "您已经合并云端备份到本地. 如果您想要继续完成备份，请点击备份按钮将您的所有数据更新到云端。",
     "settings_label_backup_password": "备份密码",
     "settings_label_new_backup_password": "新备份密码",
diff --git a/packages/dashboard/src/pages/Settings/components/dialogs/BackupDialog.tsx b/packages/dashboard/src/pages/Settings/components/dialogs/BackupDialog.tsx
index b77fedb051aa..3e3def1a2eb8 100644
--- a/packages/dashboard/src/pages/Settings/components/dialogs/BackupDialog.tsx
+++ b/packages/dashboard/src/pages/Settings/components/dialogs/BackupDialog.tsx
@@ -6,7 +6,7 @@ import { useDashboardI18N } from '../../../../locales'
 import { MaskDialog, useCustomSnackbar } from '@masknet/theme'
 import { Box } from '@mui/material'
 import { UserContext } from '../../hooks/UserContext'
-import LoadingButton from '@mui/lab/LoadingButton'
+import { LoadingButton } from '../../../../components/LoadingButton'
 import { fetchUploadLink, uploadBackupValue, VerifyCodeRequest } from '../../api'
 import formatDateTime from 'date-fns/format'
 import { LoadingCard } from '../../../../components/Restore/steps/LoadingCard'
@@ -148,12 +148,7 @@ export default function BackupDialog({ local = true, params, open, merged, onClo
                         />
                     ) : null}
 
-                    <LoadingButton
-                        fullWidth
-                        disabled={backupDisabled}
-                        onClick={handleBackup}
-                        loading={loading}
-                        variant="contained">
+                    <LoadingButton fullWidth disabled={backupDisabled} onClick={handleBackup} loading={loading}>
                         {t.settings_button_backup()}
                     </LoadingButton>
                 </Box>
diff --git a/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupMergeDialog.tsx b/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupMergeDialog.tsx
index c870ea1b5887..6c5a7e14112a 100644
--- a/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupMergeDialog.tsx
+++ b/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupMergeDialog.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { MaskColorVar, MaskDialog, useCustomSnackbar } from '@masknet/theme'
 import { Box, FormControlLabel, formControlLabelClasses, Radio, RadioGroup, styled, Typography } from '@mui/material'
-import LoadingButton from '@mui/lab/LoadingButton'
 import { BackupInfoCard } from '../../../../components/Restore/BackupInfoCard'
 import type { BackupFileInfo } from '../../type'
 import { useDashboardI18N } from '../../../../locales'
@@ -11,11 +10,13 @@ import { useAsyncFn } from 'react-use'
 import { decryptBackup } from '@masknet/backup-format'
 import { decode, encode } from '@msgpack/msgpack'
 import PasswordField from '../../../../components/PasswordField'
+import { makeStyles } from '@masknet/theme'
+import { LoadingButton } from '../../../../components/LoadingButton'
 
 const StyledFormControlLabel = styled(FormControlLabel)({
     [`&.${formControlLabelClasses.root}`]: {
         background: MaskColorVar.lightBackground,
-        margin: '0 0 16px',
+        margin: '0',
         padding: '2px 0',
         borderRadius: 8,
     },
@@ -24,6 +25,14 @@ const StyledFormControlLabel = styled(FormControlLabel)({
     },
 })
 
+const useStyles = makeStyles()(() => ({
+    helpContent: {
+        fontSize: '13px',
+        padding: '12px 0',
+        color: MaskColorVar.textSecondary,
+    },
+}))
+
 export interface CloudBackupMergeDialogProps {
     account: string
     info: BackupFileInfo
@@ -38,7 +47,7 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
     const [incorrectBackupPassword, setIncorrectBackupPassword] = useState(false)
     const t = useDashboardI18N()
     const { showSnackbar } = useCustomSnackbar()
-
+    const { classes } = useStyles()
     const restoreCallback = useCallback(() => {
         onMerged(true)
         showSnackbar(t.settings_alert_merge_success(), { variant: 'success' })
@@ -60,13 +69,14 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
                 }
 
                 restoreCallback()
+                setBackupPassword('')
             }
         } catch (error) {
             setIncorrectBackupPassword(true)
         }
     }, [backupPassword, account, info])
 
-    const onBackup = () => {
+    const onBackup = async () => {
         if (mode === '1') {
             onMerged(false)
         } else {
@@ -86,16 +96,17 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
         <MaskDialog maxWidth="xs" title={t.settings_cloud_backup()} open={open} onClose={onClose}>
             <Box sx={{ padding: '0 24px 24px' }}>
                 <BackupInfoCard info={info} />
-                <Typography sx={{ fontSize: '13px', padding: '24px 0' }}>
-                    {t.settings_dialogs_backup_action_desc()}
-                </Typography>
 
                 <RadioGroup aria-label="mode" name="mode" value={mode} onChange={(e) => setMode(e.target.value)}>
                     <StyledFormControlLabel
                         value="1"
                         control={<Radio size="small" />}
                         label={t.settings_dialogs_backup_to_cloud()}
+                        style={{ marginTop: '24px' }}
                     />
+                    <Typography className={classes.helpContent}>
+                        {t.settings_dialogs_backup_to_cloud_action()}
+                    </Typography>
                     <StyledFormControlLabel
                         sx={{ fontSize: 14 }}
                         value="2"
@@ -106,22 +117,17 @@ export function CloudBackupMergeDialog({ account, info, open, onClose, onMerged
 
                 {mode === '2' ? (
                     <PasswordField
+                        sx={{ marginTop: '12px' }}
                         fullWidth
                         value={backupPassword}
                         onChange={(event) => setBackupPassword(event.target.value)}
                         placeholder={t.settings_label_backup_password_cloud()}
-                        sx={{ marginBottom: '24px' }}
                         error={incorrectBackupPassword}
                         helperText={incorrectBackupPassword ? t.settings_dialogs_incorrect_password() : ''}
                     />
                 ) : null}
-
-                <LoadingButton
-                    fullWidth
-                    onClick={onBackup}
-                    loading={loading}
-                    disabled={incorrectBackupPassword}
-                    variant="contained">
+                <Typography className={classes.helpContent}>{t.settings_dialogs_backup_merge_cloud()}</Typography>
+                <LoadingButton fullWidth onClick={onBackup} loading={loading} disabled={incorrectBackupPassword}>
                     {t.settings_button_backup()}
                 </LoadingButton>
             </Box>
diff --git a/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupVerifyDialog.tsx b/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupVerifyDialog.tsx
index 2bae8b502f11..aa485c1db3a7 100644
--- a/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupVerifyDialog.tsx
+++ b/packages/dashboard/src/pages/Settings/components/dialogs/CloudBackupVerifyDialog.tsx
@@ -5,7 +5,7 @@ import { useState, useContext, useMemo, useEffect } from 'react'
 import { UserContext } from '../../hooks/UserContext'
 import { fetchDownloadLink, sendCode, useLanguage, VerifyCodeRequest } from '../../api'
 import { BackupFileInfo, AccountType, Scenario, Locale } from '../../type'
-import { LoadingButton } from '@mui/lab'
+import { LoadingButton } from '../../../../components/LoadingButton'
 import { useAsyncFn } from 'react-use'
 
 export interface VerifyNextData {
@@ -94,12 +94,7 @@ export function CloudBackupVerifyDialog({ open, onClose, onNext }: CloudBackupVe
                     </CountdownButton>
                 </Box>
 
-                <LoadingButton
-                    fullWidth
-                    sx={{ marginTop: '24px' }}
-                    onClick={handleNext}
-                    loading={loading}
-                    variant="contained">
+                <LoadingButton fullWidth sx={{ marginTop: '24px' }} onClick={handleNext} loading={loading}>
                     {t.next()}
                 </LoadingButton>
             </Box>