diff --git a/spug_api/apps/setting/urls.py b/spug_api/apps/setting/urls.py
index 577d5a3..6597022 100644
--- a/spug_api/apps/setting/urls.py
+++ b/spug_api/apps/setting/urls.py
@@ -13,5 +13,6 @@ urlpatterns = [
     url(r'^email_test/$', email_test),
     url(r'^mfa/$', MFAView.as_view()),
     url(r'^about/$', get_about),
-    url(r'^balance/$', get_push_balance),
+    url(r'^push/bind/$', handle_push_bind),
+    url(r'^push/balance/$', handle_push_balance),
 ]
diff --git a/spug_api/apps/setting/utils.py b/spug_api/apps/setting/utils.py
index 9ecac7e..28b72c1 100644
--- a/spug_api/apps/setting/utils.py
+++ b/spug_api/apps/setting/utils.py
@@ -31,6 +31,10 @@ class AppSetting:
         else:
             raise KeyError('invalid key')
 
+    @classmethod
+    def delete(cls, key):
+        Setting.objects.filter(key=key).delete()
+
     @classmethod
     def get_ssh_key(cls):
         public_key = cls.get_default('public_key')
diff --git a/spug_api/apps/setting/views.py b/spug_api/apps/setting/views.py
index 8eb66d9..9297906 100644
--- a/spug_api/apps/setting/views.py
+++ b/spug_api/apps/setting/views.py
@@ -21,7 +21,10 @@ class SettingView(AdminView):
     def get(self, request):
         response = deepcopy(KEYS_DEFAULT)
         for item in Setting.objects.all():
-            response[item.key] = item.real_val
+            if item.key == 'spug_push_key':
+                response[item.key] = f'{item.real_val[:8]}********{item.real_val[-8:]}'
+            else:
+                response[item.key] = item.real_val
         return json_response(response)
 
     def post(self, request):
@@ -126,7 +129,27 @@ def get_about(request):
 
 
 @auth('admin')
-def get_push_balance(request):
+def handle_push_bind(request):
+    form, error = JsonParser(
+        Argument('spug_push_key', required=False),
+    ).parse(request.body)
+    if error is None:
+        if not form.spug_push_key:
+            AppSetting.delete('spug_push_key')
+            return json_response()
+
+        try:
+            res = get_balance(form.spug_push_key)
+        except Exception as e:
+            return json_response(error=f'绑定失败：{e}')
+
+        AppSetting.set('spug_push_key', form.spug_push_key)
+        return json_response(res)
+    return json_response(error=error)
+
+
+@auth('admin')
+def handle_push_balance(request):
     token = AppSetting.get_default('spug_push_key')
     if not token:
         return json_response(error='请先配置推送服务绑定账户')
