diff --git a/web/default/src/pages/Channel/EditChannel.js b/web/default/src/pages/Channel/EditChannel.js
index a0cb757e..906a674d 100644
--- a/web/default/src/pages/Channel/EditChannel.js
+++ b/web/default/src/pages/Channel/EditChannel.js
@@ -280,8 +280,8 @@ const EditChannel = () => {
             {inputs.type === 3 && (
               <>
                 <Message>
-                  注意，<strong>模型部署名称必须和模型名称保持一致</strong>，因为
-                  One API 会把请求体中的 model
+                  注意，<strong>模型部署名称必须和模型名称保持一致</strong>
+                  ，因为 One API 会把请求体中的 model
                   参数替换为你的部署名称（模型名称中的点会被剔除），
                   <a
                     target='_blank'
@@ -686,7 +686,11 @@ const EditChannel = () => {
               </Form.Field>
             )}
             <Button onClick={handleCancel}>取消</Button>
-            <Button type={isEdit ? 'button' : 'submit'} positive onClick={submit}>
+            <Button
+              type={isEdit ? 'button' : 'submit'}
+              positive
+              onClick={submit}
+            >
               提交
             </Button>
           </Form>
diff --git a/web/default/src/pages/Redemption/EditRedemption.js b/web/default/src/pages/Redemption/EditRedemption.js
index 7a33f770..e0801830 100644
--- a/web/default/src/pages/Redemption/EditRedemption.js
+++ b/web/default/src/pages/Redemption/EditRedemption.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { Button, Form, Card } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { API, downloadTextAsFile, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
@@ -13,7 +13,7 @@ const EditRedemption = () => {
   const originInputs = {
     name: '',
     quota: 100000,
-    count: 1
+    count: 1,
   };
   const [inputs, setInputs] = useState(originInputs);
   const { name, quota, count } = inputs;
@@ -21,7 +21,7 @@ const EditRedemption = () => {
   const handleCancel = () => {
     navigate('/redemption');
   };
-  
+
   const handleInputChange = (e, { name, value }) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
@@ -49,10 +49,13 @@ const EditRedemption = () => {
     localInputs.quota = parseInt(localInputs.quota);
     let res;
     if (isEdit) {
-      res = await API.put(`/api/redemption/`, { ...localInputs, id: parseInt(redemptionId) });
+      res = await API.put(`/api/redemption/`, {
+        ...localInputs,
+        id: parseInt(redemptionId),
+      });
     } else {
       res = await API.post(`/api/redemption/`, {
-        ...localInputs
+        ...localInputs,
       });
     }
     const { success, message, data } = res.data;
@@ -67,61 +70,67 @@ const EditRedemption = () => {
       showError(message);
     }
     if (!isEdit && data) {
-      let text = "";
+      let text = '';
       for (let i = 0; i < data.length; i++) {
-        text += data[i] + "\n";
+        text += data[i] + '\n';
       }
       downloadTextAsFile(text, `${inputs.name}.txt`);
     }
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Header>
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Input
-              label='名称'
-              name='name'
-              placeholder={'请输入名称'}
-              onChange={handleInputChange}
-              value={name}
-              autoComplete='new-password'
-              required={!isEdit}
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label={`额度${renderQuotaWithPrompt(quota)}`}
-              name='quota'
-              placeholder={'请输入单个兑换码中包含的额度'}
-              onChange={handleInputChange}
-              value={quota}
-              autoComplete='new-password'
-              type='number'
-            />
-          </Form.Field>
-          {
-            !isEdit && <>
-              <Form.Field>
-                <Form.Input
-                  label='生成数量'
-                  name='count'
-                  placeholder={'请输入生成数量'}
-                  onChange={handleInputChange}
-                  value={count}
-                  autoComplete='new-password'
-                  type='number'
-                />
-              </Form.Field>
-            </>
-          }
-          <Button positive onClick={submit}>提交</Button>
-          <Button onClick={handleCancel}>取消</Button>
-        </Form>
-      </Segment>
-    </>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>
+            {isEdit ? '更新兑换码信息' : '创建新的兑换码'}
+          </Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
+            <Form.Field>
+              <Form.Input
+                label='名称'
+                name='name'
+                placeholder={'请输入名称'}
+                onChange={handleInputChange}
+                value={name}
+                autoComplete='new-password'
+                required={!isEdit}
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label={`额度${renderQuotaWithPrompt(quota)}`}
+                name='quota'
+                placeholder={'请输入单个兑换码中包含的额度'}
+                onChange={handleInputChange}
+                value={quota}
+                autoComplete='new-password'
+                type='number'
+              />
+            </Form.Field>
+            {!isEdit && (
+              <>
+                <Form.Field>
+                  <Form.Input
+                    label='生成数量'
+                    name='count'
+                    placeholder={'请输入生成数量'}
+                    onChange={handleInputChange}
+                    value={count}
+                    autoComplete='new-password'
+                    type='number'
+                  />
+                </Form.Field>
+              </>
+            )}
+            <Button positive onClick={submit}>
+              提交
+            </Button>
+            <Button onClick={handleCancel}>取消</Button>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/default/src/pages/Token/EditToken.js b/web/default/src/pages/Token/EditToken.js
index 2e70a0b8..3e7517f8 100644
--- a/web/default/src/pages/Token/EditToken.js
+++ b/web/default/src/pages/Token/EditToken.js
@@ -1,5 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Message, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Header,
+  Message,
+  Segment,
+  Card,
+} from 'semantic-ui-react';
 import { useNavigate, useParams } from 'react-router-dom';
 import {
   API,
@@ -130,138 +137,142 @@ const EditToken = () => {
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Header>
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Input
-              label='名称'
-              name='name'
-              placeholder={'请输入名称'}
-              onChange={handleInputChange}
-              value={name}
-              autoComplete='new-password'
-              required={!isEdit}
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Dropdown
-              label='模型范围'
-              placeholder={'请选择允许使用的模型，留空则不进行限制'}
-              name='models'
-              fluid
-              multiple
-              search
-              onLabelClick={(e, { value }) => {
-                copy(value).then();
-              }}
-              selection
-              onChange={handleInputChange}
-              value={inputs.models}
-              autoComplete='new-password'
-              options={modelOptions}
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='IP 限制'
-              name='subnet'
-              placeholder={
-                '请输入允许访问的网段，例如：192.168.0.0/24，请使用英文逗号分隔多个网段'
-              }
-              onChange={handleInputChange}
-              value={inputs.subnet}
-              autoComplete='new-password'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='过期时间'
-              name='expired_time'
-              placeholder={
-                '请输入过期时间，格式为 yyyy-MM-dd HH:mm:ss，-1 表示无限制'
-              }
-              onChange={handleInputChange}
-              value={expired_time}
-              autoComplete='new-password'
-              type='datetime-local'
-            />
-          </Form.Field>
-          <div style={{ lineHeight: '40px' }}>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>
+            {isEdit ? '更新令牌信息' : '创建新的令牌'}
+          </Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
+            <Form.Field>
+              <Form.Input
+                label='名称'
+                name='name'
+                placeholder={'请输入名称'}
+                onChange={handleInputChange}
+                value={name}
+                autoComplete='new-password'
+                required={!isEdit}
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Dropdown
+                label='模型范围'
+                placeholder={'请选择允许使用的模型，留空则不进行限制'}
+                name='models'
+                fluid
+                multiple
+                search
+                onLabelClick={(e, { value }) => {
+                  copy(value).then();
+                }}
+                selection
+                onChange={handleInputChange}
+                value={inputs.models}
+                autoComplete='new-password'
+                options={modelOptions}
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='IP 限制'
+                name='subnet'
+                placeholder={
+                  '请输入允许访问的网段，例如：192.168.0.0/24，请使用英文逗号分隔多个网段'
+                }
+                onChange={handleInputChange}
+                value={inputs.subnet}
+                autoComplete='new-password'
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='过期时间'
+                name='expired_time'
+                placeholder={
+                  '请输入过期时间，格式为 yyyy-MM-dd HH:mm:ss，-1 表示无限制'
+                }
+                onChange={handleInputChange}
+                value={expired_time}
+                autoComplete='new-password'
+                type='datetime-local'
+              />
+            </Form.Field>
+            <div style={{ lineHeight: '40px' }}>
+              <Button
+                type={'button'}
+                onClick={() => {
+                  setExpiredTime(0, 0, 0, 0);
+                }}
+              >
+                永不过期
+              </Button>
+              <Button
+                type={'button'}
+                onClick={() => {
+                  setExpiredTime(1, 0, 0, 0);
+                }}
+              >
+                一个月后过期
+              </Button>
+              <Button
+                type={'button'}
+                onClick={() => {
+                  setExpiredTime(0, 1, 0, 0);
+                }}
+              >
+                一天后过期
+              </Button>
+              <Button
+                type={'button'}
+                onClick={() => {
+                  setExpiredTime(0, 0, 1, 0);
+                }}
+              >
+                一小时后过期
+              </Button>
+              <Button
+                type={'button'}
+                onClick={() => {
+                  setExpiredTime(0, 0, 0, 1);
+                }}
+              >
+                一分钟后过期
+              </Button>
+            </div>
+            <Message>
+              注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。
+            </Message>
+            <Form.Field>
+              <Form.Input
+                label={`额度${renderQuotaWithPrompt(remain_quota)}`}
+                name='remain_quota'
+                placeholder={'请输入额度'}
+                onChange={handleInputChange}
+                value={remain_quota}
+                autoComplete='new-password'
+                type='number'
+                disabled={unlimited_quota}
+              />
+            </Form.Field>
             <Button
               type={'button'}
               onClick={() => {
-                setExpiredTime(0, 0, 0, 0);
+                setUnlimitedQuota();
               }}
             >
-              永不过期
+              {unlimited_quota ? '取消无限额度' : '设为无限额度'}
             </Button>
-            <Button
-              type={'button'}
-              onClick={() => {
-                setExpiredTime(1, 0, 0, 0);
-              }}
-            >
-              一个月后过期
+            <Button floated='right' positive onClick={submit}>
+              提交
             </Button>
-            <Button
-              type={'button'}
-              onClick={() => {
-                setExpiredTime(0, 1, 0, 0);
-              }}
-            >
-              一天后过期
+            <Button floated='right' onClick={handleCancel}>
+              取消
             </Button>
-            <Button
-              type={'button'}
-              onClick={() => {
-                setExpiredTime(0, 0, 1, 0);
-              }}
-            >
-              一小时后过期
-            </Button>
-            <Button
-              type={'button'}
-              onClick={() => {
-                setExpiredTime(0, 0, 0, 1);
-              }}
-            >
-              一分钟后过期
-            </Button>
-          </div>
-          <Message>
-            注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。
-          </Message>
-          <Form.Field>
-            <Form.Input
-              label={`额度${renderQuotaWithPrompt(remain_quota)}`}
-              name='remain_quota'
-              placeholder={'请输入额度'}
-              onChange={handleInputChange}
-              value={remain_quota}
-              autoComplete='new-password'
-              type='number'
-              disabled={unlimited_quota}
-            />
-          </Form.Field>
-          <Button
-            type={'button'}
-            onClick={() => {
-              setUnlimitedQuota();
-            }}
-          >
-            {unlimited_quota ? '取消无限额度' : '设为无限额度'}
-          </Button>
-          <Button floated='right' positive onClick={submit}>
-            提交
-          </Button>
-          <Button floated='right' onClick={handleCancel}>
-            取消
-          </Button>
-        </Form>
-      </Segment>
-    </>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/default/src/pages/User/EditUser.js b/web/default/src/pages/User/EditUser.js
index 8ae0e556..f256b68e 100644
--- a/web/default/src/pages/User/EditUser.js
+++ b/web/default/src/pages/User/EditUser.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
+import { Button, Form, Card } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { API, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
@@ -16,30 +16,40 @@ const EditUser = () => {
     wechat_id: '',
     email: '',
     quota: 0,
-    group: 'default'
+    group: 'default',
   });
   const [groupOptions, setGroupOptions] = useState([]);
-  const { username, display_name, password, github_id, wechat_id, email, quota, group } =
-    inputs;
+  const {
+    username,
+    display_name,
+    password,
+    github_id,
+    wechat_id,
+    email,
+    quota,
+    group,
+  } = inputs;
   const handleInputChange = (e, { name, value }) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
   const fetchGroups = async () => {
     try {
       let res = await API.get(`/api/group/`);
-      setGroupOptions(res.data.data.map((group) => ({
-        key: group,
-        text: group,
-        value: group,
-      })));
+      setGroupOptions(
+        res.data.data.map((group) => ({
+          key: group,
+          text: group,
+          value: group,
+        }))
+      );
     } catch (error) {
       showError(error.message);
     }
   };
   const navigate = useNavigate();
   const handleCancel = () => {
-    navigate("/setting");
-  }
+    navigate('/setting');
+  };
   const loadUser = async () => {
     let res = undefined;
     if (userId) {
@@ -83,107 +93,113 @@ const EditUser = () => {
   };
 
   return (
-    <>
-      <Segment loading={loading}>
-        <Header as='h3'>更新用户信息</Header>
-        <Form autoComplete='new-password'>
-          <Form.Field>
-            <Form.Input
-              label='用户名'
-              name='username'
-              placeholder={'请输入新的用户名'}
-              onChange={handleInputChange}
-              value={username}
-              autoComplete='new-password'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='密码'
-              name='password'
-              type={'password'}
-              placeholder={'请输入新的密码，最短 8 位'}
-              onChange={handleInputChange}
-              value={password}
-              autoComplete='new-password'
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='显示名称'
-              name='display_name'
-              placeholder={'请输入新的显示名称'}
-              onChange={handleInputChange}
-              value={display_name}
-              autoComplete='new-password'
-            />
-          </Form.Field>
-          {
-            userId && <>
-              <Form.Field>
-                <Form.Dropdown
-                  label='分组'
-                  placeholder={'请选择分组'}
-                  name='group'
-                  fluid
-                  search
-                  selection
-                  allowAdditions
-                  additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
-                  onChange={handleInputChange}
-                  value={inputs.group}
-                  autoComplete='new-password'
-                  options={groupOptions}
-                />
-              </Form.Field>
-              <Form.Field>
-                <Form.Input
-                  label={`剩余额度${renderQuotaWithPrompt(quota)}`}
-                  name='quota'
-                  placeholder={'请输入新的剩余额度'}
-                  onChange={handleInputChange}
-                  value={quota}
-                  type={'number'}
-                  autoComplete='new-password'
-                />
-              </Form.Field>
-            </>
-          }
-          <Form.Field>
-            <Form.Input
-              label='已绑定的 GitHub 账户'
-              name='github_id'
-              value={github_id}
-              autoComplete='new-password'
-              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-              readOnly
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='已绑定的微信账户'
-              name='wechat_id'
-              value={wechat_id}
-              autoComplete='new-password'
-              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-              readOnly
-            />
-          </Form.Field>
-          <Form.Field>
-            <Form.Input
-              label='已绑定的邮箱账户'
-              name='email'
-              value={email}
-              autoComplete='new-password'
-              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
-              readOnly
-            />
-          </Form.Field>
-          <Button onClick={handleCancel}>取消</Button>
-          <Button positive onClick={submit}>提交</Button>
-        </Form>
-      </Segment>
-    </>
+    <div className='dashboard-container'>
+      <Card fluid className='chart-card'>
+        <Card.Content>
+          <Card.Header className='header'>更新用户信息</Card.Header>
+          <Form loading={loading} autoComplete='new-password'>
+            <Form.Field>
+              <Form.Input
+                label='用户名'
+                name='username'
+                placeholder={'请输入新的用户名'}
+                onChange={handleInputChange}
+                value={username}
+                autoComplete='new-password'
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='密码'
+                name='password'
+                type={'password'}
+                placeholder={'请输入新的密码，最短 8 位'}
+                onChange={handleInputChange}
+                value={password}
+                autoComplete='new-password'
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='显示名称'
+                name='display_name'
+                placeholder={'请输入新的显示名称'}
+                onChange={handleInputChange}
+                value={display_name}
+                autoComplete='new-password'
+              />
+            </Form.Field>
+            {userId && (
+              <>
+                <Form.Field>
+                  <Form.Dropdown
+                    label='分组'
+                    placeholder={'请选择分组'}
+                    name='group'
+                    fluid
+                    search
+                    selection
+                    allowAdditions
+                    additionLabel={
+                      '请在系统设置页面编辑分组倍率以添加新的分组：'
+                    }
+                    onChange={handleInputChange}
+                    value={inputs.group}
+                    autoComplete='new-password'
+                    options={groupOptions}
+                  />
+                </Form.Field>
+                <Form.Field>
+                  <Form.Input
+                    label={`剩余额度${renderQuotaWithPrompt(quota)}`}
+                    name='quota'
+                    placeholder={'请输入新的剩余额度'}
+                    onChange={handleInputChange}
+                    value={quota}
+                    type={'number'}
+                    autoComplete='new-password'
+                  />
+                </Form.Field>
+              </>
+            )}
+            <Form.Field>
+              <Form.Input
+                label='已绑定的 GitHub 账户'
+                name='github_id'
+                value={github_id}
+                autoComplete='new-password'
+                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                readOnly
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='已绑定的微信账户'
+                name='wechat_id'
+                value={wechat_id}
+                autoComplete='new-password'
+                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                readOnly
+              />
+            </Form.Field>
+            <Form.Field>
+              <Form.Input
+                label='已绑定的邮箱账户'
+                name='email'
+                value={email}
+                autoComplete='new-password'
+                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                readOnly
+              />
+            </Form.Field>
+            <Button onClick={handleCancel}>取消</Button>
+            <Button positive onClick={submit}>
+              提交
+            </Button>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
   );
 };