diff --git a/frontend/providers/applaunchpad/src/constants/app.ts b/frontend/providers/applaunchpad/src/constants/app.ts
index b89d723a2..f0e820e5c 100644
--- a/frontend/providers/applaunchpad/src/constants/app.ts
+++ b/frontend/providers/applaunchpad/src/constants/app.ts
@@ -78,3 +78,8 @@ export const appDeployKey = 'cloud.sealos.io/app-deploy-manager';
 export const domainKey = `cloud.sealos.io/app-deploy-manager-domain`;
 export const gpuNodeSelectorKey = 'nvidia.com/gpu.product';
 export const gpuResourceKey = 'nvidia.com/gpu';
+export enum Coin {
+  cny = 'cny',
+  shellCoin = 'shellCoin',
+  usd = 'usd'
+}
diff --git a/frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts b/frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts
index 8fb204ff5..ac853e040 100644
--- a/frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts
+++ b/frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts
@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { jsonRes } from '@/services/backend/response';
 import type { FormSliderListType } from '@/types';
 import { readFileSync } from 'fs';
-import { noGpuSliderKey } from '@/constants/app';
+import { Coin, noGpuSliderKey } from '@/constants/app';
 
 export type Response = {
   SEALOS_DOMAIN: string;
@@ -10,6 +10,7 @@ export type Response = {
   INGRESS_SECRET: string;
   SHOW_EVENT_ANALYZE: boolean;
   FORM_SLIDER_LIST_CONFIG: FormSliderListType;
+  CURRENCY: Coin;
 };
 
 export const defaultVal = {
@@ -37,14 +38,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     global.FormSliderListConfig = defaultVal;
   }
-
   jsonRes<Response>(res, {
     data: {
       SEALOS_DOMAIN: process.env.SEALOS_DOMAIN || 'cloud.sealos.io',
       DOMAIN_PORT: process.env.DOMAIN_PORT || '',
       INGRESS_SECRET: process.env.INGRESS_SECRET || 'wildcard-cert',
       SHOW_EVENT_ANALYZE: !!process.env.FASTGPT_KEY,
-      FORM_SLIDER_LIST_CONFIG: global.FormSliderListConfig
+      FORM_SLIDER_LIST_CONFIG: global.FormSliderListConfig,
+      CURRENCY: (process.env['CURRENCY'] || Coin.shellCoin) as Coin
     }
   });
 }
diff --git a/frontend/providers/applaunchpad/src/pages/app/edit/components/PriceBox.tsx b/frontend/providers/applaunchpad/src/pages/app/edit/components/PriceBox.tsx
index 51ed5d4da..0e23ae923 100644
--- a/frontend/providers/applaunchpad/src/pages/app/edit/components/PriceBox.tsx
+++ b/frontend/providers/applaunchpad/src/pages/app/edit/components/PriceBox.tsx
@@ -2,7 +2,29 @@ import React, { useMemo } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import { useGlobalStore } from '@/store/global';
 import { useTranslation } from 'next-i18next';
