diff --git a/src/_api/fetchTokens.ts b/src/_api/fetchTokens.ts
index 8aedd2af..0d84b0a0 100644
--- a/src/_api/fetchTokens.ts
+++ b/src/_api/fetchTokens.ts
@@ -6,40 +6,43 @@ import {
   TTokenListRequestParams,
 } from './type';
 import { IHolderTableData, ITokenDetail, ITokenList, ITransferTableData } from '@app/[chain]/token/[tokenSymbol]/type';
-
+const defaultTokenListData: ITokenList = {
+  total: 0,
+  list: [],
+};
 export async function fetchTokenList(params: TTokenListRequestParams): Promise<ITokenList> {
-  const result = await request.tx.getTransactionDetail({
+  const result = await request.token.getTokenList({
     params: params,
   });
-  const data = result?.data;
+  const data = result?.data || defaultTokenListData;
   return data;
 }
 export async function fetchServerTokenList(params: TTokenListRequestParams): Promise<ITokenList> {
-  const result = await request.tx.getTransactionDetail({
+  const result = await request.token.getServerTokenList({
     params: params,
   });
-  const data = result?.data;
+  const data = result?.data || defaultTokenListData;
   return data;
 }
 export async function fetchTokenDetail(params: ITokenDetailRequestParams): Promise<ITokenDetail> {
-  const result = await request.tx.getTransactionDetail({
+  const result = await request.token.getTokenDetail({
     params: params,
   });
   const data = result?.data;
   return data;
 }
 export async function fetchTokenDetailTransfers(params: ITokenTransfersRequestParams): Promise<ITransferTableData> {
-  const result = await request.tx.getTransactionDetail({
+  const result = await request.token.getTokenDetailTransfers({
     params: params,
   });
-  const data = result?.data;
+  const data = result?.data || defaultTokenListData;
   return data;
 }
 
 export async function fetchTokenDetailHolders(params: ITokenHoldersRequestParams): Promise<IHolderTableData> {
-  const result = await request.tx.getTransactionDetail({
+  const result = await request.token.getTokenDetailHolders({
     params: params,
   });
-  const data = result?.data;
+  const data = result?.data || defaultTokenListData;
   return data;
 }
diff --git a/src/_api/list.ts b/src/_api/list.ts
index 16831cb8..02082684 100644
--- a/src/_api/list.ts
+++ b/src/_api/list.ts
@@ -24,11 +24,11 @@ const Transaction_API_List = {
 };
 
 const Token_API_List = {
-  getTokenList: `api/app/token/list`,
-  getServerTokenList: `api/app/token/list`,
+  getTokenList: `${BASE_API}/app/token/list`,
+  getServerTokenList: `${SERVER_BASE_API}/app/token/list`,
   getTokenDetail: `${SERVER_BASE_API}/app/token/detail`,
-  getTokenDetailTransfers: `api/app/token/transfers`,
-  getTokenDetailHolders: `api/app/token/holders`,
+  getTokenDetailTransfers: `${BASE_API}/app/token/transfers`,
+  getTokenDetailHolders: `${BASE_API}/app/token/holders`,
 };
 
 const Common_API_List = {
@@ -48,6 +48,7 @@ export const API_List = {
   tx: Transaction_API_List,
   common: Common_API_List,
   cms: CMS_API_List,
+  token: Token_API_List,
 };
 
 type REQUEST_FUNCTION = (opt?: RequestWithParams) => Promise<any>;
diff --git a/src/_api/server.ts b/src/_api/server.ts
index 4b5873ee..00f6ae58 100644
--- a/src/_api/server.ts
+++ b/src/_api/server.ts
@@ -25,7 +25,7 @@ async function service(url: string, options: RequestWithParams) {
   const paramsArr: Array<any> = [];
   if (Object.keys(params).length > 0) {
     for (const item in params) {
-      if (params[item] !== undefined) {
+      if ((params[item] !== undefined && params[item]) || params[item] === 0) {
         paramsArr.push(item + '=' + params[item]);
       }
     }
diff --git a/src/_api/type.ts b/src/_api/type.ts
index 097c3a51..d9f6acf4 100644
--- a/src/_api/type.ts
+++ b/src/_api/type.ts
@@ -1,4 +1,5 @@
 import { ILogsProps } from '@_components/LogsContainer/type';
+import { SortEnum } from '@_types/common';
 
 export type TChainID = 'AELF' | 'tDVV' | 'tDVW';
 
@@ -194,6 +195,7 @@ export interface ITokenHoldersRequestParams {
   symbol: string;
   skipCount: number;
   maxResultCount: number;
+  // search: string;
 }
 
 export interface ITokenTransfersRequestParams {
@@ -213,6 +215,6 @@ export interface TTokenListRequestParams {
   chainId: TChainID;
   skipCount: number;
   maxResultCount: number;
-  sort: number;
+  sort: SortEnum;
   sortBy: number;
 }
diff --git a/src/_types/common.ts b/src/_types/common.ts
index bfdf0299..6e54239e 100644
--- a/src/_types/common.ts
+++ b/src/_types/common.ts
@@ -26,3 +26,8 @@ export enum AddressType {
   address,
   Contract,
 }
+
+export enum SortEnum {
+  asc,
+  desc,
+}
diff --git a/src/app/[chain]/block/[hash]/_components/detail.tsx b/src/app/[chain]/block/[hash]/_components/detail.tsx
index 8d0da7b1..71a9f65b 100644
--- a/src/app/[chain]/block/[hash]/_components/detail.tsx
+++ b/src/app/[chain]/block/[hash]/_components/detail.tsx
@@ -8,7 +8,7 @@
 'use client';
 import clsx from 'clsx';
 import HeadTitle from '@_components/HeaderTitle';
-import { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import './detail.css';
 import BaseInfo from './baseinfo';
 import ExtensionInfo from './ExtensionInfo';
@@ -21,7 +21,6 @@ import EPTabs from '@_components/EPTabs';
 import { useMobileAll } from '@_hooks/useResponsive';
 import { IBlocksDetailData, ITransactionsResponseItem } from '@_api/type';
 import { pageSizeOption } from '@_utils/contant';
-import { useAppSelector } from '@_store';
 import { useParams } from 'next/navigation';
 
 export default function Detail({ SSRData }) {
@@ -52,20 +51,11 @@ export default function Detail({ SSRData }) {
     setCurrentPage(page);
   };
 
-  const pageSizeChange = (size) => {
+  const pageSizeChange = (page, size) => {
+    setCurrentPage(page);
     setPageSize(size);
   };
 
-  const mountedRef = useRef<boolean>(true);
-  const { defaultChain } = useAppSelector((state) => state.getChainId);
-  useEffect(() => {
-    if (mountedRef.current) {
-      mountedRef.current = false;
-      return;
-    }
-    setPageSize(25);
-    setCurrentPage(1);
-  }, [defaultChain]);
   const tableData = useMemo(() => {
     const transactions = detailData.transactions || [];
     return transactions.slice((currentPage - 1) * pageSize, currentPage * pageSize);
diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Holders/index.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Holders/index.tsx
index 0fbddd9e..32d61881 100644
--- a/src/app/[chain]/token/[tokenSymbol]/_components/Holders/index.tsx
+++ b/src/app/[chain]/token/[tokenSymbol]/_components/Holders/index.tsx
@@ -34,6 +34,7 @@ export default function Holders({ search, onSearchChange, onSearchInputChange }:
       const res = await fetchTokenDetailHolders(params);
       setData(res.list);
       setTotal(res.total);
+      setLoading(false);
     } catch (error) {
       setLoading(false);
     }
@@ -43,9 +44,9 @@ export default function Holders({ search, onSearchChange, onSearchInputChange }:
     setCurrentPage(page);
   };
 
-  const pageSizeChange = async (size) => {
+  const pageSizeChange = async (page, size) => {
     setPageSize(size);
-    setCurrentPage(1);
+    setCurrentPage(page);
   };
 
   useEffect(() => {
@@ -70,7 +71,7 @@ export default function Holders({ search, onSearchChange, onSearchInputChange }:
           },
           onSearchChange,
         }}
-        showTopSearch
+        // showTopSearch
         loading={loading}
         dataSource={data}
         columns={columns}
diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Overview/index.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Overview/index.tsx
index 92a3e003..495c6d6b 100644
--- a/src/app/[chain]/token/[tokenSymbol]/_components/Overview/index.tsx
+++ b/src/app/[chain]/token/[tokenSymbol]/_components/Overview/index.tsx
@@ -23,7 +23,7 @@ const TokenDetailItems: IOverviewItem[] = [
   {
     key: 'holders',
     label: 'HOLDERS',
-    render: (text, record) => <NumberPercentGroup number={text} percent={record['holderPercentChange24h']} />,
+    render: (text, record) => <NumberPercentGroup number={text} percent={record['holderPercentChange24H']} />,
   },
   {
     key: 'totalTransfers',
@@ -33,20 +33,24 @@ const TokenDetailItems: IOverviewItem[] = [
   {
     key: 'priceInUsd',
     label: 'PRICE',
-    render: (text, record) => (
-      <NumberPercentGroup decorator="$" number={text} percent={record['pricePercentChange24h']} />
-    ),
+    render: (text, record) =>
+      record['pricePercentChange24h'] && record['pricePercentChange24h'] !== 0 ? (
+        <NumberPercentGroup decorator="$" number={text} percent={record['pricePercentChange24h']} />
+      ) : (
+        '--'
+      ),
   },
   {
     key: 'contractAddress',
     label: 'CONTRACT',
     tooltip:
       'This is the MultiToken contract that defines a common implementation for fungible and non-fungible tokens.',
-    render: (text) => <ContractToken address={text} type={AddressType.address} chainId="AELf" />,
+    render: (text) => (text ? <ContractToken address={text} type={AddressType.address} chainId="AELf" /> : '--'),
   },
   {
     key: 'decimals',
     label: 'DECIMAL',
+    render: (text) => (text && text !== 0 ? text : '--'),
   },
 ];
 
diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/columns.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/columns.tsx
index a4e62966..7700d29e 100644
--- a/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/columns.tsx
+++ b/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/columns.tsx
@@ -103,7 +103,7 @@ export default function getColumns({ timeFormat, handleTimeChange, chain }): Col
       width: 180,
       render: (data) => {
         const { address, addressType } = data;
-        return <ContractToken address={address} type={addressType} chainId={chain} />;
+        return <ContractToken address={address || ''} type={addressType} chainId={chain} />;
       },
     },
     {
diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/index.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/index.tsx
index c9845fe9..9f1593c8 100644
--- a/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/index.tsx
+++ b/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/index.tsx
@@ -32,7 +32,7 @@ export interface ITransfersRef {
   setSearchStr: (val: string) => void;
 }
 
-const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }: ITransfersProps, ref) => {
+const Transfers = ({ search, searchText, searchType, onSearchChange, onSearchInputChange }: ITransfersProps, ref) => {
   const { isMobile } = useMobileAll();
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [pageSize, setPageSize] = useState<number>(50);
@@ -54,17 +54,18 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
         symbol: tokenSymbol as string,
         skipCount: getPageNumber(currentPage, pageSize),
         maxResultCount: pageSize,
-        search: search || '',
+        search: searchText || '',
       };
       const res = await fetchTokenDetailTransfers(params);
       const { balance, value, list, total } = res;
       setData(list);
       setSearchData({ balance, value });
       setTotal(total);
+      setLoading(false);
     } catch (error) {
       setLoading(false);
     }
-  }, [chain, tokenSymbol, currentPage, pageSize, search]);
+  }, [chain, tokenSymbol, currentPage, pageSize, searchText]);
 
   useImperativeHandle(
     ref,
@@ -80,9 +81,9 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
   const pageChange = async (page: number) => {
     setCurrentPage(page);
   };
-  const pageSizeChange = async (size) => {
+  const pageSizeChange = async (page, size) => {
     setPageSize(size);
-    setCurrentPage(1);
+    setCurrentPage(page);
   };
 
   useEffect(() => {
@@ -96,7 +97,7 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
         handleTimeChange: () => setTimeFormat(timeFormat === 'Age' ? 'Date Time (UTC)' : 'Age'),
         chain,
       }),
-    [timeFormat],
+    [chain, timeFormat],
   );
   const title = useMemo(() => `A total of ${total} ${total <= 1 ? 'token' : 'tokens'} found`, [total]);
 
@@ -105,10 +106,10 @@ const Transfers = ({ search, searchType, onSearchChange, onSearchInputChange }:
     [address, isMobile, searchData],
   );
   const searchByHash: DescriptionsProps['items'] = useMemo(
-    () => getSearchByHashItems(address, isMobile),
-    [address, isMobile],
+    () => getSearchByHashItems(address, isMobile, chain, data[0]?.blockHeight),
+    [address, chain, data, isMobile],
   );
-
+  console.log(searchType, 'searchType');
   return (
     <div>
       {searchType !== SearchType.other && (
diff --git a/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/utils.tsx b/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/utils.tsx
index a7535ce0..c36b4812 100644
--- a/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/utils.tsx
+++ b/src/app/[chain]/token/[tokenSymbol]/_components/Transfers/utils.tsx
@@ -44,7 +44,12 @@ export function getSearchByHolderItems(
   ];
 }
 
-export function getSearchByHashItems(address: string, isMobile: boolean): DescriptionsProps['items'] {
+export function getSearchByHashItems(
+  address: string,
+  isMobile: boolean,
+  chain,
+  blockHeight,
+): DescriptionsProps['items'] {
   const spanWith2col = isMobile ? 4 : 2;
   return [
     {
@@ -55,7 +60,10 @@ export function getSearchByHashItems(address: string, isMobile: boolean): Descri
         fontWeight: 500,
       },
       children: (
-        <Link className="block w-[120px] truncate text-xs leading-5 text-link" href={`tx/${address}`}>
+        <Link
+          className="block w-[400px] truncate text-xs leading-5 text-link"
+          // href={`/${chain}/tx/${address}?blockHeight=${blockHeight}`}>
+          href="">
           {address}
         </Link>
       ),
diff --git a/src/app/[chain]/token/[tokenSymbol]/detail.tsx b/src/app/[chain]/token/[tokenSymbol]/detail.tsx
index 3f27b5b6..28b8ec64 100644
--- a/src/app/[chain]/token/[tokenSymbol]/detail.tsx
+++ b/src/app/[chain]/token/[tokenSymbol]/detail.tsx
@@ -3,13 +3,12 @@ import EPTabs from '@_components/EPTabs';
 import HeadTitle from '@_components/HeaderTitle';
 import { FontWeightEnum, Typography } from 'aelf-design';
 import { TabsProps } from 'antd';
-import { useRouter } from 'next/navigation';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import Holders from './_components/Holders';
 import OverView from './_components/Overview';
 import Transfers, { ITransfersRef } from './_components/Transfers';
 import './index.css';
-import { IHolderTableData, ITokenDetail, ITransferTableData, SearchType } from './type';
+import { ITokenDetail, SearchType } from './type';
 import { formatSearchValue, getSearchType } from './utils';
 
 const { Title } = Typography;
@@ -21,7 +20,9 @@ interface IDetailProps {
 }
 
 export default function Detail({ tokenDetail }: IDetailProps) {
-  const [search, setSearch] = useState<string>('2K6gPkMBMfxatiZLYkUDPmp429BbKZCUCSpuysj4PCeiHo3V7v');
+  console.log(tokenDetail, 'tokenDetail');
+  const [search, setSearch] = useState<string>('');
+  const [searchText, setSearchText] = useState<string>('');
   const [searchType, setSearchType] = useState<SearchType>(SearchType.other);
   const transfersRef = useRef<ITransfersRef>(null);
 
@@ -30,15 +31,9 @@ export default function Detail({ tokenDetail }: IDetailProps) {
   }, []);
 
   const onSearchChange = useCallback((val) => {
-    console.log('search value', val);
+    setSearchText(val);
     const value = formatSearchValue(val);
     const searchType = getSearchType(value);
-    if (searchType === SearchType.other) {
-      console.log('refresh');
-      // router.refresh();
-      window.location.reload();
-      return;
-    }
     transfersRef?.current?.setSearchStr(val);
     setSearchType(searchType);
     // fetchTransfersData({ page: 1, pageSize: 50, searchText: val });
@@ -52,6 +47,7 @@ export default function Detail({ tokenDetail }: IDetailProps) {
         <Transfers
           ref={transfersRef}
           search={search}
+          searchText={searchText}
           searchType={searchType}
           // SSRData={transfersList}
           onSearchChange={onSearchChange}
@@ -67,27 +63,28 @@ export default function Detail({ tokenDetail }: IDetailProps) {
         <Holders
           searchType={searchType}
           search={search}
+          searchText={searchText}
           // SSRData={holdersList}
           onSearchChange={onSearchChange}
           onSearchInputChange={onSearchInputChange}
         />
       ),
     };
-
+    console.log(searchType, 'searchType');
     if (searchType !== SearchType.other) {
       return [transfersItem];
     }
 
     return [transfersItem, holdersItem];
-  }, [onSearchChange, onSearchInputChange, search, searchType]);
+  }, [onSearchChange, onSearchInputChange, search, searchText, searchType]);
 
   return (
     <div className="token-detail">
-      <HeadTitle content={`Token ${tokenDetail.token.name || '--'}`}>
+      <HeadTitle content={`Token ${tokenDetail?.token?.name || '--'}`}>
         <Title
           level={6}
           fontWeight={FontWeightEnum.Bold}
-          className="ml-1 !text-[#858585]">{`(${tokenDetail.token.symbol || '--'})`}</Title>
+          className="ml-1 !text-[#858585]">{`(${tokenDetail?.token?.symbol || '--'})`}</Title>
       </HeadTitle>
       <OverView data={tokenDetail} />
       <EPTabs items={items} selectKey="transfers" />
diff --git a/src/app/[chain]/token/[tokenSymbol]/page.tsx b/src/app/[chain]/token/[tokenSymbol]/page.tsx
index 32dc10ea..e02f8336 100644
--- a/src/app/[chain]/token/[tokenSymbol]/page.tsx
+++ b/src/app/[chain]/token/[tokenSymbol]/page.tsx
@@ -18,6 +18,7 @@ export default async function TokenSymbol({
   };
 }) {
   const tokenDetail = await fetchTokenDetail({ chainId: chain as TChainID, symbol: tokenSymbol });
+  console.log(tokenDetail, 'tokenDetail');
   return (
     <div>
       <Detail tokenDetail={tokenDetail} />
diff --git a/src/app/[chain]/token/[tokenSymbol]/type.ts b/src/app/[chain]/token/[tokenSymbol]/type.ts
index 66e92a3b..6615b336 100644
--- a/src/app/[chain]/token/[tokenSymbol]/type.ts
+++ b/src/app/[chain]/token/[tokenSymbol]/type.ts
@@ -37,6 +37,7 @@ export interface ITokenSearchProps {
   onSearchInputChange: (value: string) => void;
   onSearchChange: (value: string) => void;
   search?: string;
+  searchText?: string;
 }
 export type TTransferSearchData = Pick<ITransferTableData, 'balance' | 'value'>;
 export interface ITokenDetail {
diff --git a/src/app/[chain]/token/[tokenSymbol]/utils.ts b/src/app/[chain]/token/[tokenSymbol]/utils.ts
index f56a7871..926de1e8 100644
--- a/src/app/[chain]/token/[tokenSymbol]/utils.ts
+++ b/src/app/[chain]/token/[tokenSymbol]/utils.ts
@@ -5,7 +5,7 @@ export const formatSearchValue = (val: string) => {
   let tempValue = val.trim();
 
   if (tempValue.indexOf('_') > 0) {
-    [, tempValue] = tempValue.split('-');
+    [, tempValue] = tempValue.split('_');
   }
 
   return tempValue;
@@ -13,7 +13,6 @@ export const formatSearchValue = (val: string) => {
 
 export const getSearchType = (str: string) => {
   if (!str) return SearchType.other;
-
   if (isAElfAddress(str)) return SearchType.address;
 
   if (isTxHash(str)) return SearchType.txHash;
diff --git a/src/app/[chain]/tokens/columnConfig.tsx b/src/app/[chain]/tokens/columnConfig.tsx
index 1ad40344..7ecda973 100644
--- a/src/app/[chain]/tokens/columnConfig.tsx
+++ b/src/app/[chain]/tokens/columnConfig.tsx
@@ -5,18 +5,20 @@ import { thousandsNumber } from '@_utils/formatter';
 import { ColumnsType } from 'antd/es/table';
 import clsx from 'clsx';
 import TokenImage from './_components/TokenImage';
-import { ITokensTableItem } from './type';
+import { ITokenListItem } from '../token/[tokenSymbol]/type';
+import Link from 'next/link';
+import { SortEnum } from '@_types/common';
 
-const getHolderPercentChange24h = (record: ITokensTableItem) => {
-  const { holderPercentChange24h, holders } = record;
-  const num = Number(holderPercentChange24h);
+const getHolderPercentChange24h = (record: ITokenListItem) => {
+  const { holderPercentChange24H, holders } = record;
+  const num = Number(holderPercentChange24H);
   if (Number.isNaN(num)) return '';
   if (num > 0) return `A ${num}% increase in token holders from the previous day count of ${thousandsNumber(holders)}`;
   if (num < 0) return `A ${num}% decrease in token holders from the previous day count of ${thousandsNumber(holders)}`;
   return 'No change in token holders from the previous day count';
 };
 
-export default function getColumns({ currentPage, pageSize, ChangeOrder }): ColumnsType<ITokensTableItem> {
+export default function getColumns({ currentPage, pageSize, ChangeOrder, chain, sort }): ColumnsType<ITokenListItem> {
   return [
     {
       title: '#',
@@ -31,9 +33,11 @@ export default function getColumns({ currentPage, pageSize, ChangeOrder }): Colu
       dataIndex: 'token',
       key: 'token',
       render: (text) => (
-        <TokenTableCell token={text}>
-          <TokenImage token={text} />
-        </TokenTableCell>
+        <Link href={`/${chain}/token/${text.symbol}`}>
+          <TokenTableCell token={text}>
+            <TokenImage token={text} />
+          </TokenTableCell>
+        </Link>
       ),
     },
     {
@@ -53,7 +57,7 @@ export default function getColumns({ currentPage, pageSize, ChangeOrder }): Colu
     {
       title: (
         <div className="flex cursor-pointer" onClick={ChangeOrder}>
-          <IconFont className="mr-1 text-xs" type="Rank" />
+          <IconFont className={`mr-1 text-xs ${sort === SortEnum.asc ? 'scale-y-[-1]' : ''}`} type="Rank" />
           <EPTooltip mode="dark" title="Sorted in descending order Click for ascending order">
             <div className="text-link">Holder</div>
           </EPTooltip>
@@ -63,13 +67,13 @@ export default function getColumns({ currentPage, pageSize, ChangeOrder }): Colu
       dataIndex: 'holders',
       key: 'holders',
       render: (text, record) => {
-        const { holderPercentChange24h } = record;
+        const { holderPercentChange24H } = record;
         return (
           <div className="text-xs leading-5">
             <div>{text}</div>
-            <div className={clsx(holderPercentChange24h >= 0 ? 'text-[#00A186]' : 'text-[#FF4D4F]')}>
+            <div className={clsx(holderPercentChange24H >= 0 ? 'text-[#00A186]' : 'text-[#FF4D4F]')}>
               <EPTooltip title={getHolderPercentChange24h(record)} mode="dark">
-                {holderPercentChange24h}
+                {holderPercentChange24H}%
               </EPTooltip>
             </div>
           </div>
diff --git a/src/app/[chain]/tokens/mock.ts b/src/app/[chain]/tokens/mock.ts
deleted file mode 100644
index 77932420..00000000
--- a/src/app/[chain]/tokens/mock.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ITokensTableData, ITokensTableItem } from './type';
-
-const tokensList: ITokensTableItem[] = Array.from(new Array(100).keys()).map((key) => ({
-  rank: key,
-  token: {
-    name: 'ELF',
-    symbol: 'ELF1234567890987654323456eweweewesdsdsdsddsdsddd',
-    imageUrl: '',
-  },
-  totalSupply: '100000',
-  circulatingSupply: '5000',
-  holders: 2345,
-  holderPercentChange24h: -0.003,
-}));
-
-export default async function fetchData({ page, pageSize }): Promise<ITokensTableData> {
-  await new Promise((resolve) => setTimeout(resolve, 200));
-  return {
-    total: 10000,
-    list: tokensList.slice((page - 1) * pageSize, page * pageSize),
-  };
-}
diff --git a/src/app/[chain]/tokens/page.tsx b/src/app/[chain]/tokens/page.tsx
index 56f73e4a..9c800617 100644
--- a/src/app/[chain]/tokens/page.tsx
+++ b/src/app/[chain]/tokens/page.tsx
@@ -6,11 +6,17 @@
  * @Description: Tokens
  */
 import { ChainId } from 'global';
-import fetchData from './mock';
 import TokensList from './tokensList';
+import { fetchServerTokenList } from '@_api/fetchTokens';
+import { TChainID } from '@_api/type';
 
 export default async function TokensPage({ params }: { params: ChainId }) {
-  console.log('chainId', params);
-  const data = await fetchData({ page: 1, pageSize: 50 });
+  const data = await fetchServerTokenList({
+    skipCount: 0,
+    maxResultCount: 50,
+    chainId: params.chain as TChainID,
+    sortBy: 2,
+    sort: 1,
+  });
   return <TokensList SSRData={data} />;
 }
diff --git a/src/app/[chain]/tokens/tokensList.tsx b/src/app/[chain]/tokens/tokensList.tsx
index ac85a0e8..68a8bf1f 100644
--- a/src/app/[chain]/tokens/tokensList.tsx
+++ b/src/app/[chain]/tokens/tokensList.tsx
@@ -1,37 +1,79 @@
 'use client';
 import HeadTitle from '@_components/HeaderTitle';
 import Table from '@_components/Table';
-import useTableData from '@_hooks/useTable';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import getColumns from './columnConfig';
-import fetchData from './mock';
-import { ITokensTableData, ITokensTableItem } from './type';
 import { useMobileAll } from '@_hooks/useResponsive';
+import { ITokenList, ITokenListItem } from '../token/[tokenSymbol]/type';
+import { useParams } from 'next/navigation';
+import { fetchTokenList } from '@_api/fetchTokens';
+import { TChainID } from '@_api/type';
+import { getPageNumber } from '@_utils/formatter';
+import { pageSizeOption } from '@_utils/contant';
+import { SortEnum } from '@_types/common';
 
 interface TokensListProps {
-  SSRData: ITokensTableData;
+  SSRData: ITokenList;
 }
 
 export default function TokensList({ SSRData }: TokensListProps) {
+  console.log(SSRData, 'tokenSSRData');
   const { isMobile } = useMobileAll();
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(50);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [total, setTotal] = useState<number>(SSRData.total);
+  const [data, setData] = useState<ITokenListItem[]>(SSRData.list);
+  const [sort, setSort] = useState<SortEnum>(SortEnum.desc);
 
-  const { loading, total, data, currentPage, pageSize, pageChange, pageSizeChange } = useTableData<
-    ITokensTableItem,
-    ITokensTableData
-  >({
-    SSRData,
-    fetchData,
-    // disposeData,
-  });
+  const { chain } = useParams();
 
-  const ChangeOrder = useCallback(() => {}, []);
+  const mountRef = useRef(true);
+
+  const fetchData = useCallback(async () => {
+    const params = {
+      skipCount: getPageNumber(currentPage, pageSize),
+      maxResultCount: 50,
+      chainId: chain as TChainID,
+      sort,
+      sortBy: 2,
+    };
+    setLoading(true);
+    const data = await fetchTokenList(params);
+    setTotal(data.total);
+    setData(data.list);
+    setLoading(false);
+    return data;
+  }, [chain, currentPage, pageSize, sort]);
+
+  useEffect(() => {
+    if (mountRef.current) {
+      mountRef.current = false;
+      return;
+    }
+    fetchData();
+  }, [fetchData]);
+
+  const ChangeOrder = useCallback(() => {
+    if (loading) return;
+    setSort(sort === SortEnum.desc ? SortEnum.asc : SortEnum.desc);
+  }, [loading, sort]);
 
   const columns = useMemo(
-    () => getColumns({ currentPage, pageSize, ChangeOrder }),
-    [ChangeOrder, currentPage, pageSize],
+    () => getColumns({ currentPage, pageSize, sort, ChangeOrder, chain }),
+    [ChangeOrder, chain, currentPage, pageSize, sort],
   );
   const title = useMemo(() => `A total of ${total} ${total <= 1 ? 'token' : 'tokens'} found`, [total]);
 
+  const pageChange = async (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const pageSizeChange = async (page, size) => {
+    setPageSize(size);
+    setCurrentPage(page);
+  };
+
   return (
     <div>
       <HeadTitle content="Tokens" />
@@ -45,6 +87,7 @@ export default function TokensList({ SSRData }: TokensListProps) {
         dataSource={data}
         columns={columns}
         isMobile={isMobile}
+        options={pageSizeOption}
         rowKey="rank"
         total={total}
         pageSize={pageSize}
diff --git a/src/app/[chain]/tokens/type.ts b/src/app/[chain]/tokens/type.ts
index 593811b4..d348b6b6 100644
--- a/src/app/[chain]/tokens/type.ts
+++ b/src/app/[chain]/tokens/type.ts
@@ -6,7 +6,7 @@ export interface ITokensTableItem {
   totalSupply: string;
   circulatingSupply: string;
   holders: number;
-  holderPercentChange24h: number;
+  holderPercentChange24H: number;
 }
 
 export interface ITokensTableData {