diff --git a/spug_web/src/pages/system/setting/PushSetting.js b/spug_web/src/pages/system/setting/PushSetting.js
index aa4fb08..585bf18 100644
--- a/spug_web/src/pages/system/setting/PushSetting.js
+++ b/spug_web/src/pages/system/setting/PushSetting.js
@@ -14,17 +14,18 @@ import store from './store';
 export default observer(function () {
   const [loading, setLoading] = useState(false);
   const [fetching, setFetching] = useState(false);
-  const [balance, setBalance] = useState({})
+  const [balance, setBalance] = useState({});
+  const [pushKey, setPushKey] = useState(store.settings.spug_push_key);
 
   useEffect(() => {
-    if (store.settings.spug_push_key) {
+    if (pushKey) {
       fetchBalance()
     }
   }, []);
 
   function fetchBalance() {
     setFetching(true)
-    http.get('/api/setting/balance/')
+    http.get('/api/setting/push/balance/')
       .then(res => setBalance(res))
       .finally(() => {
         setLoading(false)
@@ -33,19 +34,31 @@ export default observer(function () {
   }
 
   function handleBind() {
-    const spug_push_key = store.settings.spug_push_key
-    if (!spug_push_key) return message.error('请输入要绑定的推送助手用户ID')
+    if (!pushKey) return message.error('请输入要绑定的推送助手用户ID')
     setLoading(true);
-    http.post('/api/setting/', {data: [{key: 'spug_push_key', value: spug_push_key}]})
-      .then(() => {
-        message.success('保存成功');
+    http.post('/api/setting/push/bind/', {spug_push_key: pushKey})
+      .then(res => {
+        message.success('绑定成功');
         store.fetchSettings();
-        fetchBalance()
+        setBalance(res)
       })
-      .finally(() => store.loading = false)
+      .finally(() => setLoading(false))
   }
 
-  const isVip = true
+  function handleUnbind() {
+    setLoading(true);
+    http.post('/api/setting/push/bind/', {spug_push_key: ''})
+      .then(() => {
+        message.success('解绑成功');
+        store.fetchSettings();
+        setBalance({})
+        setPushKey('')
+      })
+      .finally(() => setLoading(false))
+  }
+
+  const isVip = balance.is_vip
+  const spugPushKey = store.settings.spug_push_key
   return (
     <React.Fragment>
       <div className={css.title}>推送服务设置</div>
@@ -54,61 +67,73 @@ export default observer(function () {
                    extra={<div>请登录 <Link href="https://push.spug.cc/login" title="推送助手"/>，至个人中心 /
                      个人设置查看用户ID，注意保密该ID请勿泄漏给第三方。</div>}>
 
-          <Input.Group compact>
-            <Input
-              value={store.settings.spug_push_key}
-              onChange={e => store.settings.spug_push_key = e.target.value}
-              style={{width: 'calc(100% - 100px)'}}
-              placeholder="请输入要绑定的推送助手用户ID"/>
-            <Button
-              type="primary"
-              style={{width: 80, marginLeft: 20}}
-              onClick={handleBind}
-              loading={loading}>确定</Button>
-          </Input.Group>
-          {/*<Input.Group compact>*/}
-          {/*  <Input bordered={false} style={{width: 'calc(100% - 100px)', paddingLeft: 0}} value="32uu73******64823d"/>*/}
-          {/*  <Button style={{width: 80, marginLeft: 20}}>解绑</Button>*/}
-          {/*</Input.Group>*/}
+          {spugPushKey ? (
+            <Input.Group compact>
+              <div className={css.keyText}
+                   style={{width: 'calc(100% - 100px)', lineHeight: '32px', fontWeight: 'bold'}}>{spugPushKey}</div>
+              <Button
+                ghost
+                type="danger"
+                style={{width: 80, marginLeft: 20}}
+                onClick={handleUnbind}
+                loading={loading}>解绑</Button>
+            </Input.Group>
+          ) : (
+            <Input.Group compact>
+              <Input
+                value={pushKey}
+                onChange={e => setPushKey(e.target.value)}
+                style={{width: 'calc(100% - 100px)'}}
+                placeholder="请输入要绑定的推送助手用户ID"/>
+              <Button
+                type="primary"
+                style={{width: 80, marginLeft: 20}}
+                onClick={handleBind}
+                loading={loading}>确定</Button>
+            </Input.Group>
+
+          )}
         </Form.Item>
       </div>
 
-      <Form.Item style={{marginTop: 24}}
-                 extra={<div> 如需充值请至 <Link href="https://push.spug.cc/buy/sms" title="推送助手"/>，具体计费规则及说明请查看推送助手官网。
-                 </div>}>
-        <div className={css.statistic}>
-          <Spin spinning={fetching}>
-            <div className={css.body}>
-              <div className={css.item}>
-                <div className={css.title}>短信余额</div>
-                <div className={css.value}>{balance.sms_balance}</div>
+      {spugPushKey ? (
+        <Form.Item style={{marginTop: 24}}
+                   extra={<div> 如需充值请至 <Link href="https://push.spug.cc/buy/sms" title="推送助手"/>，具体计费规则及说明请查看推送助手官网。
+                   </div>}>
+          <div className={css.statistic}>
+            <Spin spinning={fetching}>
+              <div className={css.body}>
+                <div className={css.item}>
+                  <div className={css.title}>短信余额</div>
+                  <div className={css.value}>{balance.sms_balance}</div>
+                </div>
+                <div className={css.item}>
+                  <div className={css.title}>语音余额</div>
+                  <div className={css.value}>{balance.voice_balance}</div>
+                </div>
+                <div className={css.item}>
+                  <div className={css.title}>邮件余额</div>
+                  <div className={css.value}>{balance.mail_balance}</div>
+                  {isVip ? (
+                    <div className={clsNames(css.tips, css.active)}>+ 会员免费20封 / 天</div>
+                  ) : (
+                    <div className={css.tips}>会员免费20封 / 天</div>
+                  )}
+                </div>
+                <div className={css.item}>
+                  <div className={css.title}>微信公众号余额</div>
+                  <div className={css.value}>{balance.wx_mp_balance}</div>
+                  {isVip ? (
+                    <div className={clsNames(css.tips, css.active)}>+ 会员免费100条 / 天</div>
+                  ) : (
+                    <div className={css.tips}>会员免费20封 / 天</div>
+                  )}
+                </div>
               </div>
-              <div className={css.item}>
-                <div className={css.title}>语音余额</div>
-                <div className={css.value}>{balance.voice_balance}</div>
-              </div>
-              <div className={css.item}>
-                <div className={css.title}>邮件余额</div>
-                <div className={css.value}>{balance.mail_balance}</div>
-                {isVip ? (
-                  <div className={clsNames(css.tips, css.active)}>+ 会员免费20封 / 天</div>
-                ) : (
-                  <div className={css.tips}>会员免费20封 / 天</div>
-                )}
-              </div>
-              <div className={css.item}>
-                <div className={css.title}>微信公众号余额</div>
-                <div className={css.value}>{balance.wx_mp_balance}</div>
-                {isVip ? (
-                  <div className={clsNames(css.tips, css.active)}>+ 会员免费100条 / 天</div>
-                ) : (
-                  <div className={css.tips}>会员免费20封 / 天</div>
-                )}
-              </div>
-            </div>
-          </Spin>
-        </div>
-      </Form.Item>
+            </Spin>
+          </div>
+        </Form.Item>
+      ) : null}
     </React.Fragment>
   )
 })
\ No newline at end of file