-
+import { Text, Icon } from '@chakra-ui/react';
+import { CURRENCY } from '@/store/static';
+function Currencysymbol({
+  type = 'shellCoin',
+  ...props
+}: {
+  type?: 'shellCoin' | 'cny' | 'usd';
+} & Pick<Parameters<typeof Icon>[0], 'w' | 'h' | 'color'>) {
+  return type === 'shellCoin' ? (
+    <Icon h="auto" {...props} viewBox="0 0 43 43">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        clip-rule="evenodd"
+        d="M38.8452 16.3383C38.8452 16.3383 38.169 13.0791 34.6177 12.5018C34.6177 12.5018 32.91 5.22138 26.476 8.01336C26.476 8.01336 21.7775 1.34481 16.7833 8.01336C16.7833 8.01336 10.8267 4.86984 8.35511 12.513C8.35511 12.513 4.03522 12.6233 4.00011 18.5272C3.96499 24.4311 12.4728 30.8168 13.6867 31.3741C13.6867 31.3741 11.0158 34.2719 14.2876 36.284C18.8172 38.6577 27.3756 37.7936 29.4606 35.9326C30.7532 34.7789 30.6523 33.0064 29.4606 31.5498C29.4556 31.5548 40.4202 25.1038 38.8452 16.3383ZM31.6228 11.4841C29.9736 8.80397 26.7453 10.5751 26.7453 10.5751C27.9505 20.3212 24.1256 29.8479 24.1256 29.8479C27.7512 28.7132 33.6121 14.7169 31.6228 11.4841ZM21.1951 7.66792C21.1951 7.66792 18.5641 7.83387 18.1203 11.4413C17.6764 15.0488 18.7299 29.0557 21.5427 30.0673C21.5427 30.0673 23.5266 30.5865 24.8902 18.319C26.6924 6.40218 21.1951 7.66792 21.1951 7.66792ZM16.2936 10.5751C16.2936 10.5751 13.488 8.61467 11.4786 11.4841C9.49465 14.7169 15.3556 28.7132 18.9759 29.8479C18.9759 29.8479 15.2143 21.3388 16.2936 10.5751ZM8.87726 14.9454C8.87726 14.9454 6.13705 14.9454 6.43049 18.7633C6.79949 23.5643 12.9309 28.6588 15.2143 29.5044C15.2089 29.5044 10.0763 22.326 8.87726 14.9454ZM15.1097 34.6383C15.8744 35.9813 24.6742 36.3866 28.102 34.8719C28.102 34.8719 29.1783 33.7787 27.532 31.5994C27.4731 31.5216 26.8769 31.5791 26.5874 31.5627C26.2978 31.5463 26.0133 31.4758 25.6763 31.4068C25.6763 31.4068 24.6168 32.1662 22.9437 31.5994C22.9437 31.5994 21.7614 32.2601 20.3823 31.5994C20.3823 31.5994 18.6756 32.1821 17.6497 31.4068C17.6497 31.4068 16.9291 31.6032 15.8719 31.4068C15.8719 31.4068 14.3671 33.3342 15.1097 34.6383ZM34.2051 14.9533C32.8914 23.1395 27.9505 29.5113 27.9505 29.5113C30.9382 28.8784 36.0244 22.5811 36.6816 18.7633C37.3388 14.9454 34.2051 14.9533 34.2051 14.9533Z"
+      />
+    </Icon>
+  ) : type === 'cny' ? (
+    <Text {...props}>￥</Text>
+  ) : (
+    <Text {...props}>$</Text>
+  );
+}
 const PriceBox = ({
   cpu,
   memory,
@@ -40,7 +62,12 @@ const PriceBox = ({
     const podScale = (val: number) => {
       const min = (val * pods[0]).toFixed(2);
       const max = (val * pods[1]).toFixed(2);
-      return pods[0] === pods[1] ? `￥${min}` : `￥${min} ~ ${max}`;
+      return (
+        <Flex>
+          <Currencysymbol type={CURRENCY} />
+          <Text ml="4px">{pods[0] === pods[1] ? `${min}` : `${min} ~ ${max}`}</Text>
+        </Flex>
+      );
     };
 
     return [
diff --git a/frontend/providers/applaunchpad/src/store/static.ts b/frontend/providers/applaunchpad/src/store/static.ts
index 7a87584e8..1db8f4065 100644
--- a/frontend/providers/applaunchpad/src/store/static.ts
+++ b/frontend/providers/applaunchpad/src/store/static.ts
@@ -1,10 +1,11 @@
 import { getInitData } from '@/api/platform';
+import { Coin } from '@/constants/app';
 
 export let SEALOS_DOMAIN = 'cloud.sealos.io';
 export let DOMAIN_PORT = '';
 export let INGRESS_SECRET = 'wildcard-cert';
 export let SHOW_EVENT_ANALYZE = false;
-
+export let CURRENCY = Coin.shellCoin;
 export const loadInitData = async () => {
   try {
     const res = await getInitData();
@@ -12,11 +13,13 @@ export const loadInitData = async () => {
     DOMAIN_PORT = res.DOMAIN_PORT;
     INGRESS_SECRET = res.INGRESS_SECRET;
     SHOW_EVENT_ANALYZE = res.SHOW_EVENT_ANALYZE;
+    CURRENCY = res.CURRENCY;
 
     return {
       SEALOS_DOMAIN,
       DOMAIN_PORT,
       INGRESS_SECRET,
+      CURRENCY,
       FORM_SLIDER_LIST_CONFIG: res.FORM_SLIDER_LIST_CONFIG
     };
   } catch (error) {}
diff --git a/frontend/providers/costcenter/.env b/frontend/providers/costcenter/.env
index a7766c4f3..14e689c6a 100644
--- a/frontend/providers/costcenter/.env
+++ b/frontend/providers/costcenter/.env
@@ -1,5 +1,7 @@
 # for open transfer
 # TRANSFER_ENABLED="true"
+# WECHAT_ENABLED="true"
+# STRIPE_ENABLED="true"
 
 # for open transfer
 # RECHARGE_ENABLED="true"
@@ -7,8 +9,10 @@
 # for open GPU measure
 # GPU_ENABLED="true"
 
+
 # for Stripe pay
 # STRIPE_PUB
+
 # for open invoice
 # INVOICE_ENABLED="true"
 # MONGODB_URI
diff --git a/frontend/providers/costcenter/public/locales/en/common.json b/frontend/providers/costcenter/public/locales/en/common.json
index 7dc89993f..0d4f0f364 100644
--- a/frontend/providers/costcenter/public/locales/en/common.json
+++ b/frontend/providers/costcenter/public/locales/en/common.json
@@ -66,6 +66,8 @@
   "he payee cannot be oneself": "The payee cannot be oneself",
   "True Amount": "True Amount",
   "Get Code": "verification",
+  "Stripe Success": "pay with Stripe successfully",
+  "Stripe Cancel": "cancel to pay with Stripe",
   "orders": {
     "list": "Order List",
     "invoiceAmount": "Invoice Amount",
diff --git a/frontend/providers/costcenter/public/locales/zh/common.json b/frontend/providers/costcenter/public/locales/zh/common.json
index 412246e83..0976689c3 100644
--- a/frontend/providers/costcenter/public/locales/zh/common.json
+++ b/frontend/providers/costcenter/public/locales/zh/common.json
@@ -66,6 +66,8 @@
   "Transfer Success": "转账成功",
   "True Amount": "实际金额",
   "Get Code": "获取验证码",
+  "Stripe Success": "Stripe 支付完成",
+  "Stripe Cancel": "Stripe 支付取消",
   "orders": {
     "list": "订单列表",
     "invoiceAmount": "发票金额",
diff --git a/frontend/providers/costcenter/src/components/CurrencySymbol.tsx b/frontend/providers/costcenter/src/components/CurrencySymbol.tsx
new file mode 100644
index 000000000..090ffee84
--- /dev/null
+++ b/frontend/providers/costcenter/src/components/CurrencySymbol.tsx
@@ -0,0 +1,22 @@
+import { Text, Icon } from '@chakra-ui/react';
+export default function currencysymbol({
+  type = 'shellCoin',
+  ...props
+}: {
+  type?: 'shellCoin' | 'cny' | 'usd';
+} & Pick<Parameters<typeof Icon>[0], 'w' | 'h' | 'color'>) {
+  return type === 'shellCoin' ? (
+    <Icon h="auto" {...props} viewBox="0 0 43 43">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        clip-rule="evenodd"
+        d="M38.8452 16.3383C38.8452 16.3383 38.169 13.0791 34.6177 12.5018C34.6177 12.5018 32.91 5.22138 26.476 8.01336C26.476 8.01336 21.7775 1.34481 16.7833 8.01336C16.7833 8.01336 10.8267 4.86984 8.35511 12.513C8.35511 12.513 4.03522 12.6233 4.00011 18.5272C3.96499 24.4311 12.4728 30.8168 13.6867 31.3741C13.6867 31.3741 11.0158 34.2719 14.2876 36.284C18.8172 38.6577 27.3756 37.7936 29.4606 35.9326C30.7532 34.7789 30.6523 33.0064 29.4606 31.5498C29.4556 31.5548 40.4202 25.1038 38.8452 16.3383ZM31.6228 11.4841C29.9736 8.80397 26.7453 10.5751 26.7453 10.5751C27.9505 20.3212 24.1256 29.8479 24.1256 29.8479C27.7512 28.7132 33.6121 14.7169 31.6228 11.4841ZM21.1951 7.66792C21.1951 7.66792 18.5641 7.83387 18.1203 11.4413C17.6764 15.0488 18.7299 29.0557 21.5427 30.0673C21.5427 30.0673 23.5266 30.5865 24.8902 18.319C26.6924 6.40218 21.1951 7.66792 21.1951 7.66792ZM16.2936 10.5751C16.2936 10.5751 13.488 8.61467 11.4786 11.4841C9.49465 14.7169 15.3556 28.7132 18.9759 29.8479C18.9759 29.8479 15.2143 21.3388 16.2936 10.5751ZM8.87726 14.9454C8.87726 14.9454 6.13705 14.9454 6.43049 18.7633C6.79949 23.5643 12.9309 28.6588 15.2143 29.5044C15.2089 29.5044 10.0763 22.326 8.87726 14.9454ZM15.1097 34.6383C15.8744 35.9813 24.6742 36.3866 28.102 34.8719C28.102 34.8719 29.1783 33.7787 27.532 31.5994C27.4731 31.5216 26.8769 31.5791 26.5874 31.5627C26.2978 31.5463 26.0133 31.4758 25.6763 31.4068C25.6763 31.4068 24.6168 32.1662 22.9437 31.5994C22.9437 31.5994 21.7614 32.2601 20.3823 31.5994C20.3823 31.5994 18.6756 32.1821 17.6497 31.4068C17.6497 31.4068 16.9291 31.6032 15.8719 31.4068C15.8719 31.4068 14.3671 33.3342 15.1097 34.6383ZM34.2051 14.9533C32.8914 23.1395 27.9505 29.5113 27.9505 29.5113C30.9382 28.8784 36.0244 22.5811 36.6816 18.7633C37.3388 14.9454 34.2051 14.9533 34.2051 14.9533Z"
+      />
+    </Icon>
+  ) : type === 'cny' ? (
+    <Text {...props}>￥</Text>
+  ) : (
+    <Text {...props}>$</Text>
+  );
+}
diff --git a/frontend/providers/costcenter/src/components/billing/billingTable.tsx b/frontend/providers/costcenter/src/components/billing/billingTable.tsx
index f5c7f346d..dbacd6f9b 100644
--- a/frontend/providers/costcenter/src/components/billing/billingTable.tsx
+++ b/frontend/providers/costcenter/src/components/billing/billingTable.tsx
@@ -5,12 +5,13 @@ import lineUp from '@/assert/lineUp.svg';
 import { Flex, Img, Table, TableContainer, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react';
 import { format, parseISO } from 'date-fns';
 import { formatMoney } from '@/utils/format';
-import shellCoin from '@/assert/shell_coin.svg';
 import { useTranslation } from 'next-i18next';
 import useEnvStore from '@/stores/env';
+import CurrencySymbol from '../CurrencySymbol';
 export function BillingTable({ data }: { data: BillingItem[] }) {
   const { t } = useTranslation();
   const gpuEnabled = useEnvStore((state) => state.gpuEnabled);
+  const currency = useEnvStore((s) => s.currency);
   return (
     <TableContainer w="100%" mt="0px">
       <Table variant="simple">
@@ -28,7 +29,12 @@ export function BillingTable({ data }: { data: BillingItem[] }) {
                   background: '#F1F4F6'
                 }}
               >
-                {t(item)}
+                <Flex display={'flex'} alignItems={'center'}>
+                  <Text mr="4px">{t(item)}</Text>
+                  {['CPU', 'Gpu', 'Memory', 'Storage', 'Total Amount'].includes(item) && (
+                    <CurrencySymbol type={currency} />
+                  )}
+                </Flex>
               </Th>
             ))}
           </Tr>
@@ -80,57 +86,13 @@ export function BillingTable({ data }: { data: BillingItem[] }) {
                       </Flex>
                     </Flex>
                   </Td>
-
-                  <Td>
-                    {!item.type ? (
-                      <Flex>
-                        <Img src={shellCoin.src} mr="4px" />
-                        <span>{formatMoney(item.costs?.cpu || 0)}</span>
-                      </Flex>
-                    ) : (
-                      '-'
-                    )}
-                  </Td>
-                  <Td>
-                    {!item.type ? (
-                      <Flex>
-                        <Img src={shellCoin.src} mr="4px" />
-                        <span>{formatMoney(item.costs?.memory || 0)}</span>{' '}
-                      </Flex>
-                    ) : (
-                      '-'
-                    )}
-                  </Td>
-                  <Td>
-                    {!item.type ? (
-                      <Flex>
-                        <Img src={shellCoin.src} mr="4px" />
-                        <span>{formatMoney(item.costs?.storage || 0)}</span>{' '}
-                      </Flex>
-                    ) : (
-                      '-'
-                    )}
-                  </Td>
+                  <Td>{!item.type ? <span>{formatMoney(item.costs?.cpu || 0)}</span> : '-'}</Td>
+                  <Td>{!item.type ? <span>{formatMoney(item.costs?.memory || 0)}</span> : '-'}</Td>
+                  <Td>{!item.type ? <span>{formatMoney(item.costs?.storage || 0)}</span> : '-'}</Td>
                   {gpuEnabled && (
-                    <Td>
-                      {!item.type ? (
-                        <Flex>
-                          <Img src={shellCoin.src} mr="4px" />
-                          <span>{formatMoney(item.costs?.gpu || 0)}</span>{' '}
-                        </Flex>
-                      ) : (
-                        '-'
-                      )}
-                    </Td>
+                    <Td>{!item.type ? <span>{formatMoney(item.costs?.gpu || 0)}</span> : '-'}</Td>
                   )}
-                  <Td>
-                    {
-                      <Flex>
-                        <Img src={shellCoin.src} mr="4px" />
-                        <span>{formatMoney(item.amount)}</span>
-                      </Flex>
-                    }
-                  </Td>
+                  <Td>{<span>{formatMoney(item.amount)}</span>}</Td>
                 </Tr>
               );
             })}
diff --git a/frontend/providers/costcenter/src/components/cost_overview/buget.tsx b/frontend/providers/costcenter/src/components/cost_overview/buget.tsx
index 84035cbfe..387091e88 100644
--- a/frontend/providers/costcenter/src/components/cost_overview/buget.tsx
+++ b/frontend/providers/costcenter/src/components/cost_overview/buget.tsx
@@ -6,10 +6,12 @@ import { useMemo } from 'react';
 import { formatMoney } from '@/utils/format';
 import { useTranslation } from 'next-i18next';
 import useBillingData from '@/hooks/useBillingData';
-import shellcoin from '@/assert/shell_coin.svg';
+import CurrencySymbol from '../CurrencySymbol';
+import useEnvStore from '@/stores/env';
 export function Buget() {
   const { t } = useTranslation();
   const { data } = useBillingData();
+  const currency = useEnvStore((s) => s.currency);
   const [_out, _in] = useMemo(
     () =>
       (data?.data?.status.item || []).reduce<[number, number]>(
@@ -52,8 +54,8 @@ export function Buget() {
                 {t(v.title)}
               </Text>
               <Flex mt="8px">
-                <Img src={shellcoin.src} mr="4px" />
-                <Text fontWeight="500" fontSize="16px">
+                <CurrencySymbol w="16px" type={currency} />
+                <Text fontWeight="500" fontSize="16px" ml="4px">
                   {v.value}
                 </Text>
               </Flex>
diff --git a/frontend/providers/costcenter/src/components/cost_overview/components/RechargeModal.tsx b/frontend/providers/costcenter/src/components/cost_overview/components/RechargeModal.tsx
index 30ec2bc9f..68c5fb7eb 100644
--- a/frontend/providers/costcenter/src/components/cost_overview/components/RechargeModal.tsx
+++ b/frontend/providers/costcenter/src/components/cost_overview/components/RechargeModal.tsx
@@ -1,4 +1,3 @@
-import shellcoin from '@/assert/shell_coin.svg';
 import {
   Box,
   Button,
@@ -33,6 +32,8 @@ import stripe_icon from '@/assert/bi_stripe.svg';
 import { Spinner } from '@chakra-ui/react';
 import { Stripe } from '@stripe/stripe-js';
 import type { AxiosInstance } from 'axios';
+import useEnvStore from '@/stores/env';
+import Currencysymbol from '@/components/CurrencySymbol';
 const StripeForm = (props: {
   tradeNO?: string;
   complete: number;
@@ -123,6 +124,7 @@ const BonusBox = (props: {
   amount: number;
 }) => {
   const { t } = useTranslation();
+  const currency = useEnvStore((s) => s.currency);
   return (
     <Flex
       width="140px"
@@ -165,8 +167,8 @@ const BonusBox = (props: {
         {t('Bonus')} {props.bouns}
       </Text>
       <Flex align={'center'}>
-        <Img src={shellcoin.src} w="24px" h="24px" mr="4px" />
-        <Text fontStyle="normal" fontWeight="500" fontSize="24px">
+        <Currencysymbol w="24px" type={currency} />
+        <Text ml="4px" fontStyle="normal" fontWeight="500" fontSize="24px">
           {props.amount}
         </Text>
       </Flex>
@@ -308,7 +310,7 @@ const RechargeModal = forwardRef(
       },
       [isSuccess, ratios, steps]
     );
-
+    const { stripeEnabled, wechatEnabled } = useEnvStore();
     useEffect(() => {
       if (steps && steps.length > 0) {
         setAmount(steps[0]);
@@ -322,10 +324,11 @@ const RechargeModal = forwardRef(
     };
 
     const handleStripeConfirm = () => {
-      setComplete(1);
       setPayType('stripe');
+      setComplete(1);
       createPaymentRes.mutate();
     };
+    const currency = useEnvStore((s) => s.currency);
     return (
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
@@ -352,8 +355,8 @@ const RechargeModal = forwardRef(
                     <Text color="#7B838B" fontWeight={'normal'} mr={'20px'}>
                       {t('Balance')}
                     </Text>
-                    <Img src={shellcoin.src} w="24px" h="24px" mr="4px" />
-                    <Text color="#24282C" fontSize="24px" fontWeight={'medium'}>
+                    <Currencysymbol w="24px" type={currency} />
+                    <Text ml="4px" color="#24282C" fontSize="24px" fontWeight={'medium'}>
                       {formatMoney(balance).toFixed(2)}
                     </Text>
                   </Flex>
@@ -399,7 +402,7 @@ const RechargeModal = forwardRef(
                       variant={'unstyled'}
                       onChange={(str, v) => (str.trim() ? setAmount(v) : setAmount(0))}
                     >
-                      <Img src={shellcoin.src} w="16px" h="16px" mr="4px" />
+                      <Currencysymbol w="16px" type={currency} />
                       <NumberInputField />
                       <NumberInputStepper>
                         <NumberIncrementStepper>
@@ -434,34 +437,38 @@ const RechargeModal = forwardRef(
                     <OuterLink text={t('View Discount Rules')}></OuterLink>
                   </Flex>
                   <Flex gap={'16px'} width={'full'}>
-                    <Button
-                      size="primary"
-                      variant="primary"
-                      mt="20px"
-                      w="full"
-                      h="auto"
-                      py="14px"
-                      px="34px"
-                      onClick={() => {
-                        handleStripeConfirm();
-                      }}
-                    >
-                      <Img src={stripe_icon.src} mr="2px" w="24px" h="24px" />
-                      <Text>{t('pay with stripe')}</Text>
-                    </Button>
-                    <Button
-                      size="primary"
-                      variant="primary"
-                      mt="20px"
-                      w="full"
-                      h="auto"
-                      py="14px"
-                      px="34px"
-                      onClick={() => handleWechatConfirm()}
-                    >
-                      <Img src={wechat_icon.src} mr="2px" w="24px" h="24px" />
-                      <Text>{t('pay with wechat')}</Text>
-                    </Button>
+                    {stripeEnabled && (
+                      <Button
+                        size="primary"
+                        variant="primary"
+                        mt="20px"
+                        w="full"
+                        h="auto"
+                        py="14px"
+                        px="34px"
+                        onClick={() => {
+                          handleStripeConfirm();
+                        }}
+                      >
+                        <Img src={stripe_icon.src} mr="2px" w="24px" h="24px" />
+                        <Text>{t('pay with stripe')}</Text>
+                      </Button>
+                    )}
+                    {wechatEnabled && (
+                      <Button
+                        size="primary"
+                        variant="primary"
+                        mt="20px"
+                        w="full"
+                        h="auto"
+                        py="14px"
+                        px="34px"
+                        onClick={() => handleWechatConfirm()}
+                      >
+                        <Img src={wechat_icon.src} mr="2px" w="24px" h="24px" />
+                        <Text>{t('pay with wechat')}</Text>
+                      </Button>
+                    )}
                   </Flex>
                 </Flex>
               </>
diff --git a/frontend/providers/costcenter/src/components/cost_overview/components/TransferModal.tsx b/frontend/providers/costcenter/src/components/cost_overview/components/TransferModal.tsx
index fdd2eac95..105ecbdd1 100644
--- a/frontend/providers/costcenter/src/components/cost_overview/components/TransferModal.tsx
+++ b/frontend/providers/costcenter/src/components/cost_overview/components/TransferModal.tsx
@@ -1,5 +1,5 @@
 import request from '@/service/request';
-import shellcoin from '@/assert/shell_coin.svg';
+import Currencysymbol from '@/components/CurrencySymbol';
 import {
   Button,
   Flex,
@@ -15,7 +15,6 @@ import {
   NumberInput,
   NumberInputField,
   NumberInputStepper,
-  Spinner,
   Text,
   useDisclosure,
   useToast
@@ -27,6 +26,7 @@ import { deFormatMoney, formatMoney } from '@/utils/format';
 import { useTranslation } from 'next-i18next';
 import { ApiResp } from '@/types/api';
 import { TransferState, transferStatus } from '@/types/Transfer';
+import useEnvStore from '@/stores/env';
 
 const TransferModal = forwardRef(
   (
@@ -51,6 +51,7 @@ const TransferModal = forwardRef(
       }),
       []
     );
+    const currency = useEnvStore((s) => s.currency);
     const { t } = useTranslation();
     const { isOpen, onOpen, onClose: _onClose } = useDisclosure();
     const [to, setTo] = useState('');
@@ -216,8 +217,8 @@ const TransferModal = forwardRef(
               onChange={(str, v) => (str.trim() ? setAmount(v) : setAmount(0))}
               isDisabled={mutation.isLoading}
             >
-              <Img mr={'4px'} src={shellcoin.src} w="16px" h="16px" />
-              <NumberInputField />
+              <Currencysymbol w="16px" type={currency} />
+              <NumberInputField ml="4px" />
               <NumberInputStepper>
                 <NumberIncrementStepper>
                   <Img src={vector.src}></Img>
@@ -231,8 +232,8 @@ const TransferModal = forwardRef(
               <Text fontSize="12px" mr={'12px'}>
                 {t('Balance')}
               </Text>
-              <Img mr={'4px'} src={shellcoin.src} w="16px" h="16px" />
-              <Text color="rgba(33, 155, 244, 1)" fontSize={'16px'}>
+              <Currencysymbol w="16px" type={currency} color="rgba(33, 155, 244, 1)" />
+              <Text color="rgba(33, 155, 244, 1)" fontSize={'16px'} ml="4px">
                 {formatMoney(balance).toFixed(2)}
               </Text>
               <Button
diff --git a/frontend/providers/costcenter/src/components/cost_overview/components/user.tsx b/frontend/providers/costcenter/src/components/cost_overview/components/user.tsx
index 4a9fff3b2..7ed073293 100644
--- a/frontend/providers/costcenter/src/components/cost_overview/components/user.tsx
+++ b/frontend/providers/costcenter/src/components/cost_overview/components/user.tsx
@@ -13,7 +13,7 @@ import jsyaml from 'js-yaml';
 import RechargeModal from './RechargeModal';
 import TransferModal from './TransferModal';
 import useEnvStore from '@/stores/env';
-import shellCoin from '@/assert/shell_coin.svg';
+import CurrencySymbol from '@/components/CurrencySymbol';
 export default memo(function UserCard() {
   const getSession = useSessionStore((state) => state.getSession);
   const transferEnabled = useEnvStore((state) => state.transferEnabled);
@@ -44,6 +44,7 @@ export default memo(function UserCard() {
   if (balance_raw?.data?.deductionBalance) {
     real_balance -= balance_raw?.data.deductionBalance;
   }
+  const currency = useEnvStore((s) => s.currency);
   const balance = real_balance;
   const stripePromise = useEnvStore((s) => s.stripePromise);
   return (
@@ -51,7 +52,6 @@ export default memo(function UserCard() {
       <Flex
         className={styles.userCard}
         boxShadow={'0 4px #BCBFC3,0 8px #DFE2E6'}
-        // aspectRatio={'2/1'}
         pt="13px"
         pb={'19px'}
         mb={'34px'}
@@ -76,8 +76,8 @@ export default memo(function UserCard() {
             {t('Balance')}
           </Box>
           <Flex fontSize="24px" fontWeight="500" alignSelf={'center'} mt="3px !important">
-            <Img src={shellCoin.src} w="16px" h="16px" mixBlendMode={'exclusion'} />
-            <Text>{displayMoney(formatMoney(balance))}</Text>
+            <CurrencySymbol color={'white'} w="20px" type={currency} />
+            <Text ml="6px">{displayMoney(formatMoney(balance))}</Text>
           </Flex>
           <Flex alignItems="center" alignSelf={'center'} gap="10px" mt={'20px !important'}>
             {transferEnabled && (
diff --git a/frontend/providers/costcenter/src/components/invoice/invoiceTable.tsx b/frontend/providers/costcenter/src/components/invoice/invoiceTable.tsx
index 177470fc0..66e4f066b 100644
--- a/frontend/providers/costcenter/src/components/invoice/invoiceTable.tsx
+++ b/frontend/providers/costcenter/src/components/invoice/invoiceTable.tsx
@@ -3,6 +3,8 @@ import { Checkbox, Flex, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from
 import { format } from 'date-fns';
 import { useTranslation } from 'next-i18next';
 import { ReqGenInvoice } from '@/types';
+import CurrencySymbol from '../CurrencySymbol';
+import useEnvStore from '@/stores/env';
 
 export function InvoiceTable({
   data,
@@ -15,6 +17,7 @@ export function InvoiceTable({
 }) {
   const { t } = useTranslation();
   const needSelect = !!onSelect;
+  const currency = useEnvStore((s) => s.currency);
   return (
     <TableContainer w="100%" mt="0px" border={'1px solid #DEE0E2'} borderRadius="2px">
       <Table variant="simple">
@@ -32,7 +35,10 @@ export function InvoiceTable({
                   background: '#F1F4F6'
                 }}
               >
-                {t(item)}
+                <Flex display={'flex'}>
+                  {t(item)}
+                  {item !== 'Order Number' && <CurrencySymbol type={currency} />}
+                </Flex>
               </Th>
             ))}
           </Tr>
@@ -57,7 +63,7 @@ export function InvoiceTable({
                 </Flex>
               </Td>
               <Td>{format(item.createdTime, 'MM-dd HH:mm')}</Td>
-              <Td color={'#219BF4'}>{'￥' + item.amount}</Td>
+              <Td color={'#219BF4'}>{item.amount}</Td>
             </Tr>
           ))}
         </Tbody>
diff --git a/frontend/providers/costcenter/src/components/valuation/predictCard.tsx b/frontend/providers/costcenter/src/components/valuation/predictCard.tsx
index b0d59c594..1c8e281da 100644
--- a/frontend/providers/costcenter/src/components/valuation/predictCard.tsx
+++ b/frontend/providers/costcenter/src/components/valuation/predictCard.tsx
@@ -1,14 +1,15 @@
 import useBillingStore from '@/stores/billing';
 import useEnvStore from '@/stores/env';
 import { displayMoney } from '@/utils/format';
-import { Flex, Img } from '@chakra-ui/react';
+import { Flex, Img, Text } from '@chakra-ui/react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import shellcoin from '@/assert/shell_coin.svg';
+import CurrencySymbol from '../CurrencySymbol';
 export default function PredictCard() {
   const { t } = useTranslation();
   const total = t('total');
   const state = useBillingStore();
+  const currency = useEnvStore((s) => s.currency);
   const gpuEnabled = useEnvStore((state) => state.gpuEnabled);
   const leastCost = useMemo(() => {
     const origin = [
@@ -45,8 +46,8 @@ export default function PredictCard() {
             {item.name}
           </Flex>
           <Flex justify={'center'} align={'center'} h={'68px'}>
-            <Img src={shellcoin.src} h="16px" w="16px" mr="4px" />
-            {item.cost}
+            <CurrencySymbol w="14px" type={currency} />
+            <Text ml="4px">{item.cost}</Text>
           </Flex>
         </Flex>
       ))}
diff --git a/frontend/providers/costcenter/src/pages/_app.tsx b/frontend/providers/costcenter/src/pages/_app.tsx
index a72187194..270a1b68f 100644
--- a/frontend/providers/costcenter/src/pages/_app.tsx
+++ b/frontend/providers/costcenter/src/pages/_app.tsx
@@ -72,11 +72,15 @@ const App = ({ Component, pageProps }: AppProps) => {
     (async () => {
       try {
         const { data } = await request<any, ApiResp<EnvData>>('/api/enabled');
-        state.setInvoiceEnabled(!!data?.invoiceEnabled);
-        state.setTransferEnabled(!!data?.transferEnabled);
-        state.setRechargeEnabled(!!data?.rechargeEnabled);
-        state.setGpuEnabled(!!data?.gpuEnabled);
-        state.setStripe(data?.stripePub || '');
+        state.setEnv('invoiceEnabled', !!data?.invoiceEnabled);
+        state.setEnv('transferEnabled', !!data?.transferEnabled);
+        state.setEnv('rechargeEnabled', !!data?.rechargeEnabled);
+        state.setEnv('currency', data?.currency || 'shellCoin');
+        state.setEnv('gpuEnabled', !!data?.gpuEnabled);
+        const stripeE = !!data?.stripeEnabled;
+        state.setEnv('stripeEnabled', stripeE);
+        stripeE && state.setStripe(data?.stripePub || '');
+        state.setEnv('wechatEnabled', !!data?.wechatEnabled);
       } catch (error) {
         console.error('get env error');
       }
diff --git a/frontend/providers/costcenter/src/pages/api/enabled.ts b/frontend/providers/costcenter/src/pages/api/enabled.ts
index 71f73f146..6aff7541d 100644
--- a/frontend/providers/costcenter/src/pages/api/enabled.ts
+++ b/frontend/providers/costcenter/src/pages/api/enabled.ts
@@ -1,4 +1,11 @@
-import { enabelGpu, enableInvoice, enableRecharge, enableTransfer } from '@/service/enabled';
+import {
+  enableGpu,
+  enableInvoice,
+  enableRecharge,
+  enableStripe,
+  enableTransfer,
+  enableWechat
+} from '@/service/enabled';
 import { jsonRes } from '@/service/backend/response';
 import { NextApiRequest, NextApiResponse } from 'next';
 import { EnvData } from '@/types/env';
@@ -10,8 +17,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         rechargeEnabled: enableRecharge(),
         transferEnabled: enableTransfer(),
         invoiceEnabled: enableInvoice(),
-        gpuEnabled: enabelGpu(),
-        stripePub: process.env['STRIPE_PUB'] || ''
+        gpuEnabled: enableGpu(),
+        stripePub: process.env['STRIPE_PUB'] || '',
+        stripeEnabled: enableStripe(),
+        wechatEnabled: enableWechat(),
+        currency: (process.env['CURRENCY'] as EnvData['currency']) || 'shellCoin'
       },
       code: 200
     });
diff --git a/frontend/providers/costcenter/src/pages/cost_overview/index.module.scss b/frontend/providers/costcenter/src/pages/cost_overview/index.module.scss
deleted file mode 100644
index 15e0cb183..000000000
--- a/frontend/providers/costcenter/src/pages/cost_overview/index.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.container {
-  table thead tr {
-    background: #f8f8fa;
-  }
-
-  td,
-  th {
-    border: none;
-    text-align: center;
-    &:first-child {
-      text-align: left;
-    }
-    &:last-child {
-      text-align: right;
-    }
-  }
-}
diff --git a/frontend/providers/costcenter/src/pages/cost_overview/index.tsx b/frontend/providers/costcenter/src/pages/cost_overview/index.tsx
index 716b11e0a..a3c65e01b 100644
--- a/frontend/providers/costcenter/src/pages/cost_overview/index.tsx
+++ b/frontend/providers/costcenter/src/pages/cost_overview/index.tsx
@@ -2,7 +2,7 @@ import bar_icon from '@/assert/bar_chart_4_bars_black.svg';
 import { BillingTable } from '@/components/billing/billingTable';
 import SelectRange from '@/components/billing/selectDateRange';
 import useNotEnough from '@/hooks/useNotEnough';
-import { Box, Flex, Heading, Img } from '@chakra-ui/react';
+import { Box, Flex, Heading, Img, useToast } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useEffect, useMemo } from 'react';
@@ -17,6 +17,7 @@ import { QueryClient } from '@tanstack/react-query';
 import request from '@/service/request';
 import useBillingStore from '@/stores/billing';
 import { isSameDay, isSameHour, parseISO } from 'date-fns';
+import { useRouter } from 'next/router';
 function CostOverview() {
   const { t, i18n } = useTranslation();
   const updateCPU = useBillingStore((state) => state.updateCpu);
@@ -35,6 +36,29 @@ function CostOverview() {
     () => data?.data?.status.item.filter((v) => v.type === 0) || [],
     [data]
   );
+  const totast = useToast();
+  const router = useRouter();
+  const { stripeState } = router.query;
+  useEffect(() => {
+    if (stripeState === 'success') {
+      totast({
+        status: 'success',
+        duration: 3000,
+        title: t('Stripe Success'),
+        isClosable: true,
+        position: 'top'
+      });
+    } else if (stripeState === 'error') {
+      totast({
+        status: 'error',
+        duration: 3000,
+        title: t('Stripe Cancel'),
+        isClosable: true,
+        position: 'top'
+      });
+    }
+    !!stripeState && router.replace(router.pathname);
+  }, [stripeState]);
   useEffect(() => {
     if (costBillingItems.length === 0) return;
     const time = parseISO(costBillingItems[0].time);
diff --git a/frontend/providers/costcenter/src/pages/create_invoice/index.tsx b/frontend/providers/costcenter/src/pages/create_invoice/index.tsx
index 0a1d7ec25..e3c2e4de8 100644
--- a/frontend/providers/costcenter/src/pages/create_invoice/index.tsx
+++ b/frontend/providers/costcenter/src/pages/create_invoice/index.tsx
@@ -1,4 +1,3 @@
-// import { MockBillingData } from '@/mock/billing';
 import { InvoiceTable } from '@/components/invoice/invoiceTable';
 import { Box, Button, Flex, Heading, Img, Input, Text } from '@chakra-ui/react';
 import { useEffect, useRef, useState } from 'react';
diff --git a/frontend/providers/costcenter/src/pages/index.tsx b/frontend/providers/costcenter/src/pages/index.tsx
index 6515a2bac..c212fc498 100644
--- a/frontend/providers/costcenter/src/pages/index.tsx
+++ b/frontend/providers/costcenter/src/pages/index.tsx
@@ -1,12 +1,11 @@
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
 
 export default function Index() {
   const router = useRouter();
-
-  useEffect(() => {
-    router.push('/cost_overview');
-  }, [router]);
+  router.push({
+    pathname: '/cost_overview',
+    query: router.query
+  });
 
   return <div></div>;
 }
diff --git a/frontend/providers/costcenter/src/pages/valuation/index.tsx b/frontend/providers/costcenter/src/pages/valuation/index.tsx
index f893a587e..47e7c544a 100644
--- a/frontend/providers/costcenter/src/pages/valuation/index.tsx
+++ b/frontend/providers/costcenter/src/pages/valuation/index.tsx
@@ -15,7 +15,7 @@ import OuterLink from '@/components/outerLink';
 import NotFound from '@/components/notFound';
 import PredictCard from '@/components/valuation/predictCard';
 import useEnvStore from '@/stores/env';
-import shellcoin from '@/assert/shell_coin.svg';
+import CurrencySymbol from '@/components/CurrencySymbol';
 type CardItem = {
   title: string;
   price: number[];
@@ -46,6 +46,7 @@ function Valuation() {
   const { t, i18n } = useTranslation();
   const cookie = getCookie('NEXT_LOCALE');
   const gpuEnabled = useEnvStore((state) => state.gpuEnabled);
+  const currency = useEnvStore((s) => s.currency);
   useEffect(() => {
     i18n.changeLanguage(cookie);
   }, [cookie, i18n]);
@@ -111,12 +112,14 @@ function Valuation() {
                     justifyContent="center"
                     alignContent={'center'}
                   >
-                    <Img src={shellcoin.src} h="28px" w="28px" my="auto" mr="4px" />
                     <Text>{item.price[0]}</Text>
                   </Heading>
-                  <Text ml="4px">
-                    {item.unit} / {t('Hour')}
-                  </Text>
+                  <Flex align={'center'}>
+                    <CurrencySymbol w="16px" type={currency} />
+                    <Text ml="4px">
+                      {item.unit} / {t('Hour')}
+                    </Text>
+                  </Flex>
                   <Box pt={'17px'}>
                     {CYCLE.map((_item, idx) => (
                       <Flex
@@ -128,8 +131,8 @@ function Valuation() {
                       >
                         <Box>{item.price[idx + 1]}</Box>
                         <Flex align={'center'}>
-                          <Img src={shellcoin.src} h="16px" w="16px" mr={'4px'} />
-                          <Text>{`${item.unit} / ${t(_item)}`}</Text>
+                          <CurrencySymbol w="16px" h="16px" type={currency} />
+                          <Text ml="4px">{`${item.unit} / ${t(_item)}`}</Text>
                         </Flex>
                       </Flex>
                     ))}
@@ -154,17 +157,14 @@ function Valuation() {
                         pt="12px"
                         px="24px"
                       >
-                        <Flex>
-                          <Img src={shellcoin.src} h="16px" w="16px" />
-                          <Text>{`${item.price}`}</Text>
-                        </Flex>
+                        <Text>{`${item.price}`}</Text>
                         <Stack align={'flex-end'} gap="0" fontSize={'10px'} fontWeight={'500'}>
                           <Flex>
                             <Img src={nvidaIcon.src} w="14px" h="14px" mr="6px" />
                             <Text minW={'max-content'}>{item.name}</Text>
                           </Flex>
                           <Flex>
-                            <Img src={shellcoin.src} h="16px" w="16px" />
+                            <CurrencySymbol type={currency} />
                             <Text>{`${gpuProps.unit} / ${t('Hour')}`}</Text>
                           </Flex>
                         </Stack>
diff --git a/frontend/providers/costcenter/src/service/enabled.ts b/frontend/providers/costcenter/src/service/enabled.ts
index 3bf8caf75..8693fd74f 100644
--- a/frontend/providers/costcenter/src/service/enabled.ts
+++ b/frontend/providers/costcenter/src/service/enabled.ts
@@ -8,4 +8,7 @@ export const enableInvoice = () =>
   !!process.env['ALI_SIGN_NAME'] &&
   !!process.env['ALI_TEMPLATE_CODE'] &&
   !!process.env['MONGODB_URI'];
-export const enabelGpu = () => !!process.env['GPU_ENABLED'];
+export const enableGpu = () => !!process.env['GPU_ENABLED'];
+export const enableWechat = () => process.env['WECHAT_ENABLED'] === 'true';
+export const enableStripe = () =>
+  process.env['STRIPE_ENABLED'] === 'true' && !!process.env['STRIPE_PUB'];
diff --git a/frontend/providers/costcenter/src/stores/env.ts b/frontend/providers/costcenter/src/stores/env.ts
index 5e837a026..47e76d4b8 100644
--- a/frontend/providers/costcenter/src/stores/env.ts
+++ b/frontend/providers/costcenter/src/stores/env.ts
@@ -1,30 +1,31 @@
-import { Stripe, loadStripe } from '@stripe/stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
 import { create } from 'zustand';
 type EnvState = {
   rechargeEnabled: boolean;
   transferEnabled: boolean;
   invoiceEnabled: boolean;
   gpuEnabled: boolean;
+  wechatEnabled: boolean;
+  stripeEnabled: boolean;
+  currency: 'shellCoin' | 'cny' | 'usd';
   stripePromise: ReturnType<typeof loadStripe>;
-  setRechargeEnabled: (enabled: boolean) => void;
-  setTransferEnabled: (enabled: boolean) => void;
-  setInvoiceEnabled: (enabled: boolean) => void;
-  setGpuEnabled: (enabled: boolean) => void;
   setStripe: (pub: string) => void;
+  setEnv: <T extends Exclude<keyof EnvState, 'setEnv' | 'setStripe' | 'stripePromise'>>(
+    key: T,
+    value: EnvState[T]
+  ) => void;
 };
 const useEnvStore = create<EnvState>((set, get) => ({
   rechargeEnabled: false,
   transferEnabled: false,
   invoiceEnabled: false,
+  wechatEnabled: false,
+  stripeEnabled: false,
   gpuEnabled: false,
+  currency: 'shellCoin',
   stripePromise: Promise.resolve(null),
-  setRechargeEnabled: (enabled: boolean) => set({ rechargeEnabled: enabled }),
-  setTransferEnabled: (enabled: boolean) => set({ transferEnabled: enabled }),
-  setInvoiceEnabled: (enabled: boolean) => set({ invoiceEnabled: enabled }),
-  setGpuEnabled(enabled) {
-    set({ gpuEnabled: enabled });
-  },
-  setStripe: (pub: string) => set({ stripePromise: loadStripe(pub) })
+  setStripe: (pub: string) => set({ stripePromise: loadStripe(pub) }),
+  setEnv: (k, v) => set({ [k]: v })
 }));
 
 export default useEnvStore;
diff --git a/frontend/providers/costcenter/src/types/env.ts b/frontend/providers/costcenter/src/types/env.ts
index ccfc12db7..fc1805e85 100644
--- a/frontend/providers/costcenter/src/types/env.ts
+++ b/frontend/providers/costcenter/src/types/env.ts
@@ -1,6 +1,9 @@
 export type EnvData = {
   rechargeEnabled: boolean;
   transferEnabled: boolean;
+  stripeEnabled: boolean;
+  wechatEnabled: boolean;
+  currency: 'shellCoin' | 'cny' | 'usd';
   invoiceEnabled: boolean;
   gpuEnabled: boolean;
   stripePub: string;
diff --git a/frontend/providers/template/next-i18next.config.js b/frontend/providers/template/next-i18next.config.js
index b39aac163..745f9f71e 100644
--- a/frontend/providers/template/next-i18next.config.js
+++ b/frontend/providers/template/next-i18next.config.js
@@ -7,6 +7,6 @@ module.exports = {
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'zh', 'zh-Hans'],
-    localeDetection: false,
-  },
-}
+    localeDetection: false
+  }
+};
diff --git a/frontend/providers/template/next.config.js b/frontend/providers/template/next.config.js
index 4d2553420..907c382a5 100644
--- a/frontend/providers/template/next.config.js
+++ b/frontend/providers/template/next.config.js
@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-const { i18n } = require('./next-i18next.config')
-const analyzer = process.env === 'production' ? [new BundleAnalyzerPlugin()] : []
-const path = require('path')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { i18n } = require('./next-i18next.config');
+const analyzer = process.env === 'production' ? [new BundleAnalyzerPlugin()] : [];
+const path = require('path');
 const nextConfig = {
   i18n,
   output: 'standalone',
@@ -15,14 +15,14 @@ const nextConfig = {
         issuer: /\.[jt]sx?$/,
         use: ['@svgr/webpack']
       }
-    ])
-    config.plugins = [...config.plugins, ...analyzer]
-    return config
+    ]);
+    config.plugins = [...config.plugins, ...analyzer];
+    return config;
   },
   experimental: {
     // this includes files from the monorepo base two directories up
     outputFileTracingRoot: path.join(__dirname, '../../')
   }
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/frontend/providers/template/src/components/LangSelect/index.tsx b/frontend/providers/template/src/components/LangSelect/index.tsx
index 838e8a2b4..3e1401a1d 100644
--- a/frontend/providers/template/src/components/LangSelect/index.tsx
+++ b/frontend/providers/template/src/components/LangSelect/index.tsx
@@ -9,7 +9,8 @@ const langIcon = (
     width="1em"
     height="1em"
     fill="currentColor"
-    aria-hidden="true">
+    aria-hidden="true"
+  >
     <path d="M0 0h24v24H0z" fill="none" />
     <path
       d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
@@ -46,7 +47,8 @@ const LangSelect: React.FC<MenuButtonProps> = (props) => {
             onClick={() => {
               setLangStore(key);
               i18n.changeLanguage(key);
-            }}>
+            }}
+          >
             <Text>{lang.label}</Text>
           </MenuItem>
         ))}
diff --git a/frontend/providers/template/src/pages/deploy/components/Form.tsx b/frontend/providers/template/src/pages/deploy/components/Form.tsx
index 7662480e7..e57d60e0b 100644
--- a/frontend/providers/template/src/pages/deploy/components/Form.tsx
+++ b/frontend/providers/template/src/pages/deploy/components/Form.tsx
@@ -62,7 +62,8 @@ const Form = ({
                     w="200px"
                     className="template-dynamic-label"
                     color={'#333'}
-                    userSelect={'none'}>
+                    userSelect={'none'}
+                  >
                     {item?.label}
                     {item?.required && (
                       <Text ml="2px" color={'#E53E3E'}>
@@ -92,14 +93,16 @@ const Form = ({
           alignItems="center"
           h={'160px'}
           w={'100%'}
-          flexDirection="column">
+          flexDirection="column"
+        >
           <Flex
             border={'1px dashed #9CA2A8'}
             borderRadius="50%"
             w={'48px'}
             h={'48px'}
             justifyContent="center"
-            alignItems={'center'}>
+            alignItems={'center'}
+          >
             <MyIcon color={'#7B838B'} name="empty"></MyIcon>
           </Flex>
           <Text mt={'12px'} fontSize={14} color={'#5A646E'}>
diff --git a/frontend/providers/template/src/pages/deploy/components/Header.tsx b/frontend/providers/template/src/pages/deploy/components/Header.tsx
index b2dfcacf4..9de87780a 100644
--- a/frontend/providers/template/src/pages/deploy/components/Header.tsx
+++ b/frontend/providers/template/src/pages/deploy/components/Header.tsx
@@ -50,7 +50,8 @@ const Header = ({
       h={'80px'}
       mt={'32px'}
       alignItems={'center'}
-      backgroundColor={'rgba(255, 255, 255, 0.90)'}>
+      backgroundColor={'rgba(255, 255, 255, 0.90)'}
+    >
       <Flex
         flexShrink={0}
         alignItems={'center'}
@@ -59,7 +60,8 @@ const Header = ({
         h={'80px'}
         borderRadius={'8px'}
         backgroundColor={'#fff'}
-        border={' 1px solid #DEE0E2'}>
+        border={' 1px solid #DEE0E2'}
+      >
         <Image src={templateDetail?.spec?.icon} alt="" width={'60px'} height={'60px'} />
       </Flex>
       <Flex ml={'24px'} w="520px" flexDirection={'column'}>
@@ -81,7 +83,8 @@ const Header = ({
           mt={'8px'}
           fontSize={'12px'}
           color={'5A646E'}
-          fontWeight={400}>
+          fontWeight={400}
+        >
           {templateDetail?.spec?.description}
         </Text>
       </Flex>
@@ -95,7 +98,8 @@ const Header = ({
         bg={'myWhite.600'}
         borderColor={'myGray.200'}
         variant={'base'}
-        onClick={handleExportYaml}>
+        onClick={handleExportYaml}
+      >
         {t('Export')} Yaml
       </Button>
       <Button px={4} minW={'140px'} h={'40px'} variant={'primary'} onClick={applyCb}>
diff --git a/frontend/providers/template/src/pages/deploy/components/ReadMe.tsx b/frontend/providers/template/src/pages/deploy/components/ReadMe.tsx
index 786ab0fcf..4e33b41cc 100644
--- a/frontend/providers/template/src/pages/deploy/components/ReadMe.tsx
+++ b/frontend/providers/template/src/pages/deploy/components/ReadMe.tsx
@@ -61,7 +61,8 @@ const ReadMe = ({ templateDetail }: { templateDetail: TemplateType }) => {
         borderBottom={'1px solid #DEE0E2'}
         color={'#24282C'}
         fontSize={'18px'}
-        fontWeight={500}>
+        fontWeight={500}
+      >
         <MyIcon name={'markdown'} mr={5} w={'24px'} h={'24px'} ml={'42px'} color={'myGray.500'} />
         README.md
       </Box>
@@ -69,7 +70,8 @@ const ReadMe = ({ templateDetail }: { templateDetail: TemplateType }) => {
         <ReactMarkdown
           linkTarget={'_blank'}
           rehypePlugins={[rehypeRaw, [rehypeRewrite, { rewrite: myRewrite }]]}
-          remarkPlugins={[remarkGfm, remarkUnwrapImages]}>
+          remarkPlugins={[remarkGfm, remarkUnwrapImages]}
+        >
           {templateReadMe}
         </ReactMarkdown>
       </Box>
diff --git a/frontend/providers/template/src/pages/deploy/components/Yaml.tsx b/frontend/providers/template/src/pages/deploy/components/Yaml.tsx
index 37de472bf..3de5c9f5f 100644
--- a/frontend/providers/template/src/pages/deploy/components/Yaml.tsx
+++ b/frontend/providers/template/src/pages/deploy/components/Yaml.tsx
@@ -25,7 +25,8 @@ const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: numbe
           overflow={'hidden'}
           border={theme.borders.base}
           borderRadius={'md'}
-          position={'relative'}>
+          position={'relative'}
+        >
           <Flex px={8} py={4} bg={'myWhite.400'}>
             <Box flex={1} fontSize={'xl'} color={'myGray.900'} fontWeight={'bold'}>
               {yamlList[selectedIndex].filename}
@@ -34,7 +35,8 @@ const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: numbe
               cursor={'pointer'}
               color={'myGray.600'}
               _hover={{ color: '#219BF4' }}
-              onClick={() => copyData(yamlList[selectedIndex].value)}>
+              onClick={() => copyData(yamlList[selectedIndex].value)}
+            >
               <MyIcon name="copy" w={'16px'} />
             </Box>
           </Flex>
diff --git a/frontend/providers/template/src/pages/deploy/index.tsx b/frontend/providers/template/src/pages/deploy/index.tsx
index dbe9b57eb..adb1c277f 100644
--- a/frontend/providers/template/src/pages/deploy/index.tsx
+++ b/frontend/providers/template/src/pages/deploy/index.tsx
@@ -250,7 +250,8 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) =>
           justifyContent={'start'}
           alignItems={'center'}
           backgroundColor={'rgba(255, 255, 255)'}
-          backdropBlur={'100px'}>
+          backdropBlur={'100px'}
+        >
           <Box cursor={'pointer'} onClick={() => router.push('/')}>
             <MyIcon ml={'46px'} name="arrowLeft" color={'#24282C'} w={'16px'} h={'16px'}></MyIcon>
           </Box>
@@ -259,7 +260,8 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) =>
             fontWeight={500}
             fontSize={16}
             textDecoration={'none'}
-            color={'#7B838B'}>
+            color={'#7B838B'}
+          >
             <BreadcrumbItem textDecoration={'none'}>
               <BreadcrumbLink _hover={{ color: '#219BF4', textDecoration: 'none' }} href="/">
                 {t('Template List')}
@@ -278,7 +280,8 @@ const EditApp = ({ appName, tabType }: { appName?: string; tabType: string }) =>
           flexDirection={'column'}
           width={'100%'}
           flexGrow={1}
-          backgroundColor={'rgba(255, 255, 255, 0.90)'}>
+          backgroundColor={'rgba(255, 255, 255, 0.90)'}
+        >
           <Header
             templateDetail={templateDetail}
             appName={''}
diff --git a/frontend/providers/template/src/pages/develop/components/BreadCrumbHeader.tsx b/frontend/providers/template/src/pages/develop/components/BreadCrumbHeader.tsx
index 79b889550..c8e3d9018 100644
--- a/frontend/providers/template/src/pages/develop/components/BreadCrumbHeader.tsx
+++ b/frontend/providers/template/src/pages/develop/components/BreadCrumbHeader.tsx
@@ -23,7 +23,8 @@ const BreadCrumbHeader = () => {
       justifyContent={'start'}
       alignItems={'center'}
       backgroundColor={'rgba(255, 255, 255)'}
-      backdropBlur={'100px'}>
+      backdropBlur={'100px'}
+    >
       <Box cursor={'pointer'} onClick={() => router.push('/')}>
         <MyIcon name="arrowLeft" color={'#24282C'} w={'16px'} h={'16px'}></MyIcon>
       </Box>
@@ -32,7 +33,8 @@ const BreadCrumbHeader = () => {
         fontWeight={500}
         fontSize={16}
         textDecoration={'none'}
-        color={'#7B838B'}>
+        color={'#7B838B'}
+      >
         <BreadcrumbItem textDecoration={'none'}>
           <BreadcrumbLink _hover={{ color: '#219BF4', textDecoration: 'none' }} href="/">
             {t('Template List')}
diff --git a/frontend/providers/template/src/pages/develop/components/Form.tsx b/frontend/providers/template/src/pages/develop/components/Form.tsx
index 65dc14856..efd6aff07 100644
--- a/frontend/providers/template/src/pages/develop/components/Form.tsx
+++ b/frontend/providers/template/src/pages/develop/components/Form.tsx
@@ -37,7 +37,8 @@ const Form = ({
                     w="200px"
                     className="template-dynamic-label"
                     color={'#333'}
-                    userSelect={'none'}>
+                    userSelect={'none'}
+                  >
                     {item?.label}
                     {item?.required && (
                       <Text ml="2px" color={'#E53E3E'}>
@@ -67,14 +68,16 @@ const Form = ({
           alignItems="center"
           h={'100%'}
           w={'100%'}
-          flexDirection="column">
+          flexDirection="column"
+        >
           <Flex
             border={'1px dashed #9CA2A8'}
             borderRadius="50%"
             w={'48px'}
             h={'48px'}
             justifyContent="center"
-            alignItems={'center'}>
+            alignItems={'center'}
+          >
             <MyIcon color={'#7B838B'} name="empty"></MyIcon>
           </Flex>
           <Text mt={'12px'} fontSize={14} color={'#5A646E'}>
diff --git a/frontend/providers/template/src/pages/develop/components/Header.tsx b/frontend/providers/template/src/pages/develop/components/Header.tsx
index 90bc3dfaa..682ea5e1a 100644
--- a/frontend/providers/template/src/pages/develop/components/Header.tsx
+++ b/frontend/providers/template/src/pages/develop/components/Header.tsx
@@ -26,7 +26,8 @@ const Header = () => {
         minW={'140px'}
         bg={'myWhite.600'}
         borderColor={'myGray.200'}
-        variant={'base'}>
+        variant={'base'}
+      >
         {t('Export')} Yaml
       </Button>
       <Button px={4} minW={'140px'} h={'40px'} variant={'primary'}>
diff --git a/frontend/providers/template/src/pages/develop/components/YamlList.tsx b/frontend/providers/template/src/pages/develop/components/YamlList.tsx
index 2a8d5aaf7..f970b80d1 100644
--- a/frontend/providers/template/src/pages/develop/components/YamlList.tsx
+++ b/frontend/providers/template/src/pages/develop/components/YamlList.tsx
@@ -21,7 +21,8 @@ const YamlList = ({ yamlList = [] }: { yamlList: YamlItemType[] }) => {
       alignItems={'start'}
       zIndex={1}
       position={'relative'}
-      overflow={'hidden'}>
+      overflow={'hidden'}
+    >
       <Box flexShrink={0} mt={3} borderRadius={'sm'} overflow={'hidden'} bg={'white'}>
         {yamlList.map((file, index) => (
           <Box
@@ -46,7 +47,8 @@ const YamlList = ({ yamlList = [] }: { yamlList: YamlItemType[] }) => {
                   borderColor: 'myGray.200',
                   backgroundColor: 'transparent'
                 })}
-            onClick={() => setSelectedIndex(index)}>
+            onClick={() => setSelectedIndex(index)}
+          >
             {file.filename}
           </Box>
         ))}
@@ -57,7 +59,8 @@ const YamlList = ({ yamlList = [] }: { yamlList: YamlItemType[] }) => {
           h="100%"
           className={styles.codeBox}
           flexDirection={'column'}
-          position={'relative'}>
+          position={'relative'}
+        >
           {/* <Flex px={8} py={4} bg={'myWhite.400'}>
             <Box flex={1} fontSize={'xl'} color={'myGray.900'} fontWeight={'bold'}>
               {yamlList[selectedIndex].filename}
diff --git a/frontend/providers/template/src/pages/develop/index.tsx b/frontend/providers/template/src/pages/develop/index.tsx
index 241b6e100..18a40b2cc 100644
--- a/frontend/providers/template/src/pages/develop/index.tsx
+++ b/frontend/providers/template/src/pages/develop/index.tsx
@@ -124,7 +124,8 @@ const Develop = () => {
         borderRadius={'8px'}
         overflowY={'hidden'}
         overflowX={'scroll'}
-        flex={1}>
+        flex={1}
+      >
         {/* left */}
         <Flex flexDirection={'column'} flex={'0 1 500px'} borderRight={'1px solid #EFF0F1'}>
           <Flex
@@ -134,7 +135,8 @@ const Develop = () => {
             alignItems={'center'}
             backgroundColor={'#F8FAFB'}
             px="36px"
-            borderRadius={'8px 8px 0px 0px '}>
+            borderRadius={'8px 8px 0px 0px '}
+          >
             <MyIcon name="dev" color={'#24282C'} w={'24px'} h={'24px'}></MyIcon>
             <Text fontWeight={'500'} fontSize={'16px'} color={'#24282C'} ml="8px">
               {t('develop.Development')}
@@ -162,7 +164,8 @@ const Develop = () => {
             alignItems={'center'}
             backgroundColor={'#F8FAFB'}
             pl="42px"
-            borderRadius={'8px 8px 0px 0px '}>
+            borderRadius={'8px 8px 0px 0px '}
+          >
             <MyIcon name="eyeShow" color={'#24282C'} w={'24px'} h={'24px'}></MyIcon>
             <Text fontWeight={'500'} fontSize={'16px'} color={'#24282C'} ml="8px">
               {t('develop.Preview')}
diff --git a/frontend/providers/template/src/pages/index.tsx b/frontend/providers/template/src/pages/index.tsx
index d24a6f038..900da4834 100644
--- a/frontend/providers/template/src/pages/index.tsx
+++ b/frontend/providers/template/src/pages/index.tsx
@@ -89,7 +89,8 @@ function Index() {
       height={'100%'}
       overflow={'auto'}
       backgroundColor={'#edeff0'}
-      position={'relative'}>
+      position={'relative'}
+    >
       <Flex justifyContent={'center'} flexDirection={'column'} alignItems={'center'} pt={'24px'}>
         <Text color={'24282C'} fontSize={'48px'} fontWeight={500}>
           {t('Templates')}
@@ -107,7 +108,8 @@ function Index() {
           top={'26px'}
           backgroundColor={'#FFF'}
           borderRadius={'40px'}
-          onClick={() => router.push('/develop')}>
+          onClick={() => router.push('/develop')}
+        >
           <MyIcon name="tool" fill={'transparent'} />
           <Text ml="8px" color={'#485058'} fontWeight={500} cursor={'pointer'} fontSize={'12px'}>
             {t('develop.YAML Detection Tool')}
@@ -122,7 +124,8 @@ function Index() {
               width="24"
               height="24"
               viewBox="0 0 24 24"
-              fill="none">
+              fill="none"
+            >
               <path
                 d="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.9473 18.6997 5.81278 16.9855 4.27664C15.2714 2.7405 13.0338 1.91951 10.7329 1.98247C8.43204 2.04543 6.24273 2.98756 4.61515 4.61514C2.98757 6.24272 2.04543 8.43203 1.98247 10.7329C1.91951 13.0338 2.74051 15.2714 4.27665 16.9855C5.81279 18.6997 7.94731 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5064 21.8481 21.617 21.7737 21.71 21.68C21.8902 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8902 20.4765 21.71 20.29ZM11 18C9.61553 18 8.26216 17.5895 7.11101 16.8203C5.95987 16.0511 5.06266 14.9579 4.53285 13.6788C4.00303 12.3997 3.86441 10.9922 4.13451 9.63436C4.4046 8.2765 5.07129 7.02922 6.05026 6.05025C7.02922 5.07128 8.2765 4.4046 9.63437 4.1345C10.9922 3.8644 12.3997 4.00303 13.6788 4.53284C14.9579 5.06265 16.0511 5.95986 16.8203 7.111C17.5895 8.26215 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9498 15.9497C14.637 17.2625 12.8565 18 11 18Z"
                 fill="#24282C"
@@ -144,7 +147,8 @@ function Index() {
           justifyContent={'center'}
           w={'100%'}
           gridTemplateColumns="repeat(auto-fit, minmax(328px, 328px))"
-          gridGap={'24px'}>
+          gridGap={'24px'}
+        >
           {filterData &&
             filterData?.map((item: TemplateType) => {
               return (
@@ -164,14 +168,16 @@ function Index() {
                   p={'24px'}
                   borderRadius={'6px'}
                   backgroundColor={'#fff'}
-                  border={'1px solid #DEE0E2'}>
+                  border={'1px solid #DEE0E2'}
+                >
                   <Box
                     p={'6px'}
                     w={'48px'}
                     h={'48px'}
                     borderRadius={'4px'}
                     backgroundColor={'#fff'}
-                    border={' 1px solid #DEE0E2'}>
+                    border={' 1px solid #DEE0E2'}
+                  >
                     <Image src={item?.spec?.icon} alt="" width={'36px'} height={'36px'} />
                   </Box>
                   <Flex mt={'12px'} alignItems={'center'} justifyContent="space-between">
@@ -187,7 +193,8 @@ function Index() {
                       h={'28px'}
                       borderRadius={'4px'}
                       border={'1px solid #DEE0E2'}
-                      backgroundColor={'#F4F6F8'}>
+                      backgroundColor={'#F4F6F8'}
+                    >
                       Deploy
                     </Flex>
                   </Flex>
@@ -203,7 +210,8 @@ function Index() {
                     mt={'8px'}
                     fontSize={'12px'}
                     color={'5A646E'}
-                    fontWeight={400}>
+                    fontWeight={400}
+                  >
                     {item?.spec?.description}
                   </Text>
                   <Flex mt={'auto'} justifyContent={'space-between'} alignItems={'center'}>
diff --git a/frontend/providers/template/tsconfig.json b/frontend/providers/template/tsconfig.json
index 0eef8192c..f2bc03096 100644
--- a/frontend/providers/template/tsconfig.json
+++ b/frontend/providers/template/tsconfig.json
@@ -1,21 +1,11 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
+  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"],
   "extends": "../../tsconfig.web.json"
-}
\ No newline at end of file
+}