diff --git a/packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss b/packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss
index b2fc0b5edf..a410263179 100644
--- a/packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss
+++ b/packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss
@@ -64,19 +64,10 @@
 }
 
 .fee {
-  display: flex;
-  justify-content: space-between;
   font-size: 14px;
   line-height: 20px;
   margin-top: 4px;
   color: var(--main-text-color);
-  gap: 24px;
-
-  & > div {
-    &:first-child {
-      flex-shrink: 0;
-    }
-  }
 }
 
 .rewards {
@@ -128,6 +119,7 @@
 .isBalanceReserved {
   display: flex;
   align-items: center;
+  margin-top: 12px;
 
   & > input {
     display: none;
@@ -162,3 +154,22 @@
     }
   }
 }
+
+.notification {
+  color: var(--notice-text-color);
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+  align-items: center;
+  word-break: break-word;
+  margin-top: 12px;
+  background-color: var(--warn-background-color);
+  font-size: 12px;
+  line-height: 24px;
+  padding: 8px 14px;
+  border: 1px solid rgba(252, 136, 0, 0.2);
+  border-radius: 4px;
+  span {
+    font-weight: 500;
+  }
+}
diff --git a/packages/neuron-ui/src/components/DepositDialog/hooks.ts b/packages/neuron-ui/src/components/DepositDialog/hooks.ts
index 6465bd25a1..56117708e0 100644
--- a/packages/neuron-ui/src/components/DepositDialog/hooks.ts
+++ b/packages/neuron-ui/src/components/DepositDialog/hooks.ts
@@ -238,10 +238,10 @@ export const useBalanceReserved = () => {
 }
 
 export const useOnDepositDialogSubmit = ({
-  onCloseDepositDialog,
+  onDepositSuccess,
   walletID,
 }: {
-  onCloseDepositDialog: () => void
+  onDepositSuccess: () => void
   walletID: string
 }) => {
   const dispatch = useDispatch()
@@ -251,10 +251,10 @@ export const useOnDepositDialogSubmit = ({
       payload: {
         walletID,
         actionType: 'send',
+        onSuccess: onDepositSuccess,
       },
     })
-    onCloseDepositDialog()
-  }, [dispatch, walletID, onCloseDepositDialog])
+  }, [dispatch, walletID, onDepositSuccess])
 }
 
 export const useOnDepositDialogCancel = ({
diff --git a/packages/neuron-ui/src/components/DepositDialog/index.tsx b/packages/neuron-ui/src/components/DepositDialog/index.tsx
index abc69ca05f..057fa087b6 100644
--- a/packages/neuron-ui/src/components/DepositDialog/index.tsx
+++ b/packages/neuron-ui/src/components/DepositDialog/index.tsx
@@ -8,6 +8,7 @@ import { localNumberFormatter, shannonToCKBFormatter } from 'utils'
 import { Attention, Success } from 'widgets/Icons/icon'
 import Dialog from 'widgets/Dialog'
 import Tooltip from 'widgets/Tooltip'
+import Alert from 'widgets/Alert'
 import styles from './depositDialog.module.scss'
 import {
   useBalanceReserved,
@@ -31,6 +32,7 @@ interface DepositDialogProps {
   suggestFeeRate: number
   walletID: string
   globalAPC: number
+  onDepositSuccess: () => void
 }
 
 const RfcLink = React.memo(() => (
@@ -57,6 +59,7 @@ const DepositDialog = ({
   isTxGenerated,
   suggestFeeRate,
   globalAPC,
+  onDepositSuccess,
 }: DepositDialogProps) => {
   const [t, { language }] = useTranslation()
   const disabled = !isTxGenerated
@@ -73,7 +76,7 @@ const DepositDialog = ({
     showDepositDialog: show,
     slidePercent,
   })
-  const onConfirm = useOnDepositDialogSubmit({ onCloseDepositDialog, walletID })
+  const onConfirm = useOnDepositDialogSubmit({ onDepositSuccess, walletID })
   const onCancel = useOnDepositDialogCancel({ onCloseDepositDialog, resetDepositValue, setIsBalanceReserved })
   const onSubmit = useCallback(
     (e: React.FormEvent) => {
@@ -189,6 +192,9 @@ const DepositDialog = ({
               <p>{globalAPC}%</p>
             </div>
           </div>
+          <Alert status="warn" className={styles.notification}>
+            <span>{t('nervos-dao.attention')}</span>
+          </Alert>
         </form>
       )}
     </Dialog>
diff --git a/packages/neuron-ui/src/components/DepositRulesDialog/depositRulesDialog.module.scss b/packages/neuron-ui/src/components/DepositRulesDialog/depositRulesDialog.module.scss
new file mode 100644
index 0000000000..22455d7c0d
--- /dev/null
+++ b/packages/neuron-ui/src/components/DepositRulesDialog/depositRulesDialog.module.scss
@@ -0,0 +1,28 @@
+@import '../../styles/mixin.scss';
+
+.container {
+  width: 680px;
+
+  .content {
+    background: var(--table-head-background-color);
+    border-radius: 8px;
+
+    .item {
+      padding: 16px;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid var(--divide-line-color);
+      font-size: 14px;
+      color: var(--main-text-color);
+      &:last-child {
+        border-bottom: none;
+      }
+      p {
+        margin: 0;
+      }
+      .description {
+        font-weight: 500;
+      }
+    }
+  }
+}
diff --git a/packages/neuron-ui/src/components/DepositRulesDialog/index.tsx b/packages/neuron-ui/src/components/DepositRulesDialog/index.tsx
new file mode 100644
index 0000000000..b934091fbe
--- /dev/null
+++ b/packages/neuron-ui/src/components/DepositRulesDialog/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Dialog from 'widgets/Dialog'
+import styles from './depositRulesDialog.module.scss'
+
+const DepositRulesDialog = ({ show, onClose }: { show: boolean; onClose: () => void }) => {
+  const [t] = useTranslation()
+
+  return (
+    <Dialog
+      show={show}
+      title={t('nervos-dao.deposit-rules')}
+      onCancel={onClose}
+      onConfirm={onClose}
+      showCancel={false}
+      confirmText={t('deposit-rules.get')}
+      className={styles.container}
+    >
+      <div className={styles.content}>
+        {[
+          // TODO: calculating by the capacity of the lock
+          ['deposit-rules.minimum-deposit', '102 CKB'],
+          ['deposit-rules.single-compensation-cycle', 'deposit-rules.single-compensation-cycle-description'],
+          ['deposit-rules.withdraw', 'deposit-rules.withdraw-description'],
+          ['deposit-rules.unlock', 'deposit-rules.unlock-description'],
+        ].map(([title, description]) => (
+          <div className={styles.item}>
+            <p>{t(title)}</p>
+            <p className={styles.description}>{t(description)}</p>
+          </div>
+        ))}
+      </div>
+    </Dialog>
+  )
+}
+
+DepositRulesDialog.displayName = 'DepositRulesDialog'
+
+export default DepositRulesDialog
diff --git a/packages/neuron-ui/src/components/NervosDAO/hooks.ts b/packages/neuron-ui/src/components/NervosDAO/hooks.ts
index be667bff81..e78dd44f67 100644
--- a/packages/neuron-ui/src/components/NervosDAO/hooks.ts
+++ b/packages/neuron-ui/src/components/NervosDAO/hooks.ts
@@ -2,7 +2,8 @@ import { useEffect, useCallback, useState } from 'react'
 import { AppActions, StateAction } from 'states/stateProvider/reducer'
 import { updateNervosDaoData, clearNervosDaoData } from 'states/stateProvider/actionCreators'
 
-import { calculateAPC, CONSTANTS, isSuccessResponse } from 'utils'
+import { NavigateFunction } from 'react-router-dom'
+import { calculateAPC, CONSTANTS, isSuccessResponse, RoutePath } from 'utils'
 
 import { generateDaoWithdrawTx, generateDaoClaimTx } from 'services/remote'
 import { ckbCore, getHeader } from 'services/chain'
@@ -131,6 +132,7 @@ export const useOnWithdrawDialogSubmit = ({
               payload: {
                 walletID,
                 actionType: 'send',
+                onSuccess: () => {},
               },
             })
           } else {
@@ -158,12 +160,14 @@ export const useOnActionClick = ({
   dispatch,
   walletID,
   setActiveRecord,
+  navigate,
 }: {
   records: Readonly<State.NervosDAORecord[]>
   clearGeneratedTx: () => void
   dispatch: React.Dispatch<StateAction>
   walletID: string
   setActiveRecord: React.Dispatch<State.NervosDAORecord>
+  navigate: NavigateFunction
 }) =>
   useCallback(
     (e: any) => {
@@ -174,7 +178,9 @@ export const useOnActionClick = ({
       }
       const record = records.find(r => r.outPoint.txHash === outPoint.txHash && r.outPoint.index === outPoint.index)
       if (record) {
-        if (record.depositOutPoint) {
+        if (record.status === 'sent') {
+          navigate(`${RoutePath.History}/${record.depositInfo?.txHash}`)
+        } else if (record.depositOutPoint) {
           generateDaoClaimTx({
             walletID,
             withdrawingOutPoint: record.outPoint,
@@ -192,6 +198,7 @@ export const useOnActionClick = ({
                   payload: {
                     walletID,
                     actionType: 'send',
+                    onSuccess: () => {},
                   },
                 })
               } else {
diff --git a/packages/neuron-ui/src/components/NervosDAO/index.tsx b/packages/neuron-ui/src/components/NervosDAO/index.tsx
index 5801fc1980..c80a7b2a5e 100644
--- a/packages/neuron-ui/src/components/NervosDAO/index.tsx
+++ b/packages/neuron-ui/src/components/NervosDAO/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useMemo, useCallback } from 'react'
-import { useState as useGlobalState, useDispatch } from 'states'
+import { useState as useGlobalState, useDispatch, showPageNotice } from 'states'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
 
 import appState from 'states/init/app'
 
@@ -16,23 +17,22 @@ import {
   useClearGeneratedTx,
 } from 'utils'
 
-import { openExternal } from 'services/remote'
-
+import DepositRulesDialog from 'components/DepositRulesDialog'
 import DepositDialog from 'components/DepositDialog'
 import WithdrawDialog from 'components/WithdrawDialog'
 import DAORecord, { DAORecordProps } from 'components/NervosDAORecord'
 import PageContainer from 'components/PageContainer'
 import CopyZone from 'widgets/CopyZone'
-import { ArrowNext, Attention, Deposit, EyesClose, EyesOpen } from 'widgets/Icons/icon'
+import { ArrowNext, Attention, Deposit, EyesClose, EyesOpen, DepositTimeSort } from 'widgets/Icons/icon'
 import TableNoData from 'widgets/Icons/TableNoData.png'
 import { HIDE_BALANCE } from 'utils/const'
+import Tooltip from 'widgets/Tooltip'
+import Button from 'widgets/Button'
 
 import useGetCountDownAndFeeRateStats from 'utils/hooks/useGetCountDownAndFeeRateStats'
 import hooks, { useDepositDialog } from './hooks'
 import styles from './nervosDAO.module.scss'
 
-const DAO_DOCS_URL = 'https://docs.nervos.org/docs/basics/guides/crypto%20wallets/neuron/#deposit-ckb-into-nervos-dao'
-
 const NervosDAO = () => {
   const [tabIdx, setTabIdx] = useState('0')
   const {
@@ -42,6 +42,7 @@ const NervosDAO = () => {
       tipDao,
       tipBlockTimestamp,
       epoch,
+      pageNotice,
     },
     wallet,
     nervosDAO: { records },
@@ -53,6 +54,7 @@ const NervosDAO = () => {
     settings: { networks },
   } = useGlobalState()
   const dispatch = useDispatch()
+  const navigate = useNavigate()
   const [t, { language }] = useTranslation()
   const { suggestFeeRate } = useGetCountDownAndFeeRateStats()
   const [isPrivacyMode, setIsPrivacyMode] = useState(false)
@@ -63,6 +65,8 @@ const NervosDAO = () => {
   const [depositEpochList, setDepositEpochList] = useState<Map<string, string | null>>(new Map())
   const clearGeneratedTx = useClearGeneratedTx()
   const { showDepositDialog, onOpenDepositDialog, onCloseDepositDialog } = useDepositDialog()
+  const [showRules, setShowRules] = useState(false)
+  const [isDescDirection, setIsDescDirection] = useState(true)
 
   const onWithdrawDialogDismiss = hooks.useOnWithdrawDialogDismiss(setActiveRecord)
 
@@ -84,17 +88,27 @@ const NervosDAO = () => {
     suggestFeeRate,
   })
 
+  const onDepositSuccess = useCallback(() => {
+    onCloseDepositDialog()
+    showPageNotice('nervos-dao.deposit-submitted')(dispatch)
+  }, [dispatch, onCloseDepositDialog])
+
   const onActionClick = hooks.useOnActionClick({
     records,
     clearGeneratedTx,
     dispatch,
     walletID: wallet.id,
     setActiveRecord,
+    navigate,
   })
 
   const handleOpenRules = useCallback(() => {
-    openExternal(DAO_DOCS_URL)
-  }, [])
+    setShowRules(true)
+  }, [setShowRules])
+
+  const handleCloseRules = useCallback(() => {
+    setShowRules(false)
+  }, [setShowRules])
 
   hooks.useUpdateDepositEpochList({ records, setDepositEpochList, connectionStatus })
 
@@ -116,6 +130,10 @@ const NervosDAO = () => {
     networkID,
   })
 
+  const toggleDirection = useCallback(() => {
+    setIsDescDirection(!isDescDirection)
+  }, [setIsDescDirection, isDescDirection])
+
   const MemoizedRecords = useMemo(() => {
     const onTabClick = (e: React.SyntheticEvent<HTMLDivElement, MouseEvent>) => {
       const {
@@ -136,30 +154,51 @@ const NervosDAO = () => {
       return record.status === 'dead'
     })
 
-    if (tabIdx === '1') {
+    if (tabIdx === '0') {
+      filteredRecord.sort((r1, r2) =>
+        isDescDirection
+          ? +r2.depositInfo!.timestamp! - +r1.depositInfo!.timestamp!
+          : +r1.depositInfo!.timestamp! - +r2.depositInfo!.timestamp!
+      )
+    } else if (tabIdx === '1') {
       filteredRecord.sort((r1, r2) => +r2.unlockInfo!.timestamp! - +r1.unlockInfo!.timestamp!)
     }
 
     return (
       <>
-        <div role="presentation" className={styles.recordTab} style={{ '--selected-tab': tabIdx }} onClick={onTabClick}>
-          <div className={styles.underline} />
-          <button
-            className={clsx({ [styles.active]: tabIdx === '0' }, styles.tab)}
-            type="button"
-            role="tab"
-            data-idx="0"
+        <div className={styles.tabContainer}>
+          <div
+            role="presentation"
+            className={styles.recordTab}
+            style={{ '--selected-tab': tabIdx }}
+            onClick={onTabClick}
           >
-            {t('nervos-dao.deposit-records')}
-          </button>
-          <button
-            className={clsx({ [styles.active]: tabIdx === '1' }, styles.tab)}
-            type="button"
-            role="tab"
-            data-idx="1"
-          >
-            {t('nervos-dao.completed-records')}
-          </button>
+            <div className={styles.underline} />
+            <button
+              className={clsx({ [styles.active]: tabIdx === '0' }, styles.tab)}
+              type="button"
+              role="tab"
+              data-idx="0"
+            >
+              {t('nervos-dao.deposit-records')}
+            </button>
+            <button
+              className={clsx({ [styles.active]: tabIdx === '1' }, styles.tab)}
+              type="button"
+              role="tab"
+              data-idx="1"
+            >
+              {t('nervos-dao.completed-records')}
+            </button>
+          </div>
+
+          {tabIdx === '0' ? (
+            <Tooltip tip={t('Deposit Time')} placement="left-top">
+              <Button type="text" className={styles.sortBtn} data-desc={isDescDirection} onClick={toggleDirection}>
+                <DepositTimeSort />
+              </Button>
+            </Tooltip>
+          ) : null}
         </div>
         {filteredRecord.length ? (
           <div className={styles.records}>
@@ -205,6 +244,8 @@ const NervosDAO = () => {
     tabIdx,
     setTabIdx,
     isPrivacyMode,
+    isDescDirection,
+    toggleDirection,
   ])
 
   useEffect(() => {
@@ -223,6 +264,7 @@ const NervosDAO = () => {
         isTxGenerated={!!send.generatedTx}
         suggestFeeRate={suggestFeeRate}
         globalAPC={globalAPC}
+        onDepositSuccess={onDepositSuccess}
       />
     )
   }, [
@@ -276,6 +318,7 @@ const NervosDAO = () => {
           )}
         </div>
       }
+      notice={pageNotice}
     >
       <div className={styles.header}>
         <div className={styles.daoOverview}>
@@ -366,8 +409,11 @@ const NervosDAO = () => {
       </div>
 
       <div className={styles.recordsContainer}>{MemoizedRecords}</div>
+
       {MemoizedDepositDialog}
       {MemoizedWithdrawDialog}
+
+      <DepositRulesDialog show={showRules} onClose={handleCloseRules} />
     </PageContainer>
   )
 }
diff --git a/packages/neuron-ui/src/components/NervosDAO/nervosDAO.module.scss b/packages/neuron-ui/src/components/NervosDAO/nervosDAO.module.scss
index dd83689f4d..328427c6c6 100644
--- a/packages/neuron-ui/src/components/NervosDAO/nervosDAO.module.scss
+++ b/packages/neuron-ui/src/components/NervosDAO/nervosDAO.module.scss
@@ -180,6 +180,36 @@
 .recordsContainer {
   margin-top: 20px;
 
+  .tabContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .sortBtn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: var(--secondary-background-color);
+      width: 36px;
+      height: 36px;
+      border-radius: 100%;
+      min-width: 0;
+      cursor: pointer;
+      &[data-desc='false'] {
+        svg {
+          transform: rotateX(-180deg);
+        }
+      }
+      &:hover {
+        svg {
+          g,
+          path {
+            stroke: var(--primary-color);
+          }
+        }
+      }
+    }
+  }
+
   .recordTab {
     // To achieve animation on switching the selected target with pure CSS, a layout with fixed width is required.
     $itemWidth: 96px;
diff --git a/packages/neuron-ui/src/components/NervosDAORecord/daoRecordRow.module.scss b/packages/neuron-ui/src/components/NervosDAORecord/daoRecordRow.module.scss
index c533d52c3f..f7500d7e01 100644
--- a/packages/neuron-ui/src/components/NervosDAORecord/daoRecordRow.module.scss
+++ b/packages/neuron-ui/src/components/NervosDAORecord/daoRecordRow.module.scss
@@ -19,6 +19,20 @@
     justify-content: space-between;
   }
 
+  .spinner {
+    width: 14px;
+    height: 14px;
+  }
+
+  .depositingMsg {
+    color: var(--primary-color);
+    font-weight: 500;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
   .compensationAndAPC {
     display: flex;
     align-items: center;
@@ -244,6 +258,26 @@
   }
 
   .action {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 12px;
+    .lockWarn {
+      color: var(--warn-text-color);
+      font-weight: 500;
+      font-size: 12px;
+      position: relative;
+      &::before {
+        content: '';
+        height: 6px;
+        width: 6px;
+        border-radius: 100%;
+        position: absolute;
+        left: -10px;
+        top: calc(50% - 3px);
+        background: var(--warn-text-color);
+      }
+    }
     button {
       width: 216px;
       line-height: 56px;
diff --git a/packages/neuron-ui/src/components/NervosDAORecord/index.tsx b/packages/neuron-ui/src/components/NervosDAORecord/index.tsx
index 76316dbfa6..9b622beed7 100644
--- a/packages/neuron-ui/src/components/NervosDAORecord/index.tsx
+++ b/packages/neuron-ui/src/components/NervosDAORecord/index.tsx
@@ -18,7 +18,7 @@ import CompensationPeriodTooltip from 'components/CompensationPeriodTooltip'
 import { Clock } from 'widgets/Icons/icon'
 import { Link } from 'react-router-dom'
 import { HIDE_BALANCE } from 'utils/const'
-
+import Spinner from 'widgets/Spinner'
 import Tooltip from 'widgets/Tooltip'
 import styles from './daoRecordRow.module.scss'
 import hooks from './hooks'
@@ -92,7 +92,14 @@ export const DAORecord = ({
   )
 
   const leftEpochs = Math.max(compensationEndEpochValue - currentEpochValue, 0)
-  const leftDays = (Math.round(leftEpochs / EPOCHS_PER_DAY) ?? '').toString()
+
+  let leftHours = ''
+  let leftDays = ''
+  if (leftEpochs < EPOCHS_PER_DAY) {
+    leftHours = (parseInt(`${leftEpochs * (24 / EPOCHS_PER_DAY)}`, 10) || 1).toString()
+  } else {
+    leftDays = (Math.round(leftEpochs / EPOCHS_PER_DAY) ?? '').toString()
+  }
 
   const compensation = BigInt(withdrawCapacity || capacity) - BigInt(capacity)
 
@@ -106,15 +113,18 @@ export const DAORecord = ({
   })
 
   let message = ''
+  let showLoading = false
 
   if (ConnectionStatus.Online === connectionStatus) {
     switch (cellStatus) {
       case CellStatus.Unlocking: {
         message = t('nervos-dao.compensation-period.stage-messages.unlocking')
+        showLoading = true
         break
       }
       case CellStatus.Withdrawing: {
         message = t('nervos-dao.compensation-period.stage-messages.withdrawing')
+        showLoading = true
         break
       }
       case CellStatus.Unlockable: {
@@ -122,17 +132,32 @@ export const DAORecord = ({
         break
       }
       case CellStatus.Depositing: {
-        message = t('nervos-dao.compensation-period.stage-messages.pending')
+        message = t('nervos-dao.compensation-period.stage-messages.deposit-in-progress')
+        showLoading = true
         break
       }
       case CellStatus.Deposited: {
-        message = t('nervos-dao.compensation-period.stage-messages.next-compensation-cycle', { days: leftDays || '--' })
+        if (leftHours) {
+          message = t('nervos-dao.compensation-period.stage-messages.next-compensation-cycle-hours', {
+            hours: leftHours || '--',
+          })
+        } else {
+          message = t('nervos-dao.compensation-period.stage-messages.next-compensation-cycle', {
+            days: leftDays || '--',
+          })
+        }
         break
       }
       case CellStatus.Locked: {
-        message = t('nervos-dao.compensation-period.stage-messages.compensation-cycle-will-end', {
-          days: leftDays || '--',
-        })
+        if (leftHours) {
+          message = t('nervos-dao.compensation-period.stage-messages.compensation-cycle-will-end-hours', {
+            hours: leftHours || '--',
+          })
+        } else {
+          message = t('nervos-dao.compensation-period.stage-messages.compensation-cycle-will-end', {
+            days: leftDays || '--',
+          })
+        }
         break
       }
       default: {
@@ -149,7 +174,7 @@ export const DAORecord = ({
   const isWithdrawnDisabled = CellStatus.Deposited === cellStatus && !hasCkbBalance
   const isActionAvailable =
     connectionStatus === 'online' &&
-    [CellStatus.Deposited, CellStatus.Unlockable].includes(cellStatus) &&
+    [CellStatus.Deposited, CellStatus.Unlockable, CellStatus.Depositing].includes(cellStatus) &&
     !isWithdrawnDisabled
 
   const depositOutPointKey = depositOutPoint
@@ -279,10 +304,20 @@ export const DAORecord = ({
                 />
               )}
             </div>
-            <span className={styles.message}>{message}</span>
+            {showLoading ? (
+              <p className={styles.depositingMsg}>
+                {message}
+                <Spinner className={styles.spinner} />
+              </p>
+            ) : (
+              <span className={styles.message}>{message}</span>
+            )}
           </div>
 
           <div className={styles.action}>
+            {cellStatus === CellStatus.Locked ? (
+              <div className={styles.lockWarn}>{t('nervos-dao.deposit-record.lock-warn')}</div>
+            ) : null}
             {isWithdrawnDisabled ? (
               <Tooltip
                 tip={<div>{t('nervos-dao.deposit-record.insufficient-balance-to-unlock')}</div>}
@@ -305,7 +340,11 @@ export const DAORecord = ({
                 data-index={index}
                 onClick={onClick}
                 disabled={!isActionAvailable}
-                label={t(`nervos-dao.deposit-record.${isWithdrawn ? 'unlock' : 'withdraw'}-action-label`)}
+                label={
+                  cellStatus === CellStatus.Depositing
+                    ? t('nervos-dao.deposit-record.view-tx-detail')
+                    : t(`nervos-dao.deposit-record.${isWithdrawn ? 'unlock' : 'withdraw'}-action-label`)
+                }
               />
             )}
           </div>
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
index 5e16c40df8..c3fa5bf4f9 100644
--- a/packages/neuron-ui/src/locales/en.json
+++ b/packages/neuron-ui/src/locales/en.json
@@ -691,7 +691,7 @@
       "free": "Available",
       "locked": "Locked",
       "deposit": "Deposit",
-      "deposit-rules": "Deposit rules",
+      "deposit-rules": "Deposit Rules",
       "copy-balance": "Copy Balance",
       "deposit-records": "Deposits",
       "completed-records": "Completed",
@@ -714,6 +714,8 @@
       "estimated-apc": "Estimated APC",
       "estimated-apc-tooltip": "Estimated Annual Percentage Compensation",
       "deposit-amount": "Deposit Amount (CKB)",
+      "attention": "Attention: Once deposited into the Nervos DAO, your deposits will be locked for at least 180 Epochs (about 30 days).",
+      "deposit-submitted": "Deposit submitted",
       "deposit-record": {
         "deposited-at": "Deposited",
         "completed-at": "Completed",
@@ -730,7 +732,8 @@
         "days-hours": "{{days}} days {{hours}} hours",
         "no-deposit": "No Deposit",
         "no-completed": "No Completed",
-        "insufficient-balance-to-unlock": "Balance is not enough for transaction fee to unlock the deposit"
+        "insufficient-balance-to-unlock": "Balance is not enough for transaction fee to unlock the deposit",
+        "lock-warn": "Lock to end of current compensation cycle"
       },
       "compensation-period": {
         "tooltip": {
@@ -743,12 +746,14 @@
           "withdrawn": "Withdrawn"
         },
         "stage-messages": {
-          "pending": "Pending...",
+          "deposit-in-progress": "Deposit in progress",
           "immature-for-withdraw": "CKB cannot be withdrawn for the next {{ hours }} hours",
           "immature-for-unlock": "CKB cannot be unlocked for the next {{ hours }} hours",
           "next-compensation-cycle": "The next compensation cycle will start in approximately {{days}} days",
+          "next-compensation-cycle-hours": "The next compensation cycle will start in approximately {{hours}} hours",
           "withdrawing": "Withdrawing...",
           "compensation-cycle-will-end": "Compensation cycle ends in approximately {{days}} days",
+          "compensation-cycle-will-end-hours": "Compensation cycle ends in approximately {{hours}} hours",
           "compensation-cycle-has-ended": "Cycle has ended, CKB is ready to be unlocked",
           "unlocking": "Unlocking..."
         }
@@ -771,6 +776,16 @@
       "cancel": "Cancel",
       "next": "Next"
     },
+    "deposit-rules": {
+      "minimum-deposit": "Minimum Deposit",
+      "single-compensation-cycle": "Single Compensation Cycle",
+      "single-compensation-cycle-description": "180 Epochs (About 30 days)",
+      "withdraw": "Withdraw",
+      "withdraw-description": "Anytime",
+      "unlock": "Unlock",
+      "unlock-description": "After the current compensation cycle",
+      "get": "Get"
+    },
     "lock-info-dialog": {
       "address-info": "Address Information",
       "deprecated-address": "Deprecated address"
diff --git a/packages/neuron-ui/src/locales/es.json b/packages/neuron-ui/src/locales/es.json
index 590e452f5f..4e0598672c 100644
--- a/packages/neuron-ui/src/locales/es.json
+++ b/packages/neuron-ui/src/locales/es.json
@@ -697,6 +697,8 @@
       "estimated-apc": "Estimación APC",
       "estimated-apc-tooltip": "Estimación de Compensación Anual",
       "deposit-amount": "Cantidad a Depositar (CKB)",
+      "attention": "Atención: Una vez depositado en el DAO de Nervos, sus depósitos estarán bloqueados durante al menos 180 épocas (unos 30 días).",
+      "deposit-submitted": "Depósito presentado",
       "deposit-record": {
         "deposited-at": "Depositado",
         "completed-at": "Completado",
@@ -712,7 +714,9 @@
         "compensated-period": "Período de Compensación",
         "days-hours": "{{days}} días {{hours}} horas",
         "no-deposit": "Sin Depósito",
-        "no-completed": "Sin Completar"
+        "no-completed": "Sin Completar",
+        "insufficient-balance-to-unlock": "El saldo no es suficiente para que la comisión de transacción desbloquee el depósito",
+        "lock-warn": "Bloqueo al final del ciclo de compensación actual"
       },
       "compensation-period": {
         "tooltip": {
@@ -725,12 +729,14 @@
           "withdrawn": "Retirado"
         },
         "stage-messages": {
-          "pending": "Pendiente...",
-          "immature-for-withdraw": "No se puede retirar CKB durante las próximas {{ horas }} horas",
-          "immature-for-unlock": "No se puede desbloquear CKB durante las próximas {{ horas }} horas",
-          "next-compensation-cycle": "El siguiente ciclo de compensación comenzará en aproximadamente {{días}} días",
+          "deposit-in-progress": "Depósito en curso...",
+          "immature-for-withdraw": "No se puede retirar CKB durante las próximas {{ hours }} horas",
+          "immature-for-unlock": "No se puede desbloquear CKB durante las próximas {{ hours }} horas",
+          "next-compensation-cycle": "El siguiente ciclo de compensación comenzará en aproximadamente {{days}} días",
+          "next-compensation-cycle-hours": "El siguiente ciclo de compensación comenzará en aproximadamente {{hours}} horas",
           "withdrawing": "Retirando...",
-          "compensation-cycle-will-end": "El ciclo de compensación termina en aproximadamente {{días}} días",
+          "compensation-cycle-will-end": "El ciclo de compensación termina en aproximadamente {{days}} días",
+          "compensation-cycle-will-end-hours": "El ciclo de compensación termina en aproximadamente {{hours}} horas",
           "compensation-cycle-has-ended": "El ciclo ha terminado, CKB está listo para ser desbloqueado",
           "unlocking": "Desbloqueando..."
         }
@@ -753,6 +759,16 @@
       "cancel": "Cancelar",
       "next": "Siguiente"
     },
+    "deposit-rules": {
+      "minimum-deposit": "Depósito mínimo",
+      "single-compensation-cycle": "Ciclo de compensación único",
+      "single-compensation-cycle-description": "180 Época (unos 30 días)",
+      "withdraw": "Retirar",
+      "withdraw-description": "En cualquier momento",
+      "unlock": "Desbloquear",
+      "unlock-description": "Después del ciclo de compensación actual",
+      "get": "Visite"
+    },
     "lock-info-dialog": {
       "address-info": "Información de dirección",
       "deprecated-address": "Dirección obsoleta"
diff --git a/packages/neuron-ui/src/locales/fr.json b/packages/neuron-ui/src/locales/fr.json
index c42bfc3594..ae4c673332 100644
--- a/packages/neuron-ui/src/locales/fr.json
+++ b/packages/neuron-ui/src/locales/fr.json
@@ -704,6 +704,8 @@
       "estimated-apc": "Estimation de APC",
       "estimated-apc-tooltip": "Estimation de Compensation Annuel",
       "deposit-amount": "Montant du dépôt (CKB)",
+      "attention": "Attention : Une fois déposés dans la DAO Nervos, vos dépôts seront bloqués pendant au moins 180 époques (environ 30 jours).",
+      "deposit-submitted": "Dépôt de garantie",
       "deposit-record": {
         "deposited-at": "Déposé",
         "completed-at": "Terminé",
@@ -720,7 +722,8 @@
         "days-hours": "{{days}} jours {{hours}} heures",
         "no-deposit": "Aucun dépôt",
         "no-completed": "Aucun terminé",
-        "insufficient-balance-to-unlock": "Le solde n'est pas suffisant pour payer les frais de transaction afin de débloquer le dépôt DAO."
+        "insufficient-balance-to-unlock": "Le solde n'est pas suffisant pour payer les frais de transaction afin de débloquer le dépôt DAO.",
+        "lock-warn": "Verrouillage à la fin du cycle de compensation en cours"
       },
       "compensation-period": {
         "tooltip": {
@@ -733,12 +736,14 @@
           "withdrawn": "Retiré"
         },
         "stage-messages": {
-          "pending": "En attente...",
+          "deposit-in-progress": "En attente...",
           "immature-for-withdraw": "Les CKB ne peuvent pas être retirés pendant les {{ hours }} prochaines heures",
           "immature-for-unlock": "Les CKB ne peuvent pas être déverrouillés pendant les {{ hours }} prochaines heures",
           "next-compensation-cycle": "Le prochain cycle de compensation commencera dans environ {{days}} jours",
+          "next-compensation-cycle-hours": "Le prochain cycle de compensation commencera dans environ {{hours}} heures",
           "withdrawing": "Retrait en cours...",
           "compensation-cycle-will-end": "La période de compensation se termine dans environ {{days}} jours",
+          "compensation-cycle-will-end-hours": "La période de compensation se termine dans environ {{hours}} heures",
           "compensation-cycle-has-ended": "Le cycle est terminé, les CKB sont prêts à être déverrouillés",
           "unlocking": "Déverrouillage en cours..."
         }
@@ -761,6 +766,16 @@
       "cancel": "Annuler",
       "next": "Suivant"
     },
+    "deposit-rules": {
+      "minimum-deposit": "Dépôt minimum",
+      "single-compensation-cycle": "Cycle de compensation unique",
+      "single-compensation-cycle-description": "180 Époque (environ 30 jours)",
+      "withdraw": "Retirer",
+      "withdraw-description": "A tout moment",
+      "unlock": "Déverrouiller",
+      "unlock-description": "Après le cycle de compensation en cours",
+      "get": "Obtenir"
+    },
     "lock-info-dialog": {
       "address-info": "Informations sur l'adresse",
       "deprecated-address": "Adresse obsolète"
diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json
index b6b4baad1d..adc58f4af2 100644
--- a/packages/neuron-ui/src/locales/zh-tw.json
+++ b/packages/neuron-ui/src/locales/zh-tw.json
@@ -708,6 +708,8 @@
       "estimated-apc": "預計年化鎖定補貼率",
       "estimated-apc-tooltip": "預計年化鎖定補貼率",
       "deposit-amount": "存入金額 (CKB)",
+      "attention": "請注意： 一旦存入 Nervos DAO，您的存款將被鎖定至少 180 個 Epochs（約 30 天）。",
+      "deposit-submitted": "存入已提交",
       "deposit-record": {
         "deposited-at": "存入於",
         "completed-at": "已取出",
@@ -724,7 +726,8 @@
         "days-hours": "{{days}} 天 {{hours}} 小時",
         "no-deposit": "沒有存入記錄",
         "no-completed": "沒有解鎖記錄",
-        "insufficient-balance-to-unlock": "沒有足夠余額支付交易費用以解鎖 DAO 存款"
+        "insufficient-balance-to-unlock": "沒有足夠余額支付交易費用以解鎖 DAO 存款",
+        "lock-warn": "鎖定至當前補償週期結束"
       },
       "compensation-period": {
         "tooltip": {
@@ -737,17 +740,50 @@
           "withdrawn": "已提取"
         },
         "stage-messages": {
-          "pending": "正在存入...",
+          "deposit-in-progress": "正在存入...",
           "immature-for-withdraw": "{{hours}} 小時內無法提取 CKB",
           "immature-for-unlock": "{{hours}} 小時內無法解鎖 CKB",
           "next-compensation-cycle": "下一補償週期約在 {{days}} 天后開始",
+          "next-compensation-cycle-hours": "下一補償週期約在 {{hours}} 小時后開始",
           "withdrawing": "正在提取...",
           "compensation-cycle-will-end": "補償週期約在 {{days}} 天后結束",
+          "compensation-cycle-will-end-hours": "補償週期約在 {{hours}} 小時后結束",
           "compensation-cycle-has-ended": "補償週期已結束, 可以解鎖 CKB",
           "unlocking": "解鎖中..."
         }
       }
     },
+    "nervos-dao-detail": {
+      "tx-detail": "交易詳情",
+      "deposited": "存入",
+      "withdrawn": "發起提取",
+      "unlocked": "解鎖",
+      "basic-information": "基本信息",
+      "transaction-hash": "交易哈希",
+      "blockNumber": "區塊高度",
+      "datetime": "時間",
+      "income": "收入",
+      "index": "序號",
+      "address": "地址",
+      "amount": "數量",
+      "cell-from-cellbase": "來自 Cellbase",
+      "cancel": "取消",
+      "next": "下一步"
+    },
+    "deposit-rules": {
+      "minimum-deposit": "最低存入額",
+      "single-compensation-cycle": "單一補償週期",
+      "single-compensation-cycle-description": "180 個 Epochs（約 30 天）",
+      "withdraw": "提取",
+      "withdraw-description": "任意時間",
+      "unlock": "解鎖",
+      "unlock-description": "目前補償週期結束後",
+      "get": "好的"
+    },
+    "lock-info-dialog": {
+      "address-info": "地址信息",
+      "deprecated-address": "已棄用格式的地址"
+    },
     "updates": {
       "check-updates": "檢查更新",
       "checking-updates": "正在檢查更新…",
diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
index c837c54415..4d9bbb30cd 100644
--- a/packages/neuron-ui/src/locales/zh.json
+++ b/packages/neuron-ui/src/locales/zh.json
@@ -707,6 +707,8 @@
       "estimated-apc": "预计年化锁定补贴率",
       "estimated-apc-tooltip": "预计年化锁定补贴率",
       "deposit-amount": "存入金额 (CKB)",
+      "attention": "请注意： 一旦存入 Nervos DAO，您的存款将被锁定至少 180 个 Epochs（约 30 天）。",
+      "deposit-submitted": "存入已提交",
       "deposit-record": {
         "deposited-at": "存入于",
         "completed-at": "已取出",
@@ -723,7 +725,8 @@
         "days-hours": "{{days}} 天 {{hours}} 小时",
         "no-deposit": "没有存入记录",
         "no-completed": "没有解锁记录",
-        "insufficient-balance-to-unlock": "没有足够余额支付交易费用以解锁 DAO 存款"
+        "insufficient-balance-to-unlock": "没有足够余额支付交易费用以解锁 DAO 存款",
+        "lock-warn": "锁定至当前补偿周期结束"
       },
       "compensation-period": {
         "tooltip": {
@@ -736,12 +739,14 @@
           "withdrawn": "已提取"
         },
         "stage-messages": {
-          "pending": "正在存入...",
+          "deposit-in-progress": "正在存入...",
           "immature-for-withdraw": "{{hours}} 小时内无法提取 CKB",
           "immature-for-unlock": "{{hours}} 小时内无法解锁 CKB",
           "next-compensation-cycle": "下一补偿周期约在 {{days}} 天后开始",
+          "next-compensation-cycle-hours": "下一补偿周期约在 {{hours}} 小时后开始",
           "withdrawing": "正在提取...",
           "compensation-cycle-will-end": "补偿周期约在 {{days}} 天后结束",
+          "compensation-cycle-will-end-hours": "补偿周期约在 {{hours}} 小时后结束",
           "compensation-cycle-has-ended": "补偿周期已结束, 可以解锁 CKB",
           "unlocking": "解锁中..."
         }
@@ -764,6 +769,16 @@
       "cancel": "取消",
       "next": "下一步"
     },
+    "deposit-rules": {
+      "minimum-deposit": "最低存入额",
+      "single-compensation-cycle": "单补偿周期",
+      "single-compensation-cycle-description": "180 个 Epochs（约 30 天）",
+      "withdraw": "提取",
+      "withdraw-description": "任意时间",
+      "unlock": "解锁",
+      "unlock-description": "当前补偿周期结束后",
+      "get": "好的"
+    },
     "lock-info-dialog": {
       "address-info": "地址信息",
       "deprecated-address": "已弃用格式的地址"
diff --git a/packages/neuron-ui/src/widgets/Icons/DepositTimeSort.svg b/packages/neuron-ui/src/widgets/Icons/DepositTimeSort.svg
new file mode 100644
index 0000000000..a6591db275
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/DepositTimeSort.svg
@@ -0,0 +1,14 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_36805_30757)">
+<path d="M3.75 10H9.0625" stroke="#666666" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75 5H14.0625" stroke="#666666" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.75 15H7.8125" stroke="#666666" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.25 13.125L14.375 16.25L17.5 13.125" stroke="#666666" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.375 16.25V8.75" stroke="#666666" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_36805_30757">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/icon.tsx b/packages/neuron-ui/src/widgets/Icons/icon.tsx
index ecdd2b8c2e..806510ad82 100644
--- a/packages/neuron-ui/src/widgets/Icons/icon.tsx
+++ b/packages/neuron-ui/src/widgets/Icons/icon.tsx
@@ -56,6 +56,7 @@ import { ReactComponent as DetectSvg } from './Detect.svg'
 import { ReactComponent as DeleteSvg } from './Delete.svg'
 import { ReactComponent as ImportKeystoreSvg } from './SoftWalletImportKeystore.svg'
 import { ReactComponent as ImportHardwareSvg } from './HardWalletImport.svg'
+import { ReactComponent as DepositTimeSortSvg } from './DepositTimeSort.svg'
 
 import styles from './icon.module.scss'
 
@@ -128,3 +129,4 @@ export const Detect = WrapSvg(DetectSvg)
 export const Delete = WrapSvg(DeleteSvg)
 export const ImportKeystore = WrapSvg(ImportKeystoreSvg)
 export const ImportHardware = WrapSvg(ImportHardwareSvg)
+export const DepositTimeSort = WrapSvg(DepositTimeSortSvg)