diff --git a/web/src/components/ChannelsTable.js b/web/src/components/ChannelsTable.js
index 84f7c96b..93bfc6f2 100644
--- a/web/src/components/ChannelsTable.js
+++ b/web/src/components/ChannelsTable.js
@@ -34,7 +34,7 @@ function renderBalance(type, balance) {
     case 4: // CloseAI
       return <span style={{ color: 'var(--czl-primary-color-hover)' }}>¥{balance.toFixed(2)}</span>;
     case 8: // 自定义
-      return <span style={{ color: 'var(--czl-primary-color-pressed)' }}>${balance.toFixed(2)}</span>;
+      return <span style={{ color: 'var(--czl-success-color)' }}>${balance.toFixed(2)}</span>;
     case 5: // OpenAI-SB
       return <span style={{ color: 'var(--czl-primary-color-suppl)' }}>¥{(balance / 10000).toFixed(2)}</span>;
     case 10: // AI Proxy
@@ -457,7 +457,15 @@ const ChannelsTable = () => {
                 sortChannel('used_quota');
               }}
             >
-              本月已用额度
+              本月
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortChannel('used_quota');
+              }}
+            >
+              总共
             </Table.HeaderCell>
             <Table.HeaderCell
               style={{ cursor: 'pointer' }}
@@ -507,23 +515,22 @@ const ChannelsTable = () => {
                   <Table.Cell>
                     <Popup
                       content={channel.base_url}
-                      trigger={<span>{truncateString(channel.base_url.replace(/^https?:\/\//, ''), 20)}</span>}
+                      trigger={<span>{truncateString(channel.base_url.replace(/^https?:\/\//, ''), 10)}</span>}
                       basic
                     />
                   </Table.Cell>
                   <Table.Cell>
                     <Popup
                       content={channel.models}
-                      trigger={<span>{truncateString(channel.models, 20)}</span>}
+                      trigger={<span>{truncateString(channel.models, 10)}</span>}
                       basic
                     />
                   </Table.Cell>
                   <Table.Cell>
-                    <Popup
-                      trigger={<span>${monthlyQuotas[channel.id]}</span>}
-                      content={`总: ${formatUsedQuota(channel.used_quota)}`}
-                      basic
-                    />
+                  <Label basic style={{ color: 'var(--czl-blue-500)',border:'1px solid var(--czl-blue-500)' }}>${monthlyQuotas[channel.id]}</Label>
+                  </Table.Cell>
+                  <Table.Cell>
+                    <Label basic style={{ color: 'var(--czl-blue-800)',border:'1px solid var(--czl-blue-800)' }}>{formatUsedQuota(channel.used_quota)}</Label>
                   </Table.Cell>
                   <Table.Cell>
                     <Popup
@@ -614,7 +621,7 @@ const ChannelsTable = () => {
 
         <Table.Footer>
           <Table.Row>
-            <Table.HeaderCell colSpan='12'>
+            <Table.HeaderCell colSpan='13'>
               <Button size='small' as={Link} to='/channel/add' loading={loading}>
                 添加新的渠道
               </Button>
diff --git a/web/src/components/TokensTable.js b/web/src/components/TokensTable.js
index 3df7f967..375beb5e 100644
--- a/web/src/components/TokensTable.js
+++ b/web/src/components/TokensTable.js
@@ -21,7 +21,7 @@ function renderTimestamp(timestamp) {
 function renderStatus(status) {
   switch (status) {
     case 1:
-      return <Label basic style={{ color: 'var(--czl-success-color)' }}>已启用</Label>;
+      return <Label basic style={{ color: 'var(--czl-blue-500)' }}>已启用</Label>;
     case 2:
       return <Label basic style={{ color: 'var(--czl-error-color)' }}> 已禁用 </Label>;
     case 3:
diff --git a/web/src/index.css b/web/src/index.css
index 921d4082..7fa4d18a 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,4 +1,15 @@
 :root {
+    --czl-blue-50: #f1f9fe;
+    --czl-blue-100: #e2f2fc;
+    --czl-blue-200: #bfe3f8;
+    --czl-blue-300: #87cef2;
+    --czl-blue-400: #48b5e8;
+    --czl-blue-500: #2ea7e0;
+    --czl-blue-600: #127db7;
+    --czl-blue-700: #106494;
+    --czl-blue-800: #11557b;
+    --czl-blue-900: #144766;
+    --czl-blue-950: #0d2d44;
     --toastify-color-light: var(--czl-main) !important;
     --toastify-color-dark: var(--czl-main-dark) !important;
     --toastify-color-info: var(--czl-info-color) !important;
@@ -229,7 +240,7 @@ code {
 }
 
 .active-menu-item {
-    background-color: var(--czl-grayD) !important;
+    background-color: var(--czl-blue-950) !important;
     color: white !important;
     border-radius: 16px !important;
     padding: 10px 16px !important;
diff --git a/web/src/pages/TopUp/index.js b/web/src/pages/TopUp/index.js
index 2b5f5684..b2098b38 100644
--- a/web/src/pages/TopUp/index.js
+++ b/web/src/pages/TopUp/index.js
@@ -90,7 +90,7 @@ const TopUp = () => {
               icon='shop'
               labelPosition='left'
               content='获取兑换码'
-              style={{ backgroundColor: 'var(--czl-primary-color)' }}
+              style={{ backgroundColor: 'var(--czl-blue-700)' }}
               onClick={openTopUpLink}
             />
             <Button
@@ -98,7 +98,7 @@ const TopUp = () => {
               icon='exchange'
               labelPosition='left'
               content={isSubmitting ? '兑换中...' : '兑换'}
-              style={{ backgroundColor: 'var(--czl-success-color)' }}
+              style={{ backgroundColor: '#FFFFFF00',color: 'var(--czl-blue-700)',border: '1px solid var(--czl-blue-200)' }}
               onClick={topUp}
               disabled={isSubmitting}
             />
@@ -108,8 +108,8 @@ const TopUp = () => {
         <Grid.Column>
           <Statistic.Group widths='one'>
             <Statistic>
-              <Statistic.Value style={{ color: 'var(--czl-error-color)' }}>{renderQuota(userQuota)}</Statistic.Value>
-              <Statistic.Label style={{ color: 'var(--czl-error-color)' }}>剩余额度</Statistic.Label>
+              <Statistic.Value style={{ color: 'var(--czl-blue-800)' }}>{renderQuota(userQuota)}</Statistic.Value>
+              <Statistic.Label style={{ color: 'var(--czl-blue-800)' }}>剩余额度</Statistic.Label>
             </Statistic>
           </Statistic.Group>
         </Grid.Column>