diff --git a/src/App.vue b/src/App.vue
index df071bc..055d4ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,33 +42,21 @@
                 </a-doption>
               </template>
             </a-dropdown>
-            <a-dropdown
-              @select="handlerUserDropDown"
+            <a-button
+              type="text"
+              style="padding: 0; color: unset"
+              @click="showUserInfo"
             >
-              <a-button
-                type="text"
-                style="padding: 0; color: unset"
+              <a-badge
+                status="success"
+                dot
+                :count="1"
+                v-if="user.username"
               >
-                <a-badge
-                  status="success"
-                  dot
-                  :count="1"
-                  v-if="user.username"
-                >
-                  <icon-user />
-                </a-badge>
-                <icon-user v-else />
-              </a-button>
-              <template #content>
-                <a-doption
-                  v-for="item in userDropDown"
-                  :key="item.value"
-                  :value="item.value"
-                >
-                  {{ item.name }}
-                </a-doption>
-              </template>
-            </a-dropdown>
+                <icon-user />
+              </a-badge>
+              <icon-user v-else />
+            </a-button>
           </a-space>
         </a-layout-header>
         <a-layout-content>
@@ -83,18 +71,207 @@
         </a-layout-footer>
       </a-layout>
     </a-spin>
+    <a-modal
+      :visible="userInfoVisible"
+      :footer="false"
+      :esc-to-close="true"
+      modal-class="user-info-modal"
+      :unmount-on-close="true"
+      @cancel="hideUserInfo"
+    >
+      <template #title>
+        <div style="width: 100%; text-align: left">
+          {{ $t('UserInfo') }}
+        </div>
+      </template>
+      <div class="user-info-wd-100">
+        <div
+          class="user-info-wd-100"
+          style="display: flex; justify-content: space-around; align-items: center"
+        >
+          <div class="arco-statistic">
+            <div class="arco-statistic-title">
+              <a-space :size="4">
+                <div>
+                  {{ $t('Username') }}
+                </div>
+                <a-button
+                  type="text"
+                  style="margin: 0; padding: 0"
+                  @click="doLogout"
+                >
+                  {{ $t('Logout') }}
+                </a-button>
+              </a-space>
+            </div>
+            <div class="arco-statistic-content">
+              <div class="arco-statistic-value">
+                <span class="arco-statistic-value-integer">
+                  {{ user.nick_name ? user.nick_name : '- -' }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div>
+            <a-statistic
+              :value="walletBalance"
+              :precision="4"
+            >
+              <template #title>
+                <a-space :size="4">
+                  <span>{{ $t('Balance') }}</span>
+                  <a-button
+                    v-if="walletConfig.is_enabled"
+                    @click="showCharge"
+                    type="text"
+                    status="success"
+                    style="margin: 0; padding: 0"
+                  >
+                    {{ $t('Charge') }}
+                  </a-button>
+                  <a-button
+                    @click="loadWalletBalance"
+                    type="text"
+                    style="margin: 0; padding: 0"
+                  >
+                    {{ $t('Refresh') }}
+                  </a-button>
+                </a-space>
+              </template>
+              <template #suffix>
+                {{ walletConfig.unit }}
+              </template>
+            </a-statistic>
+          </div>
+        </div>
+        <a-divider style="margin: 32px 0">
+          <div style="color: var(--color-neutral-6)">
+            {{ $t('ChatHistory') }}
+          </div>
+        </a-divider>
+        <a-table
+          :loading="logLoading"
+          :columns="logColumns"
+          :data="chatLogs"
+          :pagination="chatLogPage"
+          @page-change="handlePageChange"
+          @page-size-change="handlerPageSizeChange"
+          page-position="bottom"
+          :virtual-list-props="{height: tableHeight}"
+        >
+          <template #created_at="{ record }">
+            <div style="word-break: break-word">
+              {{ record.created_at }}
+            </div>
+          </template>
+          <template #model_name="{ record }">
+            <div style="word-break: break-word">
+              {{ record.model_name }}
+            </div>
+          </template>
+          <template #tokens="{ record }">
+            {{ record.prompt_tokens + record.completion_tokens }}
+          </template>
+          <template #price="{ record }">
+            {{
+              (
+                (
+                  record.prompt_tokens * record.prompt_token_unit_price / 1000
+                  + record.completion_tokens * record.completion_token_unit_price / 1000
+                )
+              ).toFixed(4)
+            }}
+          </template>
+        </a-table>
+      </div>
+    </a-modal>
+    <a-modal
+      v-model:visible="chargeVisible"
+      :footer="false"
+      :esc-to-close="true"
+      modal-class="charge-modal"
+      :unmount-on-close="true"
+    >
+      <template #title>
+        <div style="width: 100%; text-align: left;">
+          {{ $t('Charge') }}
+        </div>
+      </template>
+      <div
+        v-if="chargeImage"
+        style="display: flex; width: 100%; align-items: center; justify-content: center; flex-direction: column"
+      >
+        <div style="display: flex; align-items: center; justify-content: center">
+          <icon-wechatpay style="color: rgb(var(--green-6)); margin-right: 8px" />
+          {{ $t('WeChatScan') }}
+        </div>
+        <a-image
+          :src="'data:image/png;base64,' + chargeImage"
+          width="200px"
+          height="200px"
+          fit="contain"
+        />
+        <a-button
+          @click="showUserInfo"
+          status="success"
+          type="primary"
+        >
+          {{ $t('FinishCharge') }}
+        </a-button>
+      </div>
+      <a-form
+        v-else
+        :auto-label-width="true"
+        @submit="getChargeImage"
+      >
+        <a-form-item :label="$t('Amount')">
+          <a-input-number
+            v-model="chargeAmount"
+            :min="1"
+            :precision="0"
+            :hide-button="true"
+            :disabled="chargeLoading"
+          >
+            <template #append>
+              {{ walletConfig.unit }}
+            </template>
+          </a-input-number>
+        </a-form-item>
+        <a-form-item>
+          <a-space>
+            <a-button
+              @click="chargeVisible = false"
+              :loading="chargeLoading"
+            >
+              {{ $t('Cancel') }}
+            </a-button>
+            <a-button
+              type="primary"
+              html-type="submit"
+              :loading="chargeLoading"
+            >
+              {{ $t('Charge') }}
+            </a-button>
+          </a-space>
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </a-config-provider>
 </template>
 
 <script setup>
-import {computed, onMounted, ref} from 'vue';
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import {useStore} from 'vuex';
 import {locale, langOption, changeLangAndReload} from './locale';
 import {useI18n} from 'vue-i18n';
 import {useRoute, useRouter} from 'vue-router';
 import Aegis from 'aegis-web-sdk';
-import {signOutAPI} from './api/user';
 import {getRUMConfigAPI} from './api/trace';
+import {getMyWalletAPI, getPreChargeAPI, getWalletConfigAPI} from '@/api/wallet';
+import {getChatLogs} from '@/api/chat';
+import {handleLoading} from '@/utils/loading';
+import {Message} from '@arco-design/web-vue';
+import {signOutAPI} from '@/api/user';
 
 // display
 const fullScreen = ref(true);
@@ -140,22 +317,129 @@ onMounted(() => {
 
 // user
 const user = computed(() => store.state.user);
-const userDropDown = computed(() => {
-  if (user.value.username) {
-    return [
-      {
-        name: `${i18n.t('Logout')} (${user.value.nick_name})`,
-        value: 'logout',
+const userInfoVisible = computed(() => store.state.userInfoVisible);
+const showUserInfo = () => {
+  chargeVisible.value = false;
+  store.commit('setUserInfoVisible', true);
+};
+const hideUserInfo = () => {
+  store.commit('setUserInfoVisible', false);
+};
+const doLogout = () => {
+  signOutAPI().then(
+      () => window.location.reload(),
+      (err) => Message.error(err.response.data.message),
+  );
+};
+
+// wallet
+const walletBalance = ref(0);
+const loadWalletBalance = () => {
+  getMyWalletAPI().then((res) => walletBalance.value = res.data.balance);
+};
+watch(() => store.state.userInfoVisible, () => {
+  if (store.state.userInfoVisible) {
+    loadWalletBalance();
+  }
+});
+const walletConfig = ref({is_enabled: false, unit: ''});
+const loadWalletConfig = () => {
+  getWalletConfigAPI().then(
+      (res) => walletConfig.value = res.data,
+      (err) => Message.error(err.response.data.message),
+  );
+};
+onMounted(() => loadWalletConfig());
+const chargeVisible = ref(false);
+const showCharge = () => {
+  hideUserInfo();
+  chargeVisible.value = true;
+};
+const chargeLoading = ref(false);
+const chargeAmount = ref(1);
+const chargeImage = ref('');
+const getChargeImage = () => {
+  handleLoading(chargeLoading, true);
+  getPreChargeAPI(chargeAmount.value).then(
+      (res) => {
+        chargeImage.value = res.data;
       },
-    ];
+      (err) => Message.error(err.response.data.message),
+  ).finally(() => handleLoading(chargeLoading, false));
+};
+watch(() => chargeVisible.value, () => {
+  if (!chargeVisible.value) {
+    chargeAmount.value = 1;
+    chargeImage.value = '';
   }
-  return [];
 });
-const handlerUserDropDown = (key) => {
-  if (key === 'logout') {
-    signOutAPI().finally(() => window.location.reload());
+
+// chat log
+const logLoading = ref(false);
+const chatLogs = ref([]);
+const logColumns = ref(
+    [
+      {
+        title: i18n.t('RequestTime'),
+        slotName: 'created_at',
+      },
+      {
+        title: i18n.t('ModelName'),
+        slotName: 'model_name',
+      },
+      {
+        title: i18n.t('Tokens'),
+        slotName: 'tokens',
+      },
+      {
+        title: i18n.t('Price'),
+        slotName: 'price',
+      },
+    ],
+);
+const chatLogPage = ref({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+  simple: true,
+  showTotal: true,
+});
+const loadChatLog = () => {
+  handleLoading(logLoading, true);
+  getChatLogs({page: chatLogPage.value.current, size: chatLogPage.value.pageSize}).then(
+      (res) => {
+        chatLogs.value = res.data.results;
+        chatLogPage.value.total = res.data.total;
+      },
+      (err) => Message.error(err.response.data.message),
+  ).finally(() => handleLoading(logLoading, false));
+};
+const handlePageChange = (page) => {
+  chatLogPage.value.current = page;
+  loadChatLog();
+};
+const handlerPageSizeChange = (size) => {
+  chatLogPage.value.current = 1;
+  chatLogPage.value.pageSize = size;
+  loadChatLog();
+};
+watch(() => store.state.userInfoVisible, () => {
+  if (store.state.userInfoVisible) {
+    handlePageChange(1);
   }
+});
+onMounted(() => loadChatLog());
+const tableHeight = ref('200px');
+const doTableResize = (_) => {
+  tableHeight.value = `${Math.min(window.innerHeight - 330, 200)}px`;
 };
+onMounted(() => {
+  doTableResize(null);
+  window.addEventListener('resize', doTableResize);
+});
+onUnmounted(() => {
+  window.removeEventListener('resize', doTableResize);
+});
 
 // aegis
 const initRUM = () => {
@@ -242,4 +526,20 @@ onMounted(() => initRUM());
   color: var(--color-text-1);
   margin-top: 20px;
 }
+
+.user-info-wd-100 {
+  width: 100%;
+}
+
+.user-info-modal,
+.charge-modal {
+  max-width: calc(100vw - 40px);
+  max-height: calc(100 * var(--vh) - 40px);
+}
+
+.user-info-modal .arco-statistic-content .arco-statistic-value-decimal,
+.user-info-modal .arco-statistic-content .arco-statistic-value-integer{
+  font-size: 24px!important;
+  font-weight: unset!important;
+}
 </style>
diff --git a/src/api/chat.js b/src/api/chat.js
index 71fffc1..da9387d 100644
--- a/src/api/chat.js
+++ b/src/api/chat.js
@@ -6,3 +6,10 @@ export const preCheckAPI = (data) => new Promise((resolve, reject) => {
       (err) => reject(err),
   );
 });
+
+export const getChatLogs = (params) => new Promise((resolve, reject) => {
+  http.get('/chat/logs/', {params}).then(
+      (res) => resolve(res),
+      (err) => reject(err),
+  );
+});
diff --git a/src/api/model.js b/src/api/model.js
index 6fdabf4..5caea76 100644
--- a/src/api/model.js
+++ b/src/api/model.js
@@ -7,13 +7,6 @@ export const listModelsAPI = () => new Promise((resolve, reject) => {
   );
 });
 
-export const checkModelPermissionAPI = (model) => new Promise((resolve, reject) => {
-  http.get(`/models/check/?model=${model}`).then(
-      (res) => resolve(res),
-      (err) => reject(err),
-  );
-});
-
 export const listSystemPresetAPI = () => new Promise((resolve, reject) => {
   http.get('/system_presets/').then(
       (res) => resolve(res),
diff --git a/src/api/wallet.js b/src/api/wallet.js
new file mode 100644
index 0000000..df60b80
--- /dev/null
+++ b/src/api/wallet.js
@@ -0,0 +1,22 @@
+import http from './index';
+
+export const getMyWalletAPI = () => new Promise((resolve, reject) => {
+  http.get('/wallets/mine/').then(
+      (res) => resolve(res),
+      (err) => reject(err),
+  );
+});
+
+export const getWalletConfigAPI = () => new Promise((resolve, reject) => {
+  http.get('/wallets/config/').then(
+      (res) => resolve(res),
+      (err) => reject(err),
+  );
+});
+
+export const getPreChargeAPI = (amount) => new Promise((resolve, reject) => {
+  http.post('/wallets/pre_charge/', {amount}).then(
+      (res) => resolve(res),
+      (err) => reject(err),
+  );
+});
diff --git a/src/components/ChatInput.vue b/src/components/ChatInput.vue
index a0f5401..050c455 100644
--- a/src/components/ChatInput.vue
+++ b/src/components/ChatInput.vue
@@ -122,6 +122,9 @@ const doChat = async () => {
       }, (err) => {
         emits('setChatLoading', false);
         Message.error(err.response.data.message);
+        if (err.response.status === 403) {
+          store.commit('setUserInfoVisible', true);
+        }
       });
   if (!key) {
     return;
diff --git a/src/locale/en-us.js b/src/locale/en-us.js
index adea444..001286c 100644
--- a/src/locale/en-us.js
+++ b/src/locale/en-us.js
@@ -35,6 +35,22 @@ const mEnUS = {
   Tools: 'Tools',
   ToolUseTips: 'Some models do not support tool, if the output does not meet expectations, please switch models',
   PleaseChooseTool: 'Please choose tool',
+  UserInfo: 'User Info',
+  Username: 'Usernsme',
+  Balance: 'Balance',
+  ModelName: 'Model',
+  PromptTokens: 'Prompt Tokens',
+  CompletionTokens: 'Completion Tokens',
+  Price: 'Price',
+  RequestTime: 'Time',
+  ChatHistory: 'Chat History',
+  Charge: 'Charge',
+  Refresh: 'Refresh',
+  Amount: 'Amount',
+  Cancel: 'Cancel',
+  WeChatScan: 'Use WeChat to Scan',
+  FinishCharge: 'Pay Success',
+  Tokens: 'Tokens',
 };
 
 export default mEnUS;
diff --git a/src/locale/zh-cn.js b/src/locale/zh-cn.js
index 5f3e9fd..e95acbd 100644
--- a/src/locale/zh-cn.js
+++ b/src/locale/zh-cn.js
@@ -35,6 +35,22 @@ const mZhCN = {
   Tools: '插件',
   ToolUseTips: '部分模型不支持插件，如果输出不符合预期，请切换模型',
   PleaseChooseTool: '请选择插件',
+  UserInfo: '用户信息',
+  Username: '用户名',
+  Balance: '余额',
+  ModelName: '模型',
+  PromptTokens: '提示令牌数',
+  CompletionTokens: '响应令牌数',
+  Price: '计费',
+  RequestTime: '请求时间',
+  ChatHistory: '历史计费',
+  Charge: '充值',
+  Refresh: '刷新',
+  Amount: '金额',
+  Cancel: '取消',
+  WeChatScan: '微信扫码',
+  FinishCharge: '完成支付',
+  Tokens: '令牌数',
 };
 
 export default mZhCN;
diff --git a/src/store/index.js b/src/store/index.js
index d44bcaf..9e6407d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,7 +1,6 @@
 import {createStore} from 'vuex';
-import {getUserInfoAPI} from '../api/user';
-import {listModelsAPI} from '../api/model';
-import router from '../router';
+import {getUserInfoAPI} from '@/api/user';
+import {listModelsAPI} from '@/api/model';
 
 const store = createStore({
   state() {
@@ -14,6 +13,7 @@ const store = createStore({
         last_login: '',
         user_type: '',
       },
+      userInfoVisible: false,
       userProperties: {
         avatar: null,
         phone_number: null,
@@ -25,6 +25,9 @@ const store = createStore({
     };
   },
   mutations: {
+    setUserInfoVisible(state, payload) {
+      state.userInfoVisible = payload;
+    },
     setMainLoading(state, payload) {
       state.mainLoading = payload;
     },
@@ -42,9 +45,6 @@ const store = createStore({
     },
     setModels(state, payload) {
       state.models = payload;
-      if (!payload.length) {
-        router.push({name: 'PermissionDenied'});
-      }
     },
     setCurrentModel(state, payload) {
       state.currentModel = payload;