diff --git a/src/locales/en.json b/src/locales/en.json
index 750db8663..62bb60503 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -740,6 +740,10 @@
       "repeat_inscription_symbol": "This inscription is a duplicate with an earlier release of the same symbol."
     },
     "xudt": {
+      "holder_allocation": "Holder Allocation",
+      "holder_allocation_description": "There are {{ckb}} CKB Holders and {{btc}} BTC holders of current asset.",
+      "lock_hash": "Lock Hash",
+      "count": "Count",
       "xudt": "xUDT",
       "xudts": "xUDTs",
       "name": "Name",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 5b2f8a292..2e3f0e4b3 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -741,6 +741,10 @@
       "repeat_inscription_symbol": "此铭文与早期发布的铭文同名"
     },
     "xudt": {
+      "holder_allocation": "地址分布",
+      "holder_allocation_description": "当前地址有{{ckb}} CKB地址持有人及{{btc}} BTC 地址持有人",
+      "lock_hash": "Lock Hash",
+      "count": "Count",
       "xudt": "xUDT",
       "xudts": "xUDTs",
       "name": "名称",
diff --git a/src/models/Xudt/index.ts b/src/models/Xudt/index.ts
index 79af5dc7e..f5e10c234 100644
--- a/src/models/Xudt/index.ts
+++ b/src/models/Xudt/index.ts
@@ -14,6 +14,14 @@ export interface XUDT {
   typeScript: Script
   udtType: 'xudt'
   xudtTags?: string[]
+  holderAllocation: {
+    ckbHoldersCount: string
+    btcHoldersCount: string
+    lockHoderAmount: {
+      lock: string
+      holderAmount: string
+    }[]
+  }
   iconFile: string
   operatorWebsite: string
   email: string
diff --git a/src/pages/Xudt/HolderAllocation.module.scss b/src/pages/Xudt/HolderAllocation.module.scss
new file mode 100644
index 000000000..6f6560979
--- /dev/null
+++ b/src/pages/Xudt/HolderAllocation.module.scss
@@ -0,0 +1,109 @@
+@import '../../styles/variables.module';
+
+.holderAllocationContainer {
+  background-color: #fff;
+  margin: 15% auto;
+  padding: 20px 24px 20px 40px;
+  width: 497px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $mobileBreakPoint) {
+    width: 90%;
+    margin-top: 20vh;
+    padding: 24px 16px;
+  }
+
+  .closeIcon {
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .holderAllocationContent {
+    background-color: #fff;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+
+    @media (max-width: $mobileBreakPoint) {
+      align-items: flex-start;
+
+      p {
+        line-height: 24px;
+      }
+    }
+
+    h2 {
+      color: #333;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      margin: 0;
+    }
+
+    p {
+      margin: 0;
+      color: #333;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      width: 100%;
+      word-wrap: break-word;
+    }
+
+    .table {
+      border-radius: 4px;
+      border: 1px solid #e5e5e5;
+      padding: 1px;
+
+      table {
+        thead {
+          background: #fafafa;
+
+          tr {
+            div {
+              color: #666;
+              font-size: 14px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+              text-transform: capitalize;
+            }
+          }
+        }
+
+        tbody {
+          tr {
+            div {
+              color: #333;
+              font-size: 14px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+            }
+          }
+        }
+
+        thead,
+        tbody {
+          tr {
+            border-radius: 4px;
+
+            div {
+              font-size: 14px;
+              padding: 12px 16px;
+            }
+          }
+        }
+
+        width: 312px;
+        background: #fff;
+      }
+    }
+  }
+}
diff --git a/src/pages/Xudt/HolderAllocation.tsx b/src/pages/Xudt/HolderAllocation.tsx
new file mode 100644
index 000000000..fb6f37540
--- /dev/null
+++ b/src/pages/Xudt/HolderAllocation.tsx
@@ -0,0 +1,69 @@
+import { useTranslation } from 'react-i18next'
+import { MouseEventHandler } from 'react'
+import styles from './HolderAllocation.module.scss'
+import { localeNumberString } from '../../utils/number'
+import CloseIcon from '../../assets/modal_close.png'
+import SimpleButton from '../../components/SimpleButton'
+
+const HolderAllocation = ({
+  ckbHolderAmount,
+  btcHolderAmount,
+  lockHoderAmount,
+  onClose,
+}: {
+  ckbHolderAmount: string
+  btcHolderAmount: string
+  lockHoderAmount?: {
+    lock: string
+    holderAmount: string
+  }[]
+  onClose: MouseEventHandler<HTMLDivElement>
+}) => {
+  const [t] = useTranslation()
+  return (
+    <div className={styles.holderAllocationContainer}>
+      <div className={styles.holderAllocationContent}>
+        <h2>{t('xudt.holder_allocation')}</h2>
+        <p>
+          {t('xudt.holder_allocation_description', {
+            ckb: localeNumberString(ckbHolderAmount),
+            btc: localeNumberString(btcHolderAmount),
+          })}
+        </p>
+        {lockHoderAmount && (
+          <div className={styles.table}>
+            <table>
+              <thead>
+                <tr>
+                  <td>
+                    <div>{t('xudt.lock_hash')}</div>
+                  </td>
+                  <td>
+                    <div>{t('xudt.count')}</div>
+                  </td>
+                </tr>
+              </thead>
+              <tbody>
+                {lockHoderAmount.map(amount => (
+                  <tr>
+                    <td>
+                      <div>{amount.lock}</div>
+                    </td>
+                    <td>
+                      <div>{amount.holderAmount}</div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+      <SimpleButton onClick={onClose} className={styles.closeIcon}>
+        <img src={CloseIcon} alt="close icon" />
+      </SimpleButton>
+    </div>
+  )
+}
+
+export default HolderAllocation
diff --git a/src/pages/Xudt/UDTComp.tsx b/src/pages/Xudt/UDTComp.tsx
index 4f4bc9cd4..5560f2ab9 100644
--- a/src/pages/Xudt/UDTComp.tsx
+++ b/src/pages/Xudt/UDTComp.tsx
@@ -8,7 +8,6 @@ import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons'
 import { Link } from '../../components/Link'
 import { CsvExport } from '../../components/CsvExport'
 import TransactionItem from '../../components/TransactionItem/index'
-import { UDTTransactionsPagination, UDTTransactionsPanel, TypeScriptController, UDTNoResultPanel } from './styled'
 import { parseUDTAmount } from '../../utils/number'
 import { ReactComponent as OpenInNew } from '../../assets/open_in_new.svg'
 import { deprecatedAddrToNewAddr, getBtcUtxo } from '../../utils/util'
@@ -24,6 +23,9 @@ import { RawBtcRPC } from '../../services/ExplorerService'
 import { XUDT } from '../../models/Xudt'
 import { getBtcTxList } from '../../services/ExplorerService/fetcher'
 import XUDTTag from '../../components/XUDTTag'
+import SimpleButton from '../../components/SimpleButton'
+import SimpleModal from '../../components/Modal'
+import HolderAllocation from './HolderAllocation'
 import { ReactComponent as EditIcon } from '../../assets/edit.svg'
 import XUDTTokenIcon from '../../assets/sudt_token.png'
 
@@ -67,6 +69,7 @@ export const UDTOverviewCard = ({
   const { t } = useTranslation()
   const isMobile = useIsMobile()
   const [isScriptDisplayed, setIsScriptDisplayed] = useState(false)
+  const [showHolderAmountModal, setShowHolderAmountModal] = useState(false)
   const [isModifyTokenInfoModalOpen, setIsModifyTokenInfoModalOpen] = useState<boolean>(false)
 
   const issuer = xudt?.issuerAddress
@@ -116,7 +119,18 @@ export const UDTOverviewCard = ({
     },
     {
       title: t('xudt.holder_addresses'),
-      content: xudt?.addressesCount ?? '-',
+      content: xudt?.addressesCount ? (
+        <SimpleButton
+          className={styles.holderAddressesButton}
+          onClick={() => {
+            setShowHolderAmountModal(true)
+          }}
+        >
+          {xudt.addressesCount}
+        </SimpleButton>
+      ) : (
+        '-'
+      ),
     },
     {
       title: t('xudt.symbol'),
@@ -181,8 +195,16 @@ export const UDTOverviewCard = ({
         </div>
 
         <CardCellsLayout type="left-right" cells={items} borderTop />
+        <SimpleModal isShow={showHolderAmountModal} setIsShow={setShowHolderAmountModal}>
+          <HolderAllocation
+            onClose={() => setShowHolderAmountModal(false)}
+            ckbHolderAmount={xudt?.holderAllocation.ckbHoldersCount ?? '0'}
+            btcHolderAmount={xudt?.holderAllocation.btcHoldersCount ?? '0'}
+            lockHoderAmount={xudt?.holderAllocation.lockHoderAmount}
+          />
+        </SimpleModal>
 
-        <TypeScriptController onClick={toggleScriptDisplay}>
+        <SimpleButton className={styles.typeScriptController} onClick={toggleScriptDisplay}>
           {isScriptDisplayed ? (
             <div className={styles.scriptToggle}>
               <EyeOpenIcon />
@@ -194,7 +216,7 @@ export const UDTOverviewCard = ({
               <div>{t('xudt.type_script_hash')}</div>
             </div>
           )}
-        </TypeScriptController>
+        </SimpleButton>
 
         {isScriptDisplayed ? (
           script && <Script script={script} />
@@ -236,14 +258,14 @@ export const UDTComp = ({
 
   if (filterNoResult) {
     return (
-      <UDTNoResultPanel>
+      <div className={styles.udtNoResultPanel}>
         <span>{t('search.udt_filter_no_result')}</span>
-      </UDTNoResultPanel>
+      </div>
     )
   }
   return (
     <>
-      <UDTTransactionsPanel>
+      <div className={styles.udtTransactionsPanel}>
         {transactions.map(
           (transaction, index) =>
             transaction && (
@@ -256,15 +278,15 @@ export const UDTComp = ({
               />
             ),
         )}
-      </UDTTransactionsPanel>
-      <UDTTransactionsPagination>
+      </div>
+      <div className={styles.udtTransactionsPagination}>
         <PaginationWithRear
           currentPage={currentPage}
           totalPages={totalPages}
           onChange={onPageChange}
           rear={xudt ? <CsvExport link={`/export-xudt-holders?id=${xudt.typeHash}`} /> : null}
         />
-      </UDTTransactionsPagination>
+      </div>
     </>
   )
 }
diff --git a/src/pages/Xudt/index.tsx b/src/pages/Xudt/index.tsx
index 7c80c0613..db94bed7e 100644
--- a/src/pages/Xudt/index.tsx
+++ b/src/pages/Xudt/index.tsx
@@ -1,8 +1,8 @@
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from '@tanstack/react-query'
+import classNames from 'classnames'
 import Content from '../../components/Content'
-import { UDTContentPanel, UDTTransactionTitlePanel } from './styled'
 import UDTComp, { UDTOverviewCard } from './UDTComp'
 import { usePaginationParamsInPage, useSearchParams, useUpdateSearchParams } from '../../hooks'
 import Filter from '../../components/Filter'
@@ -68,12 +68,12 @@ export const Xudt = () => {
 
   return (
     <Content>
-      <UDTContentPanel className="container">
+      <div className={classNames(styles.container, 'container')}>
         <UDTOverviewCard typeHash={typeHash} xudt={xudt} refetchUDT={queryUDT.refetch} />
 
-        <UDTTransactionTitlePanel>
-          <div className="udtTransactionContainer">
-            <div className="udtTransactionTitle">
+        <div className={styles.udtTransactionTitlePanel}>
+          <div className={styles.udtTransactionContainer}>
+            <div className={styles.udtTransactionTitle}>
               {`${t('transaction.transactions')} (${localeNumberString(total)})`}
             </div>
             <div className={styles.searchAndfilter}>
@@ -86,7 +86,7 @@ export const Xudt = () => {
               />
             </div>
           </div>
-        </UDTTransactionTitlePanel>
+        </div>
 
         <QueryResult query={querySimpleUDTTransactions} delayLoading>
           {data => (
@@ -101,7 +101,7 @@ export const Xudt = () => {
             />
           )}
         </QueryResult>
-      </UDTContentPanel>
+      </div>
     </Content>
   )
 }
diff --git a/src/pages/Xudt/styled.tsx b/src/pages/Xudt/styled.tsx
deleted file mode 100644
index d8c28d3eb..000000000
--- a/src/pages/Xudt/styled.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import styled from 'styled-components'
-import SimpleButton from '../../components/SimpleButton'
-import variables from '../../styles/variables.module.scss'
-
-export const UDTContentPanel = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 25px;
-  margin-bottom: 40px;
-
-  @media (max-width: ${variables.mobileBreakPoint}) {
-    margin: 0;
-    padding: 20px;
-  }
-`
-
-export const TypeScriptController = styled(SimpleButton)`
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  color: ${props => props.theme.primary};
-  display: flex;
-  align-items: center;
-
-  > img {
-    width: 12px;
-    height: 12px;
-    margin: 2px 0 0 5px;
-  }
-
-  @media (max-width: ${variables.mobileBreakPoint}) {
-    font-size: 14px;
-
-    > img {
-      margin: 0 0 0 5px;
-    }
-  }
-`
-
-export const UDTTransactionsPanel = styled.div`
-  width: 100%;
-`
-
-export const UDTTransactionsPagination = styled.div`
-  margin-top: 4px;
-  width: 100%;
-`
-
-export const UDTTransactionTitlePanel = styled.div`
-  width: 100%;
-  height: 58px;
-  padding: 0 40px;
-  background: white;
-  border-radius: 6px 6px 0 0;
-  box-shadow: 2px 2px 6px 0 #dfdfdf;
-
-  @media (max-width: ${variables.mobileBreakPoint}) {
-    height: 108px;
-    padding: 16px;
-  }
-
-  .udtTransactionContainer {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 18px;
-    margin-bottom: 5px;
-
-    @media (max-width: ${variables.mobileBreakPoint}) {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-
-  .udtTransactionTitle {
-    font-size: 24px;
-    font-weight: 600;
-    font-style: normal;
-    line-height: 0.83;
-  }
-`
-
-export const UDTNoResultPanel = styled.div`
-  width: 100%;
-  height: 94px;
-  border-radius: 0 0 6px 6px;
-  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
-  background-color: #fff;
-  margin-top: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  > span {
-    white-space: pre-wrap;
-    font-size: 14px;
-    letter-spacing: 0.2px;
-    color: #666;
-    text-align: center;
-  }
-`
diff --git a/src/pages/Xudt/styles.module.scss b/src/pages/Xudt/styles.module.scss
index cf8c158a7..2509eb0ae 100644
--- a/src/pages/Xudt/styles.module.scss
+++ b/src/pages/Xudt/styles.module.scss
@@ -1,5 +1,58 @@
 @import '../../styles/variables.module';
 
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 25px;
+  margin-bottom: 40px;
+
+  @media (max-width: $mobileBreakPoint) {
+    margin: 0;
+    padding: 20px;
+  }
+}
+
+.udtTransactionTitlePanel {
+  width: 100%;
+  height: 58px;
+  padding: 0 40px;
+  background: white;
+  border-radius: 6px 6px 0 0;
+  box-shadow: 2px 2px 6px 0 #dfdfdf;
+
+  @media (max-width: $mobileBreakPoint) {
+    height: 108px;
+    padding: 16px;
+  }
+
+  .udtTransactionContainer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 18px;
+    margin-bottom: 5px;
+
+    @media (max-width: $mobileBreakPoint) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  .udtTransactionTitle {
+    font-size: 24px;
+    font-weight: 600;
+    font-style: normal;
+    line-height: 0.83;
+  }
+}
+
+.holderAddressesButton {
+  color: var(--primary-color);
+}
+
 .udtOverviewCard:not(
     [_='This `:not` selector is used to increase the specificity of the selector and serves no other purpose.']
   ) {
@@ -158,3 +211,55 @@
   background: #f7f7f7;
   word-break: break-all;
 }
+
+.udtNoResultPanel {
+  width: 100%;
+  height: 94px;
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
+  background-color: #fff;
+  margin-top: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  > span {
+    white-space: pre-wrap;
+    font-size: 14px;
+    letter-spacing: 0.2px;
+    color: #666;
+    text-align: center;
+  }
+}
+
+.udtTransactionsPagination {
+  margin-top: 4px;
+  width: 100%;
+}
+
+.typeScriptController {
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--primary-color);
+  display: flex;
+  align-items: center;
+
+  > img {
+    width: 12px;
+    height: 12px;
+    margin: 2px 0 0 5px;
+  }
+
+  @media (max-width: $mobileBreakPoint) {
+    font-size: 14px;
+
+    > img {
+      margin: 0 0 0 5px;
+    }
+  }
+}
+
+.udtTransactionsPanel {
+  width: 100%;
+}