diff --git a/.env b/.env
index c5d1ca7..59e61ef 100644
--- a/.env
+++ b/.env
@@ -1 +1 @@
-VITE_API_URL=http://192.168.1.36:9527
\ No newline at end of file
+VITE_API_URL=http://192.168.1.36:9528
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
index c9aea52..f19b662 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,6 +12,10 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    IIcBaselineArrowForwardIos: typeof import('~icons/ic/baseline-arrow-forward-ios')['default']
+    IIcBaselineDataSaverOff: typeof import('~icons/ic/baseline-data-saver-off')['default']
+    IIcBaselineDownloading: typeof import('~icons/ic/baseline-downloading')['default']
+    IIcRoundArrowForwardIos: typeof import('~icons/ic/round-arrow-forward-ios')['default']
     IonApp: typeof import('@ionic/vue')['IonApp']
     IonAvatar: typeof import('@ionic/vue')['IonAvatar']
     IonBackButton: typeof import('@ionic/vue')['IonBackButton']
@@ -25,8 +29,12 @@ declare module 'vue' {
     IonContent: typeof import('@ionic/vue')['IonContent']
     IonHeader: typeof import('@ionic/vue')['IonHeader']
     IonIcon: typeof import('@ionic/vue')['IonIcon']
+    IonImg: typeof import('@ionic/vue')['IonImg']
     IonInputOtp: typeof import('@ionic/vue')['IonInputOtp']
+    IonItem: typeof import('@ionic/vue')['IonItem']
     IonLabel: typeof import('@ionic/vue')['IonLabel']
+    IonList: typeof import('@ionic/vue')['IonList']
+    IonModal: typeof import('@ionic/vue')['IonModal']
     IonPage: typeof import('@ionic/vue')['IonPage']
     IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
     IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
@@ -47,6 +55,10 @@ declare module 'vue' {
 
 // For TSX support
 declare global {
+  const IIcBaselineArrowForwardIos: typeof import('~icons/ic/baseline-arrow-forward-ios')['default']
+  const IIcBaselineDataSaverOff: typeof import('~icons/ic/baseline-data-saver-off')['default']
+  const IIcBaselineDownloading: typeof import('~icons/ic/baseline-downloading')['default']
+  const IIcRoundArrowForwardIos: typeof import('~icons/ic/round-arrow-forward-ios')['default']
   const IonApp: typeof import('@ionic/vue')['IonApp']
   const IonAvatar: typeof import('@ionic/vue')['IonAvatar']
   const IonBackButton: typeof import('@ionic/vue')['IonBackButton']
@@ -60,8 +72,12 @@ declare global {
   const IonContent: typeof import('@ionic/vue')['IonContent']
   const IonHeader: typeof import('@ionic/vue')['IonHeader']
   const IonIcon: typeof import('@ionic/vue')['IonIcon']
+  const IonImg: typeof import('@ionic/vue')['IonImg']
   const IonInputOtp: typeof import('@ionic/vue')['IonInputOtp']
+  const IonItem: typeof import('@ionic/vue')['IonItem']
   const IonLabel: typeof import('@ionic/vue')['IonLabel']
+  const IonList: typeof import('@ionic/vue')['IonList']
+  const IonModal: typeof import('@ionic/vue')['IonModal']
   const IonPage: typeof import('@ionic/vue')['IonPage']
   const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
   const IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
diff --git a/src/locales/index.ts b/src/locales/index.ts
index c1819c5..fa6b03d 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -5,6 +5,7 @@ import zhCN from "./zh-CN.json";
 export type MessageSchema = typeof enUS;
 
 const i18n = createI18n<MessageSchema, "en-US" | "zh-CN">({
+  legacy: false,
   locale: "en-US",
   fallbackLocale: "en-US",
   messages: {
diff --git a/src/views/user/components/recharge-channel.vue b/src/views/user/components/recharge-channel.vue
new file mode 100644
index 0000000..e43ec2d
--- /dev/null
+++ b/src/views/user/components/recharge-channel.vue
@@ -0,0 +1,36 @@
+<script lang='ts' setup>
+import IcBaselineDataUsage from "~icons/ic/baseline-data-usage";
+import IcBaselineDownloading from "~icons/ic/baseline-downloading";
+</script>
+
+<template>
+  <div class="w-full h-200px p-20px flex justify-center flex-col gap-30px">
+    <div class="flex items-center gap-10px">
+      <i-ic-baseline-downloading class="text-2xl" />
+      <ion-label class="flex-1">
+        <h2>Chain recharge</h2>
+        <p class="w-80% text-sm">
+          Transfer crypto from on-chain wallet or exchange.
+        </p>
+      </ion-label>
+      <i-ic-round-arrow-forward-ios class="ml-auto color-text-400" />
+    </div>
+
+    <div class="flex items-center gap-10px">
+      <i-ic-baseline-data-saver-off class="text-2xl" />
+      <ion-label class="flex-1">
+        <h2>Fiat currency</h2>
+        <p class="w-80% text-sm">
+          Transfer fiat currency through bank or other financial institutions.
+        </p>
+      </ion-label>
+      <i-ic-round-arrow-forward-ios class="ml-auto color-text-400" />
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped>
+.list {
+  --background: transparent;
+}
+</style>
diff --git a/src/views/user/components/wallet-card.vue b/src/views/user/components/wallet-card.vue
index c39ad39..cbb38ad 100644
--- a/src/views/user/components/wallet-card.vue
+++ b/src/views/user/components/wallet-card.vue
@@ -1,11 +1,17 @@
 <script lang='ts' setup>
+import { modalController } from "@ionic/vue";
 import { client } from "@/api";
+import RechargeChannel from "./recharge-channel.vue";
 
 const { t } = useI18n();
 const { data } = await client.api.asset.balances.get();
 </script>
 
 <template>
+  <ion-modal class="recharge-channel-modal" trigger="open-modal" :initial-breakpoint="1" :breakpoints="[0]">
+    <RechargeChannel />
+  </ion-modal>
+
   <div class="mt-20px">
     <div class="grid grid-cols-2 gap-20px p-20px bg-[var(--ion-card-background)] rounded-t-6px">
       <div v-for="item in data" :key="item.assetCode" class="flex flex-col gap-4px">
@@ -20,9 +26,10 @@ const { data } = await client.api.asset.balances.get();
 
     <div class="px-10px pb-20px bg-[var(--ion-card-background)] rounded-b-6px">
       <ion-buttons class="gap-10px" expand="block">
-        <ion-button expand="block" fill="clear">
+        <ion-button id="open-modal" expand="block" fill="clear">
           {{ t("wallet.recharge") }}
         </ion-button>
+
         <ion-button expand="block" fill="clear">
           {{ t("wallet.withdraw") }}
         </ion-button>
@@ -31,4 +38,8 @@ const { data } = await client.api.asset.balances.get();
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.recharge-channel-modal {
+  --height: auto;
+}
+</style>