diff --git a/apps/dcellar-web-ui/package.json b/apps/dcellar-web-ui/package.json
index 4a3723f7..0839910f 100644
--- a/apps/dcellar-web-ui/package.json
+++ b/apps/dcellar-web-ui/package.json
@@ -53,7 +53,8 @@
     "swiper": "~10.3.1",
     "echarts": "~5.4.3",
     "echarts-for-react": "~3.0.2",
-    "next-transpile-modules": "~10.0.1"
+    "next-transpile-modules": "~10.0.1",
+    "redux": "~4.2.1"
   },
   "devDependencies": {
     "@babel/plugin-syntax-flow": "^7.14.5",
diff --git a/apps/dcellar-web-ui/src/components/common/DCTable/index.tsx b/apps/dcellar-web-ui/src/components/common/DCTable/index.tsx
index b898475b..dcd819df 100644
--- a/apps/dcellar-web-ui/src/components/common/DCTable/index.tsx
+++ b/apps/dcellar-web-ui/src/components/common/DCTable/index.tsx
@@ -32,7 +32,7 @@ export const DCTable = memo<DCTableProps & Omit<SimplePaginationProps, 'loading'
     ...props
   }) {
     return (
-      <Container className="dc-table">
+      <Container className="dc-table" rowCursor={typeof props.onRow === 'function' ? 'pointer' : 'default'}>
         <ConfigProvider renderEmpty={renderEmpty} theme={antdTheme}>
           <Table dataSource={dataSource} {...props} pagination={false} tableLayout="fixed" />
         </ConfigProvider>
@@ -182,7 +182,7 @@ export const SortItem = styled.span`
   }
 `;
 
-const Container = styled.div`
+const Container = styled.div<{rowCursor: string}>`
   border-radius: 4px;
   border: 1px solid var(--ui-colors-readable-border);
   background: #fff;
@@ -256,6 +256,7 @@ const Container = styled.div`
       .btn-action {
         visibility: visible;
       }
+      cursor: ${(props) => props.rowCursor};
     }
   }
 
diff --git a/apps/dcellar-web-ui/src/modules/accounts/AccountDetail.tsx b/apps/dcellar-web-ui/src/modules/accounts/AccountDetail.tsx
index 7ecef401..e951341b 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/AccountDetail.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/AccountDetail.tsx
@@ -43,7 +43,7 @@ export const AccountDetail = () => {
       <Flex gap={16} flexDirection={'column'}>
         <AccountBreadCrumb name={accountDetail.name} />
         <AccountDetailNav address={curAddress} />
-        <Flex gap={16}>
+        <Flex gap={16} flexWrap={'wrap'}>
           <MetaInfo address={curAddress} />
           <AccountCostTrend address={curAddress} />
         </Flex>
diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/AccountCostTrend.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/AccountCostTrend.tsx
index 9aa1aa8a..52aa9d60 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/components/AccountCostTrend.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/components/AccountCostTrend.tsx
@@ -109,21 +109,24 @@ export const AccountCostTrend = memo(({ address }: Props) => {
       title: {
         text: 'Cost Trend',
         textStyle: {
-          color: '#1e2026',
+          color: cssVar('readable.normal'),
           fontSize: 16,
           fontWeight: 700,
         },
+        left: 0,
+        padding: [5, 5, 5, 0],
+        textAlign: 'left',
       },
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'cross',
+          type: 'shadow',
         },
         formatter: (params: any, ticket: string) => {
           const curData = barData[params[0].dataIndex];
           const styles = getStyles();
           const TokenSymbol = displayTokenSymbol();
-          const TotalFragment = `<div style="${styles.total}">Total Cost: <div style="${styles.bnb}">${curData.totalCost} ${TokenSymbol}</div>
+          const TotalFragment = `<div style="${styles.total}">Total Cost: <div style="${styles.bnb}">${curData.totalCost || 0} ${TokenSymbol}</div>
           </div>`;
           const EstimateFragment =
             curData.estimateCost === null
@@ -164,18 +167,36 @@ export const AccountCostTrend = memo(({ address }: Props) => {
         itemGap: 16,
         right: 0,
         data: ['Monthly Cost', 'Estimate Cost', 'MoM'],
+        textStyle: {
+          fontWeight: 400,
+        }
       },
       xAxis: [
         {
           type: 'category',
           axisTick: {
+            show: true,
             alignWithLabel: true,
+            lineStyle: {
+              color: cssVar('bg.bottom'),
+            },
           },
           axisLabel: {
             color: cssVar('readable.tertiary'),
             fontSize: 12,
-            transform: 'scale(0.8333)',
             fontWeight: 500,
+            margin: 16,
+            lineHeight: 12,
+          },
+          axisLine: {
+            show: false,
+            margin: 18,
+          },
+          axisPointer: {
+            lineStyle: {
+              color: cssVar('readable.secondary'),
+              type: 'solid',
+            },
           },
           data: xAxisData,
         },
@@ -186,6 +207,7 @@ export const AccountCostTrend = memo(({ address }: Props) => {
           // name: 'Monthly Cost',
           position: 'left',
           alignTicks: true,
+          splitNumber: 5,
           axisLine: {
             show: false,
           },
@@ -193,9 +215,13 @@ export const AccountCostTrend = memo(({ address }: Props) => {
             color: cssVar('readable.tertiary'),
             fontSize: 12,
             fontWeight: 500,
-            transform: 'scale(0.8333)',
             formatter: '{value} BNB',
           },
+          splitLine: {
+            lineStyle: {
+              color: cssVar('bg.bottom'),
+            },
+          },
         },
         // {
         //   type: 'value',
@@ -234,7 +260,7 @@ export const AccountCostTrend = memo(({ address }: Props) => {
   }, [barData]);
   const loading = isEmpty(barData);
   return (
-    <CardContainer flex={1} width={'50%'} minW={0}>
+    <CardContainer flex={1} width={'50%'} minW={478} minH={283}>
       {loading && <Loading />}
       {!loading && (
         <Box w={'100%'} h={'100%'}>
diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetailNav.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetailNav.tsx
index 22a19948..555702be 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetailNav.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetailNav.tsx
@@ -5,7 +5,7 @@ import { selectStoreFeeParams } from '@/store/slices/global';
 import { InternalRoutePaths } from '@/utils/constant';
 import { BN } from '@/utils/math';
 import { displayTokenSymbol } from '@/utils/wallet';
-import { Box, Flex, Link, Text } from '@totejs/uikit'
+import { Box, Flex, Link, Text } from '@totejs/uikit';
 import { isEmpty } from 'lodash-es';
 import { useRouter } from 'next/router';
 import { useMemo } from 'react';
@@ -35,68 +35,68 @@ export const AccountDetailNav = ({ address }: { address: string }) => {
     router.push(url);
   };
   return (
-    <Flex gap={16} alignItems={'center'} onClick={goBack}>
-    <IconFont type="backward" w={24} />
-    <Text fontSize={24} fontWeight={700}>
-      {accountDetail.name}
-    </Text>
-    {isFrozen && (
-      <Tips
-        containerWidth={280}
-        iconSize={16}
-        padding={4}
-        iconStyle={{
-          color: '#F15D3C',
-          _hover: {
+    <Flex gap={16} alignItems={'center'} onClick={goBack} cursor={'pointer'}>
+      <IconFont type="backward" w={24} />
+      <Text fontSize={24} fontWeight={700}>
+        {accountDetail.name}
+      </Text>
+      {isFrozen && (
+        <Tips
+          containerWidth={280}
+          iconSize={16}
+          padding={4}
+          iconStyle={{
             color: '#F15D3C',
-          },
-          marginTop: '-1px',
-        }}
-        trigger="hover"
-        tips={
-          <Box>
-            <Text fontSize={14} fontWeight={600} mb={4}>
-              Frozen Account
-            </Text>
-            <Text fontSize={14} fontWeight={400} color="readable.normal" mb={4}>
-              Your account is suspended due to insufficient balance. To reactivate your
-              account, please deposit at least &nbsp;
-              <strong>
-                {unFreezeAmount} &nbsp;{displayTokenSymbol()}
-              </strong>
-              &nbsp; immediately.
-            </Text>
-            <Link
-              cursor={'pointer'}
-              display={'inline-block'}
-              textDecoration={'underline'}
-              w="100%"
-              textAlign={'right'}
-              onClick={() => onTopUpClick()}
-            >
-              Top Up
-            </Link>
-          </Box>
-        }
-      />
-    )}
-    <Box>
-      {!loading && accountDetail?.refundable === false && (
-        <Box
-          padding={'4px 8px'}
-          borderRadius={16}
-          bgColor={'bg.bottom'}
-          fontSize={12}
-          fontWeight={500}
-          w="fit-content"
-          color={'readable.tertiary'}
-        >
-          Non-Refundable
-        </Box>
+            _hover: {
+              color: '#F15D3C',
+            },
+            marginTop: '-1px',
+          }}
+          trigger="hover"
+          tips={
+            <Box>
+              <Text fontSize={14} fontWeight={600} mb={4}>
+                Frozen Account
+              </Text>
+              <Text fontSize={14} fontWeight={400} color="readable.normal" mb={4}>
+                Your account is suspended due to insufficient balance. To reactivate your account,
+                please deposit at least &nbsp;
+                <strong>
+                  {unFreezeAmount} &nbsp;{displayTokenSymbol()}
+                </strong>
+                &nbsp; immediately.
+              </Text>
+              <Link
+                cursor={'pointer'}
+                display={'inline-block'}
+                textDecoration={'underline'}
+                w="100%"
+                textAlign={'right'}
+                onClick={() => onTopUpClick()}
+              >
+                Top Up
+              </Link>
+            </Box>
+          }
+        />
       )}
-    </Box>
-  </Flex>
-  )
-}
+      <Box>
+        {!loading && accountDetail?.refundable === false && (
+          <Box
+            padding={'4px 8px'}
+            borderRadius={16}
+            bgColor={'bg.bottom'}
+            fontSize={12}
+            fontWeight={500}
+            w="fit-content"
+            color={'readable.tertiary'}
+          >
+            Non-Refundable
+          </Box>
+        )}
+      </Box>
+    </Flex>
+  );
+};
 
-export default AccountDetailNav
\ No newline at end of file
+export default AccountDetailNav;
diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/Common.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/Common.tsx
index f1d886e0..aba7c78b 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/components/Common.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/components/Common.tsx
@@ -18,15 +18,23 @@ export const CardTitle = ({ children, ...props }: TextProps) => {
 export const CardTime = ({ children, ...props }: TextProps) => {
   return (
     <Text fontSize={12} fontWeight={500} color={'readable.tertiary'} {...props}>
-    {children}
-  </Text>
+      {children}
+    </Text>
   );
 };
 
 export const CardCost = ({ children, ...props }: TextProps) => {
   return (
-    <Text fontSize={24} fontWeight={700}>
-    {children}
-  </Text>
+    <Text fontSize={24} fontWeight={700} {...props}>
+      {children}
+    </Text>
+  );
+};
+
+export const SectionHeader = ({ children, ...props }: TextProps) => {
+  return (
+    <Text as={'h3'} fontSize={16} fontWeight={600} {...props}>
+      {children}
+    </Text>
   );
 };
diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/MetaInfo.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/MetaInfo.tsx
index 5c3856a8..139e9f54 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/components/MetaInfo.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/components/MetaInfo.tsx
@@ -20,7 +20,6 @@ import { isEmpty } from 'lodash-es';
 import { Loading } from '@/components/common/Loading';
 import { DCButton } from '@/components/common/DCButton';
 import { currencyFormatter } from '@/utils/formatter';
-import { useWhyDidYouUpdate } from 'ahooks';
 
 type Props = {
   address: string;
@@ -128,7 +127,7 @@ export const MetaInfo = memo(({ address }: Props) => {
     );
   }
   return (
-    <Box p={16} border={'1px solid readable.border'} borderRadius={4} flex={1}>
+    <Box minW={570} p={16} border={'1px solid readable.border'} borderRadius={4} flex={1}>
       <Flex gap={12} flexDirection={'column'}>
         <Text fontSize={16} fontWeight={600}>
           Balance
@@ -148,22 +147,23 @@ export const MetaInfo = memo(({ address }: Props) => {
             <Text fontSize={24} fontWeight={600}>
               {BN(availableBalance).dp(CRYPTOCURRENCY_DISPLAY_PRECISION).toString()}
             </Text>
-            <Text color={'readable.tertiary'} fontWeight={500}>
+            <Text fontSize={16} color={'readable.tertiary'} fontWeight={500}>
               {displayTokenSymbol()}
             </Text>
           </Flex>
           <Text fontSize={12} color={'readable.tertiary'}>
-            ≈{currencyFormatter(
-                BN(availableBalance || 0)
-                  .times(BN(bnbPrice))
-                  .toString(),
-              )}
+            ≈
+            {currencyFormatter(
+              BN(availableBalance || 0)
+                .times(BN(bnbPrice))
+                .toString(),
+            )}
           </Text>
         </Box>
         {isOwnerAccount && (
           <Flex w={'100%'} gap={16}>
             <DCButton
-              size={'lg'}
+              size={'md'}
               flex={1}
               gaClickName="dc.file.f_detail_pop.share.click"
               onClick={() => onAction('transfer_in')}
@@ -171,7 +171,7 @@ export const MetaInfo = memo(({ address }: Props) => {
               Transfer In
             </DCButton>
             <DCButton
-              size={'lg'}
+              size={'md'}
               variant="ghost"
               flex={1}
               gaClickName="dc.file.f_detail_pop.download.click"
@@ -180,7 +180,7 @@ export const MetaInfo = memo(({ address }: Props) => {
               Transfer Out
             </DCButton>
             <DCButton
-              size={'lg'}
+              size={'md'}
               variant="ghost"
               flex={1}
               gaClickName="dc.file.f_detail_pop.download.click"
@@ -193,7 +193,7 @@ export const MetaInfo = memo(({ address }: Props) => {
         {!isOwnerAccount && (
           <Flex w={'100%'} gap={16}>
             <DCButton
-              size={'lg'}
+              size={'md'}
               variant={'brand'}
               flex={1}
               gaClickName="dc.file.f_detail_pop.download.click"
@@ -201,28 +201,39 @@ export const MetaInfo = memo(({ address }: Props) => {
             >
               Deposit
             </DCButton>
-            {isNonRefundable && !isFrozen && (
-              <DCButton
-                size={'lg'}
-                flex={1}
-                variant="ghost"
-                gaClickName="dc.file.f_detail_pop.share.click"
-                onClick={() => onAction('withdraw')}
-              >
-                Withdraw
-              </DCButton>
-            )}
+            <DCButton
+              size={'md'}
+              flex={1}
+              disabled={!isNonRefundable || isFrozen}
+              variant="ghost"
+              gaClickName="dc.file.f_detail_pop.share.click"
+              onClick={() => onAction('withdraw')}
+            >
+              Withdraw
+            </DCButton>
+            <DCButton
+              size={'md'}
+              flex={1}
+              // paddingX={0}
+              whiteSpace={'nowrap'}
+              disabled={isNonRefundable}
+              variant="ghost"
+              gaClickName="dc.file.f_detail_pop.share.click"
+              onClick={() => onAction('withdraw')}
+            >
+              Set Non-Refundable
+            </DCButton>
           </Flex>
         )}
       </Flex>
-      <Divider marginY={24} />
-      <Flex gap={8} flexDirection={'column'}>
+      <Divider marginY={16} />
+      <Flex pt={8} gap={8} flexDirection={'column'}>
         {detailItems.map((item, index) => (
           <Flex justifyContent={'space-between'} key={index} h={24}>
             <Text fontSize={14} fontWeight={500} color="readable.tertiary" marginRight={8}>
               {item.label}
             </Text>
-            {item.value}
+            <Box textAlign={'right'}>{item.value}</Box>
           </Flex>
         ))}
       </Flex>
diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/OwnerAccount.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/OwnerAccount.tsx
index d2f54216..217bbf6e 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/components/OwnerAccount.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/components/OwnerAccount.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from '@totejs/uikit';
+import { Box, Flex, Text, useMediaQuery } from '@totejs/uikit';
 import { ColumnProps } from 'antd/es/table';
 import React from 'react';
 import { DCTable } from '@/components/common/DCTable';
@@ -13,10 +13,7 @@ import { DCLink } from '@/components/common/DCLink';
 import { MenuOption } from '@/components/common/DCMenuList';
 import { displayTokenSymbol, getShortenWalletAddress } from '@/utils/wallet';
 import { BN } from '@/utils/math';
-import {
-  CRYPTOCURRENCY_DISPLAY_PRECISION,
-  DECIMAL_NUMBER,
-} from '@/modules/wallet/constants';
+import { CRYPTOCURRENCY_DISPLAY_PRECISION, DECIMAL_NUMBER } from '@/modules/wallet/constants';
 import { currencyFormatter } from '@/utils/formatter';
 import { selectBnbPrice } from '@/store/slices/global';
 import { trimFloatZero } from '@/utils/string';
@@ -31,9 +28,9 @@ const actions: MenuOption[] = [
 ];
 
 export const OwnerAccount = () => {
-  const dispatch = useAppDispatch();
   const bnbPrice = useAppSelector(selectBnbPrice);
   const { ownerAccount } = useAppSelector((root) => root.accounts);
+  const [isLessThan1100] = useMediaQuery('(max-width: 1100px)');
   const { accountInfo, bankBalance } = useAppSelector((root) => root.accounts);
 
   const data = ownerAccount?.address ? [accountInfo[ownerAccount.address] || {}] : [];
@@ -48,7 +45,7 @@ export const OwnerAccount = () => {
     switch (e) {
       case 'detail':
         // return dispatch(setAccountOperation([record.address, 'oaDetail']));
-        return router.push(`/accounts/${record.address}`)
+        return router.push(`/accounts/${record.address}`);
       default:
         return router.push(`/wallet?type=${e}`);
     }
@@ -59,16 +56,17 @@ export const OwnerAccount = () => {
       title: 'Name',
       key: 'name',
       render: (_: string, record: TAccountInfo) => {
-        return <Box>{record.name}</Box>;
+        return <Text>{record.name}</Text>;
       },
     },
     {
       title: 'Account Address',
       key: 'address',
+      width: isLessThan1100 ? 130 : 'auto',
       render: (_: string, record: TAccountInfo) => {
         const addressUrl = `${GREENFIELD_CHAIN_EXPLORER_URL}/account/${record.address}`;
         return (
-          <CopyText value={record.address} boxSize={16} iconProps={{ mt: 2 }}>
+          <CopyText value={record.address} boxSize={16} iconProps={{ mt: 2, color: 'readable.secondary'}}>
             <DCLink color="currentcolor" href={addressUrl} target="_blank">
               {getShortenWalletAddress(record.address)}
             </DCLink>
@@ -81,8 +79,8 @@ export const OwnerAccount = () => {
       key: 'bankBalance',
       render: (_: string, record: TAccountInfo) => {
         return (
-          <Flex flexWrap={'wrap'}>
-            <Text fontSize={14} fontWeight={500}>
+          <Flex flexWrap={'wrap'} alignItems={'center'}>
+            <Text fontSize={14}>
               {BN(bankBalance).dp(CRYPTOCURRENCY_DISPLAY_PRECISION).toString()}{' '}
               {displayTokenSymbol()}
             </Text>
@@ -119,8 +117,7 @@ export const OwnerAccount = () => {
         return (
           <Text fontSize={14} fontWeight={500}>
             {value === '0' ? '≈ ' : ''}
-            {trimFloatZero(value)}{' '}
-            {displayTokenSymbol()}/s
+            {trimFloatZero(value)} {displayTokenSymbol()}/s
           </Text>
         );
       },
@@ -128,7 +125,7 @@ export const OwnerAccount = () => {
     {
       title: <Text textAlign={'center'}>Operation</Text>,
       key: 'Operation',
-      width: 200,
+      width: 150,
       render: (_: string, record: TAccountInfo) => {
         const operations = ['transfer_in', 'transfer_out', 'send'];
         return (
@@ -144,9 +141,6 @@ export const OwnerAccount = () => {
 
   return (
     <Container>
-      <Box as="h3" fontSize={16} fontWeight={600} marginY={16}>
-        Owner Account
-      </Box>
       <DCTable
         rowKey="address"
         columns={columns}
@@ -166,8 +160,6 @@ export const OwnerAccount = () => {
 };
 
 const Container = styled(Box)`
-  margin-bottom: 32px;
-
   .dc-table {
     overflow: hidden;
   }
diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccounts.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccounts.tsx
index 3533d951..95d74ec0 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccounts.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccounts.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from '@totejs/uikit';
+import { Box, Flex, Text, useMediaQuery } from '@totejs/uikit';
 import { ColumnProps } from 'antd/es/table';
 import React, { useCallback, useMemo } from 'react';
 import { DCTable, SortIcon, SortItem } from '@/components/common/DCTable';
@@ -37,6 +37,7 @@ const actions: MenuOption[] = [
 export const PaymentAccounts = () => {
   const dispatch = useAppDispatch();
   const router = useRouter();
+  const [isLessThan1100] = useMediaQuery('(max-width: 1100px)');
   const bnbPrice = useAppSelector(selectBnbPrice);
   const {
     loginAccount,
@@ -91,6 +92,7 @@ export const PaymentAccounts = () => {
     },
     {
       key: 'address',
+      width: isLessThan1100 ? 130 : 'auto',
       title: (
         <SortItem onClick={() => updateSorter('address', 'ascend')}>
           Account Address
@@ -176,8 +178,8 @@ export const PaymentAccounts = () => {
     },
     {
       key: 'Operation',
-      title: <></>,
-      width: 200,
+      title: <Text textAlign={'center'}>Operation</Text>,
+      width: 150,
       render: (_: string, record: TAccountInfo) => {
         let operations = ['deposit', 'withdraw'];
         let finalActions = actions;
@@ -236,27 +238,19 @@ export const PaymentAccounts = () => {
   );
 
   return (
-    <>
-      <Flex justifyContent={'space-between'} marginBottom={16} alignItems="center">
-        <Box as="h3" fontSize={16} fontWeight={600}>
-          Payment Account
-        </Box>
-        <NewPA />
-      </Flex>
-      <DCTable
-        rowKey="address"
-        loading={loadingComponent}
-        columns={columns}
-        dataSource={page}
-        renderEmpty={renderEmpty}
-        pageSize={PAPageSize}
-        pageChange={onPageChange}
-        canNext={canNext}
-        canPrev={canPrev}
-        onRow={(record: TAccount) => ({
-          onClick: () => onMenuClick('detail', record),
-        })}
-      />
-    </>
+    <DCTable
+      rowKey="address"
+      loading={loadingComponent}
+      columns={columns}
+      dataSource={page}
+      renderEmpty={renderEmpty}
+      pageSize={PAPageSize}
+      pageChange={onPageChange}
+      canNext={canNext}
+      canPrev={canPrev}
+      onRow={(record: TAccount) => ({
+        onClick: () => onMenuClick('detail', record),
+      })}
+    />
   );
 };
diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/TotalCost.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/TotalCost.tsx
index 7db154ed..088bb6e0 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/components/TotalCost.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/components/TotalCost.tsx
@@ -9,7 +9,7 @@ import { selectAllCost } from '@/store/slices/billing';
 import { BN } from '@/utils/math';
 import { TAccountInfo } from '@/store/slices/accounts';
 import { formatObjectAddress } from '@/utils/accounts';
-import { lgMedia, xlMedia } from '@/modules/welcome';
+import { xlMedia } from '@/modules/welcome';
 
 const colors = ['#009E2C', '#008425', '#005417', '#C2EECE'];
 
@@ -19,6 +19,7 @@ export const TotalCost = memo(() => {
   const totalCost = useAppSelector(selectAllCost(loginAccount));
   const { loadingAllCostTrend, loadingAllCost } = useAppSelector((root) => root.billing);
   const pieData = useMemo(() => {
+    // TODO use date to judge loading
     if (loadingAllCost || loadingAllCostTrend || isLoadingPaymentAccounts) return;
     const lowerKeyAccountInfo: Record<string, TAccountInfo> = formatObjectAddress(accountInfo)
     const temp = [...(totalCost.detailCosts || [])].sort((a, b) => {
@@ -81,9 +82,9 @@ export const TotalCost = memo(() => {
         {
           data: pieData,
           color: Object.values(colors),
-          radius: ['65%', '80%'],
+          radius: ['78%', '95%'],
           width: '300px',
-          center: ['30%', '50%'],
+          center: ['28%', '50%'],
           emphasis: {
             focus: 'series',
           },
@@ -95,7 +96,7 @@ export const TotalCost = memo(() => {
   return (
     <CardContainer flex={1} sx={{
       [xlMedia]: {
-        maxW: 385
+        maxW: 342
       }
     }}>
       <CardTitle mb={16}>Total Cost</CardTitle>
@@ -103,7 +104,7 @@ export const TotalCost = memo(() => {
         <CardCost>{totalCost.totalCost}</CardCost>
         <CardCost>{displayTokenSymbol()}</CardCost>
       </Flex>
-      <Box width={350} h={176}>
+      <Box width={310} h={176}>
         <PieChart options={chartOptions} />
         {/* <Flex
           mt={24}
diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/TotalCostTrend.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/TotalCostTrend.tsx
index c08a12bb..79697cb0 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/components/TotalCostTrend.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/components/TotalCostTrend.tsx
@@ -103,15 +103,18 @@ export const TotalCostTrend = () => {
       title: {
         text: 'Cost Trend',
         textStyle: {
-          color: '#1e2026',
+          color: cssVar('readable.normal'),
           fontSize: 16,
           fontWeight: 700,
         },
+        left: 0,
+        padding: [5, 5, 5, 0],
+        textAlign: 'left',
       },
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'cross',
+          type: 'shadow',
         },
         formatter: (params: any, ticket: string) => {
           const curData = barData[params[0].dataIndex];
@@ -146,8 +149,9 @@ export const TotalCostTrend = () => {
           //  <div style="${styles.normal}">MoM:<div style="${styles.bnb}">${curData.MoM}%</div></div>`;
           return `
             <div style="${styles.box}">
-              <div style="${styles.total}">Total Cost: <div style="${styles.bnb}">${curData.totalCost || 0
-            } ${TokenSymbol}</div>
+              <div style="${styles.total}">Total Cost: <div style="${styles.bnb}">${
+            curData.totalCost || 0
+          } ${TokenSymbol}</div>
               </div>
               ${DetailFragment}
               ${EstimateFragment}
@@ -174,18 +178,36 @@ export const TotalCostTrend = () => {
         itemGap: 16,
         right: 30,
         data: ['Monthly Cost', 'Estimate Cost'],
+        textStyle: {
+          fontWeight: 400,
+        },
       },
       xAxis: [
         {
           type: 'category',
           axisTick: {
+            show: true,
             alignWithLabel: true,
+            lineStyle: {
+              color: cssVar('bg.bottom'),
+            },
           },
           axisLabel: {
             color: cssVar('readable.tertiary'),
             fontSize: 12,
-            transform: 'scale(0.8333)',
             fontWeight: 500,
+            margin: 16,
+            lineHeight: 12,
+          },
+          axisLine: {
+            show: false,
+            margin: 18,
+          },
+          axisPointer: {
+            lineStyle: {
+              color: cssVar('readable.secondary'),
+              type: 'solid',
+            },
           },
           data: xAxisData,
         },
@@ -196,6 +218,7 @@ export const TotalCostTrend = () => {
           // name: 'Monthly Cost',
           position: 'left',
           alignTicks: true,
+          splitNumber: 5,
           axisLine: {
             show: false,
           },
@@ -203,9 +226,13 @@ export const TotalCostTrend = () => {
             color: cssVar('readable.tertiary'),
             fontSize: 12,
             fontWeight: 500,
-            transform: 'scale(0.8333)',
             formatter: '{value} BNB',
           },
+          splitLine: {
+            lineStyle: {
+              color: cssVar('bg.bottom'),
+            },
+          },
         },
         // {
         //   type: 'value',
diff --git a/apps/dcellar-web-ui/src/modules/accounts/index.tsx b/apps/dcellar-web-ui/src/modules/accounts/index.tsx
index 45acc149..d9363de7 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/index.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/index.tsx
@@ -15,6 +15,8 @@ import { setupTotalCost, setupAllCostTrend } from '@/store/slices/billing';
 import { ComingBillingHistory } from './components/ComingBillingHistory';
 import { TotalCost } from './components/TotalCost';
 import { TotalCostTrend } from './components/TotalCostTrend';
+import { NewPA } from './components/NewPA';
+import { SectionHeader } from './components/Common';
 
 export const Accounts = () => {
   const dispatch = useAppDispatch();
@@ -29,7 +31,7 @@ export const Accounts = () => {
   return (
     <>
       <Head>
-        <title>Groups - DCellar{networkTag(runtimeEnv)}</title>
+        <title>Accounts - DCellar{networkTag(runtimeEnv)}</title>
       </Head>
       <NonRefundableModal />
       <AccountOperations />
@@ -50,20 +52,40 @@ export const Accounts = () => {
             <TotalCostTrend />
           </Flex>
         </Flex>
-        <Box>
+        <Box mt={16}>
           <Tabs isLazy={true}>
             <TabList>
-              <Tab>Account List</Tab>
-              <Tab>Billing History</Tab>
+              <Tab h={27} fontSize={16} fontWeight={500} pb={8}>
+                Account List
+              </Tab>
+              <Tab h={27} fontSize={16} fontWeight={500} pb={8}>
+                Billing History
+              </Tab>
             </TabList>
             <TabPanels>
               <TabPanel>
-                <OwnerAccount />
-                <PaymentAccounts />
+                <Flex flexDirection={'column'} gap={16}>
+                  <Flex justifyContent={'space-between'} alignItems={'center'} marginTop={16}>
+                    <SectionHeader>Account List</SectionHeader>
+                    <NewPA />
+                  </Flex>
+                  <OwnerAccount />
+                  <PaymentAccounts />
+                </Flex>
               </TabPanel>
               <TabPanel>
                 {/* <AllBillingHistory /> */}
-                <ComingBillingHistory />
+                <Flex flexDirection={'column'} gap={16}>
+                  <Flex
+                    h={40}
+                    marginTop={16}
+                    justifyContent={'space-between'}
+                    alignItems={'center'}
+                  >
+                    <SectionHeader>Billing History</SectionHeader>
+                  </Flex>
+                  <ComingBillingHistory />
+                </Flex>
               </TabPanel>
             </TabPanels>
           </Tabs>
diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/index.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/index.tsx
index e8f4915e..a2bb9324 100644
--- a/apps/dcellar-web-ui/src/modules/pricing-calculator/index.tsx
+++ b/apps/dcellar-web-ui/src/modules/pricing-calculator/index.tsx
@@ -1,10 +1,8 @@
-import { getTimestampInSeconds } from '@/utils/time';
 import { Box, BoxProps, Flex } from '@totejs/uikit';
 import { StartBuild } from './components/StartBuild';
 import { useAsyncEffect } from 'ahooks';
-import { getStoreFeeParams } from '@/facade/payment';
 import { useState } from 'react';
-import { GAS_PRICE, TStoreFeeParams } from '@/store/slices/global';
+import { GAS_PRICE, TStoreFeeParams, selectBnbPrice, selectMainnetStoreFeeParams, selectStoreFeeParams } from '@/store/slices/global';
 import { getBnbPrice, getGasFees } from '@/facade/common';
 import { assetPrefix } from '@/base/env';
 import { FAQ } from './components/FAQ';
@@ -16,6 +14,7 @@ import { MsgCreateObjectTypeUrl } from '@bnb-chain/greenfield-js-sdk';
 import { getSpMeta, getStorageProviders } from '@/facade/sp';
 import { keyBy } from 'lodash-es';
 import { SEOHead } from './components/SEOHead';
+import { useAppSelector } from '@/store';
 
 type TQuotaSP = {
   name: string;
@@ -55,20 +54,15 @@ export const PriceResponsiveContainer = ({ children, sx, ...restProps }: PriceRe
   );
 };
 
-export const PriceCalculator = () => {
-  const [storeParams, setStoreParams] = useState({} as TStoreFeeParams);
-  const [bnbPrice, setBnbPrice] = useState('0');
+// 如果是mainnet则最好使用统一的数据源
+// 如果不是需要使用mainnet的数据源，单独获取吗
+// 要不要直接把这里分开
+export const PriceCalculator = ({pageProps}: any) => {
   const [sps, setSps] = useState<TQuotaSP[]>([]);
   const [gasFee, setGasFee] = useState(DEFAULT_GAS_FEE);
+  const mainnetStoreFeeParams = useAppSelector(selectMainnetStoreFeeParams);
+  const bnbPrice = useAppSelector(selectBnbPrice);
   useAsyncEffect(async () => {
-    console.time('getStoreFeeParams');
-    const latestStoreParams = await getStoreFeeParams({network: 'mainnet'});
-    console.timeEnd('getStoreFeeParams');
-    setStoreParams(latestStoreParams);
-  }, []);
-  useAsyncEffect(async () => {
-    const bnbPrice = await getBnbPrice();
-    setBnbPrice(bnbPrice.price);
     const [gasFees, error] = await getGasFees('mainnet');
     const gasLimit =
       gasFees?.msgGasParams.find((item) => item.msgTypeUrl === DEFAULT_TX_TYPE)?.fixedType?.fixedGas
@@ -113,9 +107,9 @@ export const PriceCalculator = () => {
           }}
         >
           <Banner />
-          <Calculator storeParams={storeParams} bnbPrice={bnbPrice} gasFee={gasFee} />
+          <Calculator storeParams={mainnetStoreFeeParams} bnbPrice={bnbPrice} gasFee={gasFee} />
         </Flex>
-        <PricingCard storeParams={storeParams} />
+        <PricingCard storeParams={mainnetStoreFeeParams} />
         <SPFreeQuota sps={sps} />
         <FAQ />
         <StartBuild />
diff --git a/apps/dcellar-web-ui/src/pages/pricing-calculator/index.tsx b/apps/dcellar-web-ui/src/pages/pricing-calculator/index.tsx
index 114eaf5f..22cae52e 100644
--- a/apps/dcellar-web-ui/src/pages/pricing-calculator/index.tsx
+++ b/apps/dcellar-web-ui/src/pages/pricing-calculator/index.tsx
@@ -1,5 +1,7 @@
 import { LandingPage } from '@/components/layout/LandingPage';
 import { PriceCalculator } from '@/modules/pricing-calculator';
+import {  wrapper } from '@/store';
+import { setupBnbPrice, setupMainnetStoreFeeParams } from '@/store/slices/global';
 import { ReactElement } from 'react';
 
 export default function PriceCalculatorPage() {
@@ -11,3 +13,11 @@ export default function PriceCalculatorPage() {
 PriceCalculatorPage.getLayout = (page: ReactElement) => {
   return <LandingPage page={page} />;
 };
+
+PriceCalculatorPage.getInitialProps = wrapper.getInitialAppProps((store) => async (appCtx) => {
+  await store.dispatch(setupBnbPrice());
+  await store.dispatch(setupMainnetStoreFeeParams())
+  return {
+    pageProps: {}
+  }
+});
\ No newline at end of file
diff --git a/apps/dcellar-web-ui/src/store/slices/global.ts b/apps/dcellar-web-ui/src/store/slices/global.ts
index f12f788a..809a03af 100644
--- a/apps/dcellar-web-ui/src/store/slices/global.ts
+++ b/apps/dcellar-web-ui/src/store/slices/global.ts
@@ -86,6 +86,7 @@ export interface GlobalState {
   isLoadingPLF: boolean;
   // Global data, different times may have different values
   storeFeeParams: TStoreFeeParams;
+  mainnetStoreFeeParams: TStoreFeeParams;
   waitQueue: WaitFile[];
   uploadQueue: Record<string, UploadFile[]>;
   taskManagement: boolean;
@@ -104,6 +105,7 @@ const initialState: GlobalState = {
     gasObjects: {},
   },
   storeFeeParams: {} as TStoreFeeParams,
+  mainnetStoreFeeParams: {} as TStoreFeeParams,
   isLoadingPLF: false,
   waitQueue: [],
   uploadQueue: {},
@@ -307,6 +309,9 @@ export const globalSlice = createSlice({
     setStoreFeeParams(state, { payload }: PayloadAction<{ storeFeeParams: TStoreFeeParams }>) {
       state.storeFeeParams = payload.storeFeeParams;
     },
+    setMainnetStoreFeeParams(state, { payload }: PayloadAction<{ storeFeeParams: TStoreFeeParams }>) {
+      state.mainnetStoreFeeParams = payload.storeFeeParams;
+    },
     setTmpAccount(state, { payload }: PayloadAction<TTmpAccount>) {
       state.tmpAccount = payload;
     },
@@ -365,7 +370,7 @@ export const globalSlice = createSlice({
         return task;
       });
     },
-    setisLoadingPLF(state, { payload }: PayloadAction<boolean>) {
+    setIsLoadingPLF(state, { payload }: PayloadAction<boolean>) {
       state.isLoadingPLF = payload;
     },
     setDisconnectWallet(state, { payload }: PayloadAction<boolean>) {
@@ -394,7 +399,7 @@ export const {
   resetUploadQueue,
   cancelUploadFolder,
   cancelWaitUploadFolder,
-  setisLoadingPLF,
+  setIsLoadingPLF,
   setAuthModalOpen,
   setDisconnectWallet,
   setConnectWallet,
@@ -417,6 +422,8 @@ export const selectBnbPrice = (state: AppState) => state.global.bnb.price;
 
 export const selectStoreFeeParams = (state: AppState) => state.global.storeFeeParams;
 
+export const selectMainnetStoreFeeParams = (state: AppState) => state.global.mainnetStoreFeeParams;
+
 export const selectHasUploadingTask = (state: AppState) => {
   const uploadQueue = state.global.uploadQueue[state.persist.loginAccount] || [];
 
@@ -448,14 +455,23 @@ export const setupGasObjects = () => async (dispatch: AppDispatch) => {
 export const setupStoreFeeParams = () => async (dispatch: AppDispatch, getState: GetState) => {
   const { isLoadingPLF } = getState().global;
   if (isLoadingPLF) return;
-  dispatch(setisLoadingPLF(true));
+  dispatch(setIsLoadingPLF(true));
   const storeFeeParams = await getStoreFeeParams({});
   dispatch(
     globalSlice.actions.setStoreFeeParams({
       storeFeeParams,
     }),
   );
-  dispatch(setisLoadingPLF(false));
+  dispatch(setIsLoadingPLF(false));
+};
+
+export const setupMainnetStoreFeeParams = () => async (dispatch: AppDispatch, getState: GetState) => {
+  const storeFeeParams = await getStoreFeeParams({network: 'mainnet'});
+  dispatch(
+    globalSlice.actions.setMainnetStoreFeeParams({
+      storeFeeParams,
+    }),
+  );
 };
 
 export const refreshTaskFolder =
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index c1250634..179350f1 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -61,6 +61,7 @@ importers:
       react-hook-form: ^7.43.1
       react-redux: ^8.1.1
       react-use: ^17.4.0
+      redux: ~4.2.1
       redux-persist: ^6.0.0
       swiper: ~10.3.1
       tsc-files: ~1.1.4
@@ -102,9 +103,10 @@ importers:
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-hook-form: 7.45.4_react@18.2.0
-      react-redux: 8.1.2_8e70b46749da2f914bfa002f2c2020cc
+      react-redux: 8.1.2_bd3428563a087b3aebd402b3731f157c
       react-use: 17.4.0_react-dom@18.2.0+react@18.2.0
-      redux-persist: 6.0.0
+      redux: 4.2.1
+      redux-persist: 6.0.0_redux@4.2.1
       swiper: 10.3.1
       typescript: 5.0.4
       wagmi: 0.12.19_66ef97441d5706a665436ba432bb4d01
@@ -2928,7 +2930,7 @@ packages:
     dependencies:
       immer: 9.0.21
       react: 18.2.0
-      react-redux: 8.1.2_8e70b46749da2f914bfa002f2c2020cc
+      react-redux: 8.1.2_bd3428563a087b3aebd402b3731f157c
       redux: 4.2.1
       redux-thunk: 2.4.2_redux@4.2.1
       reselect: 4.1.8
@@ -7522,7 +7524,7 @@ packages:
     dependencies:
       next: 13.3.4_b7097715b3c73a08800a730de4925ab5
       react: 18.2.0
-      react-redux: 8.1.2_8e70b46749da2f914bfa002f2c2020cc
+      react-redux: 8.1.2_bd3428563a087b3aebd402b3731f157c
     dev: false
 
   /next-transpile-modules/10.0.1:
@@ -8639,7 +8641,7 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
-  /react-redux/8.1.2_8e70b46749da2f914bfa002f2c2020cc:
+  /react-redux/8.1.2_bd3428563a087b3aebd402b3731f157c:
     resolution: {integrity: sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw==}
     peerDependencies:
       '@types/react': ^16.8 || ^17.0 || ^18.0
@@ -8669,6 +8671,7 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-is: 18.2.0
+      redux: 4.2.1
       use-sync-external-store: 1.2.0_react@18.2.0
     dev: false
 
@@ -8757,10 +8760,12 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
-  /redux-persist/6.0.0:
+  /redux-persist/6.0.0_redux@4.2.1:
     resolution: {integrity: sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==}
     peerDependencies:
       redux: '>4.0.0'
+    dependencies:
+      redux: 4.2.1
     dev: false
 
   /redux-thunk/2.4.2_redux@4.2.1: