diff --git a/web/default/src/components/ChannelsTable.js b/web/default/src/components/ChannelsTable.js
index 1d7f41b2..f4ff6eb2 100644
--- a/web/default/src/components/ChannelsTable.js
+++ b/web/default/src/components/ChannelsTable.js
@@ -435,7 +435,7 @@ const ChannelsTable = () => {
           点击下方详情按钮可以显示余额以及设置额外的测试模型。
         </Message>
       )}
-      <Table basic compact size='small'>
+      <Table basic={'very'} compact size='small'>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell
diff --git a/web/default/src/components/LogsTable.js b/web/default/src/components/LogsTable.js
index 1ae9fd6e..8cd16ff8 100644
--- a/web/default/src/components/LogsTable.js
+++ b/web/default/src/components/LogsTable.js
@@ -388,7 +388,7 @@ const LogsTable = () => {
             </>
           )}
         </Form>
-        <Table basic compact size='small'>
+        <Table basic={'very'} compact size='small'>
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell
diff --git a/web/default/src/components/RedemptionsTable.js b/web/default/src/components/RedemptionsTable.js
index dfd59685..ccea9ff3 100644
--- a/web/default/src/components/RedemptionsTable.js
+++ b/web/default/src/components/RedemptionsTable.js
@@ -1,29 +1,59 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Label, Popup, Pagination, Table } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Label,
+  Popup,
+  Pagination,
+  Table,
+} from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
-import { API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string } from '../helpers';
+import {
+  API,
+  copy,
+  showError,
+  showInfo,
+  showSuccess,
+  showWarning,
+  timestamp2string,
+} from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
 import { renderQuota } from '../helpers/render';
 
 function renderTimestamp(timestamp) {
-  return (
-    <>
-      {timestamp2string(timestamp)}
-    </>
-  );
+  return <>{timestamp2string(timestamp)}</>;
 }
 
 function renderStatus(status) {
   switch (status) {
     case 1:
-      return <Label basic color='green'>未使用</Label>;
+      return (
+        <Label basic color='green'>
+          未使用
+        </Label>
+      );
     case 2:
-      return <Label basic color='red'> 已禁用 </Label>;
+      return (
+        <Label basic color='red'>
+          {' '}
+          已禁用{' '}
+        </Label>
+      );
     case 3:
-      return <Label basic color='grey'> 已使用 </Label>;
+      return (
+        <Label basic color='grey'>
+          {' '}
+          已使用{' '}
+        </Label>
+      );
     default:
-      return <Label basic color='black'> 未知状态 </Label>;
+      return (
+        <Label basic color='black'>
+          {' '}
+          未知状态{' '}
+        </Label>
+      );
   }
 }
 
@@ -110,7 +140,9 @@ const RedemptionsTable = () => {
       return;
     }
     setSearching(true);
-    const res = await API.get(`/api/redemption/search?keyword=${searchKeyword}`);
+    const res = await API.get(
+      `/api/redemption/search?keyword=${searchKeyword}`
+    );
     const { success, message, data } = res.data;
     if (success) {
       setRedemptions(data);
@@ -159,7 +191,7 @@ const RedemptionsTable = () => {
         />
       </Form>
 
-      <Table basic compact size='small'>
+      <Table basic={'very'} compact size='small'>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell
@@ -225,11 +257,19 @@ const RedemptionsTable = () => {
               return (
                 <Table.Row key={redemption.id}>
                   <Table.Cell>{redemption.id}</Table.Cell>
-                  <Table.Cell>{redemption.name ? redemption.name : '无'}</Table.Cell>
+                  <Table.Cell>
+                    {redemption.name ? redemption.name : '无'}
+                  </Table.Cell>
                   <Table.Cell>{renderStatus(redemption.status)}</Table.Cell>
                   <Table.Cell>{renderQuota(redemption.quota)}</Table.Cell>
-                  <Table.Cell>{renderTimestamp(redemption.created_time)}</Table.Cell>
-                  <Table.Cell>{redemption.redeemed_time ? renderTimestamp(redemption.redeemed_time) : "尚未兑换"} </Table.Cell>
+                  <Table.Cell>
+                    {renderTimestamp(redemption.created_time)}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {redemption.redeemed_time
+                      ? renderTimestamp(redemption.redeemed_time)
+                      : '尚未兑换'}{' '}
+                  </Table.Cell>
                   <Table.Cell>
                     <div>
                       <Button
@@ -239,7 +279,9 @@ const RedemptionsTable = () => {
                           if (await copy(redemption.key)) {
                             showSuccess('已复制到剪贴板！');
                           } else {
-                            showWarning('无法复制到剪贴板，请手动复制，已将兑换码填入搜索框。')
+                            showWarning(
+                              '无法复制到剪贴板，请手动复制，已将兑换码填入搜索框。'
+                            );
                             setSearchKeyword(redemption.key);
                           }
                         }}
@@ -267,7 +309,7 @@ const RedemptionsTable = () => {
                       </Popup>
                       <Button
                         size={'small'}
-                        disabled={redemption.status === 3}  // used
+                        disabled={redemption.status === 3} // used
                         onClick={() => {
                           manageRedemption(
                             redemption.id,
@@ -295,7 +337,12 @@ const RedemptionsTable = () => {
         <Table.Footer>
           <Table.Row>
             <Table.HeaderCell colSpan='8'>
-              <Button size='small' as={Link} to='/redemption/add' loading={loading}>
+              <Button
+                size='small'
+                as={Link}
+                to='/redemption/add'
+                loading={loading}
+              >
                 添加新的兑换码
               </Button>
               <Pagination
diff --git a/web/default/src/components/TokensTable.js b/web/default/src/components/TokensTable.js
index 64f77845..4fee9773 100644
--- a/web/default/src/components/TokensTable.js
+++ b/web/default/src/components/TokensTable.js
@@ -1,7 +1,22 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Dropdown, Form, Label, Pagination, Popup, Table } from 'semantic-ui-react';
+import {
+  Button,
+  Dropdown,
+  Form,
+  Label,
+  Pagination,
+  Popup,
+  Table,
+} from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
-import { API, copy, showError, showSuccess, showWarning, timestamp2string } from '../helpers';
+import {
+  API,
+  copy,
+  showError,
+  showSuccess,
+  showWarning,
+  timestamp2string,
+} from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
 import { renderQuota } from '../helpers/render';
@@ -21,25 +36,45 @@ const OPEN_LINK_OPTIONS = [
 ];
 
 function renderTimestamp(timestamp) {
-  return (
-    <>
-      {timestamp2string(timestamp)}
-    </>
-  );
+  return <>{timestamp2string(timestamp)}</>;
 }
 
 function renderStatus(status) {
   switch (status) {
     case 1:
-      return <Label basic color='green'>已启用</Label>;
+      return (
+        <Label basic color='green'>
+          已启用
+        </Label>
+      );
     case 2:
-      return <Label basic color='red'> 已禁用 </Label>;
+      return (
+        <Label basic color='red'>
+          {' '}
+          已禁用{' '}
+        </Label>
+      );
     case 3:
-      return <Label basic color='yellow'> 已过期 </Label>;
+      return (
+        <Label basic color='yellow'>
+          {' '}
+          已过期{' '}
+        </Label>
+      );
     case 4:
-      return <Label basic color='grey'> 已耗尽 </Label>;
+      return (
+        <Label basic color='grey'>
+          {' '}
+          已耗尽{' '}
+        </Label>
+      );
     default:
-      return <Label basic color='black'> 未知状态 </Label>;
+      return (
+        <Label basic color='black'>
+          {' '}
+          未知状态{' '}
+        </Label>
+      );
   }
 }
 
@@ -98,9 +133,10 @@ const TokensTable = () => {
     let encodedServerAddress = encodeURIComponent(serverAddress);
     const nextLink = localStorage.getItem('chat_link');
     let nextUrl;
-  
+
     if (nextLink) {
-      nextUrl = nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+      nextUrl =
+        nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
     } else {
       nextUrl = `https://app.nextchat.dev/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
     }
@@ -117,7 +153,9 @@ const TokensTable = () => {
         url = nextUrl;
         break;
       case 'lobechat':
-        url = nextLink + `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
+        url =
+          nextLink +
+          `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
         break;
       default:
         url = `sk-${key}`;
@@ -135,7 +173,7 @@ const TokensTable = () => {
     let serverAddress = '';
     if (status) {
       status = JSON.parse(status);
-      serverAddress = status.server_address; 
+      serverAddress = status.server_address;
     }
     if (serverAddress === '') {
       serverAddress = window.location.origin;
@@ -143,9 +181,10 @@ const TokensTable = () => {
     let encodedServerAddress = encodeURIComponent(serverAddress);
     const chatLink = localStorage.getItem('chat_link');
     let defaultUrl;
-  
+
     if (chatLink) {
-      defaultUrl = chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+      defaultUrl =
+        chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
     } else {
       defaultUrl = `https://app.nextchat.dev/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
     }
@@ -154,21 +193,23 @@ const TokensTable = () => {
       case 'ama':
         url = `ama://set-api-key?server=${encodedServerAddress}&key=sk-${key}`;
         break;
-  
+
       case 'opencat':
         url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
         break;
 
       case 'lobechat':
-        url = chatLink + `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
+        url =
+          chatLink +
+          `/?settings={"keyVaults":{"openai":{"apiKey":"sk-${key}","baseURL":"${serverAddress}/v1"}}}`;
         break;
 
       default:
         url = defaultUrl;
     }
-  
+
     window.open(url, '_blank');
-  }
+  };
 
   useEffect(() => {
     loadTokens(0, orderBy)
@@ -274,7 +315,7 @@ const TokensTable = () => {
         />
       </Form>
 
-      <Table basic compact size='small'>
+      <Table basic={'very'} compact size='small'>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell
@@ -342,12 +383,20 @@ const TokensTable = () => {
                   <Table.Cell>{token.name ? token.name : '无'}</Table.Cell>
                   <Table.Cell>{renderStatus(token.status)}</Table.Cell>
                   <Table.Cell>{renderQuota(token.used_quota)}</Table.Cell>
-                  <Table.Cell>{token.unlimited_quota ? '无限制' : renderQuota(token.remain_quota, 2)}</Table.Cell>
+                  <Table.Cell>
+                    {token.unlimited_quota
+                      ? '无限制'
+                      : renderQuota(token.remain_quota, 2)}
+                  </Table.Cell>
                   <Table.Cell>{renderTimestamp(token.created_time)}</Table.Cell>
-                  <Table.Cell>{token.expired_time === -1 ? '永不过期' : renderTimestamp(token.expired_time)}</Table.Cell>
+                  <Table.Cell>
+                    {token.expired_time === -1
+                      ? '永不过期'
+                      : renderTimestamp(token.expired_time)}
+                  </Table.Cell>
                   <Table.Cell>
                     <div>
-                    <Button.Group color='green' size={'small'}>
+                      <Button.Group color='green' size={'small'}>
                         <Button
                           size={'small'}
                           positive
@@ -360,38 +409,37 @@ const TokensTable = () => {
                         <Dropdown
                           className='button icon'
                           floating
-                          options={COPY_OPTIONS.map(option => ({
+                          options={COPY_OPTIONS.map((option) => ({
                             ...option,
                             onClick: async () => {
                               await onCopy(option.value, token.key);
-                            }
+                            },
                           }))}
                           trigger={<></>}
                         />
-                      </Button.Group>
-                      {' '}
+                      </Button.Group>{' '}
                       <Button.Group color='blue' size={'small'}>
                         <Button
-                            size={'small'}
-                            positive
-                            onClick={() => {     
-                              onOpenLink('', token.key);       
-                            }}>
-                            聊天
-                          </Button>
-                          <Dropdown   
-                            className="button icon"       
-                            floating
-                            options={OPEN_LINK_OPTIONS.map(option => ({
-                              ...option,
-                              onClick: async () => {
-                                await onOpenLink(option.value, token.key);
-                              }
-                            }))}       
-                            trigger={<></>}   
-                          />
-                      </Button.Group>
-                      {' '}
+                          size={'small'}
+                          positive
+                          onClick={() => {
+                            onOpenLink('', token.key);
+                          }}
+                        >
+                          聊天
+                        </Button>
+                        <Dropdown
+                          className='button icon'
+                          floating
+                          options={OPEN_LINK_OPTIONS.map((option) => ({
+                            ...option,
+                            onClick: async () => {
+                              await onOpenLink(option.value, token.key);
+                            },
+                          }))}
+                          trigger={<></>}
+                        />
+                      </Button.Group>{' '}
                       <Popup
                         trigger={
                           <Button size='small' negative>
@@ -443,14 +491,24 @@ const TokensTable = () => {
               <Button size='small' as={Link} to='/token/add' loading={loading}>
                 添加新的令牌
               </Button>
-              <Button size='small' onClick={refresh} loading={loading}>刷新</Button>
+              <Button size='small' onClick={refresh} loading={loading}>
+                刷新
+              </Button>
               <Dropdown
                 placeholder='排序方式'
                 selection
                 options={[
                   { key: '', text: '默认排序', value: '' },
-                  { key: 'remain_quota', text: '按剩余额度排序', value: 'remain_quota' },
-                  { key: 'used_quota', text: '按已用额度排序', value: 'used_quota' },
+                  {
+                    key: 'remain_quota',
+                    text: '按剩余额度排序',
+                    value: 'remain_quota',
+                  },
+                  {
+                    key: 'used_quota',
+                    text: '按已用额度排序',
+                    value: 'used_quota',
+                  },
                 ]}
                 value={orderBy}
                 onChange={handleOrderByChange}
diff --git a/web/default/src/components/UsersTable.js b/web/default/src/components/UsersTable.js
index 9de2a1a3..2e08b715 100644
--- a/web/default/src/components/UsersTable.js
+++ b/web/default/src/components/UsersTable.js
@@ -1,10 +1,23 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Label, Pagination, Popup, Table, Dropdown } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Label,
+  Pagination,
+  Popup,
+  Table,
+  Dropdown,
+} from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { API, showError, showSuccess } from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
-import { renderGroup, renderNumber, renderQuota, renderText } from '../helpers/render';
+import {
+  renderGroup,
+  renderNumber,
+  renderQuota,
+  renderText,
+} from '../helpers/render';
 
 function renderRole(role) {
   switch (role) {
@@ -66,7 +79,7 @@ const UsersTable = () => {
     (async () => {
       const res = await API.post('/api/user/manage', {
         username,
-        action
+        action,
       });
       const { success, message } = res.data;
       if (success) {
@@ -169,7 +182,7 @@ const UsersTable = () => {
         />
       </Form>
 
-      <Table basic compact size='small'>
+      <Table basic={'very'} compact size='small'>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell
@@ -239,7 +252,9 @@ const UsersTable = () => {
                     <Popup
                       content={user.email ? user.email : '未绑定邮箱地址'}
                       key={user.username}
-                      header={user.display_name ? user.display_name : user.username}
+                      header={
+                        user.display_name ? user.display_name : user.username
+                      }
                       trigger={<span>{renderText(user.username, 15)}</span>}
                       hoverable
                     />
@@ -249,9 +264,22 @@ const UsersTable = () => {
                   {/*  {user.email ? <Popup hoverable content={user.email} trigger={<span>{renderText(user.email, 24)}</span>} /> : '无'}*/}
                   {/*</Table.Cell>*/}
                   <Table.Cell>
-                    <Popup content='剩余额度' trigger={<Label basic>{renderQuota(user.quota)}</Label>} />
-                    <Popup content='已用额度' trigger={<Label basic>{renderQuota(user.used_quota)}</Label>} />
-                    <Popup content='请求次数' trigger={<Label basic>{renderNumber(user.request_count)}</Label>} />
+                    <Popup
+                      content='剩余额度'
+                      trigger={<Label basic>{renderQuota(user.quota)}</Label>}
+                    />
+                    <Popup
+                      content='已用额度'
+                      trigger={
+                        <Label basic>{renderQuota(user.used_quota)}</Label>
+                      }
+                    />
+                    <Popup
+                      content='请求次数'
+                      trigger={
+                        <Label basic>{renderNumber(user.request_count)}</Label>
+                      }
+                    />
                   </Table.Cell>
                   <Table.Cell>{renderRole(user.role)}</Table.Cell>
                   <Table.Cell>{renderStatus(user.status)}</Table.Cell>
@@ -279,7 +307,11 @@ const UsersTable = () => {
                       </Button>
                       <Popup
                         trigger={
-                          <Button size='small' negative disabled={user.role === 100}>
+                          <Button
+                            size='small'
+                            negative
+                            disabled={user.role === 100}
+                          >
                             删除
                           </Button>
                         }
@@ -335,8 +367,16 @@ const UsersTable = () => {
                 options={[
                   { key: '', text: '默认排序', value: '' },
                   { key: 'quota', text: '按剩余额度排序', value: 'quota' },
-                  { key: 'used_quota', text: '按已用额度排序', value: 'used_quota' },
-                  { key: 'request_count', text: '按请求次数排序', value: 'request_count' },
+                  {
+                    key: 'used_quota',
+                    text: '按已用额度排序',
+                    value: 'used_quota',
+                  },
+                  {
+                    key: 'request_count',
+                    text: '按请求次数排序',
+                    value: 'request_count',
+                  },
                 ]}
                 value={orderBy}
                 onChange={handleOrderByChange}