diff --git a/packages/hydrooj/src/handler/record.ts b/packages/hydrooj/src/handler/record.ts
index 7370bb5b..09fec61e 100644
--- a/packages/hydrooj/src/handler/record.ts
+++ b/packages/hydrooj/src/handler/record.ts
@@ -196,7 +196,8 @@ class RecordDetailHandler extends ContestDetailBaseHandler {
         if (!pdoc?.config || typeof pdoc.config === 'string') throw new ProblemConfigError();
         const priority = await record.submissionPriority(this.user._id, -20);
         const isContest = this.rdoc.contest && this.rdoc.contest.toString() !== '000000000000000000000000';
-        await record.reset(domainId, rid, true);
+        const rdoc = await record.reset(domainId, rid, true);
+        bus.broadcast('record/change', rdoc);
         await record.judge(domainId, rid, priority, isContest ? { detail: false } : {});
         this.back();
     }
diff --git a/packages/ui-default/components/socket/index.js b/packages/ui-default/components/socket/index.ts
similarity index 82%
rename from packages/ui-default/components/socket/index.js
rename to packages/ui-default/components/socket/index.ts
index c6dc743e..4c66c043 100644
--- a/packages/ui-default/components/socket/index.js
+++ b/packages/ui-default/components/socket/index.ts
@@ -1,7 +1,8 @@
 import ReconnectingWebSocket from 'reconnecting-websocket';
 
 export default class Sock {
-  constructor(url) {
+  private sock: ReconnectingWebSocket;
+  constructor(public url: string) {
     const i = new URL(url, window.location.href);
     if (i.host !== window.location.host) i.searchParams.append('sid', document.cookie.split('sid=')[1].split(';')[0]);
     i.protocol = i.protocol.replace('http', 'ws');
@@ -24,6 +25,10 @@ export default class Sock {
     };
   }
 
+  onmessage: (message: MessageEvent<any>) => void;
+  onclose: (code: number, reason: string) => void;
+  onopen: (sock: ReconnectingWebSocket) => void;
+
   send(data) {
     this.sock.send(data);
   }
diff --git a/packages/ui-default/pages/record_main.page.ts b/packages/ui-default/pages/record_main.page.ts
index ea7fc0d5..73cc029c 100644
--- a/packages/ui-default/pages/record_main.page.ts
+++ b/packages/ui-default/pages/record_main.page.ts
@@ -1,8 +1,9 @@
 import $ from 'jquery';
 import ProblemSelectAutoComplete from 'vj/components/autocomplete/ProblemSelectAutoComplete';
 import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
+import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
-import { getAvailableLangs, tpl } from 'vj/utils';
+import { getAvailableLangs, request, tpl } from 'vj/utils';
 
 const page = new NamedPage('record_main', async () => {
   const [{ default: WebSocket }, { DiffDOM }] = await Promise.all([
@@ -39,6 +40,14 @@ const page = new NamedPage('record_main', async () => {
     (i) => ($('select[name="lang"]').append(tpl`<option value="${i}" key="${i}">${availableLangs[i].display}</option>`)));
   const lang = new URL(window.location.href).searchParams.get('lang');
   if (lang) $('select[name="lang"]').val(lang);
+
+  for (const operation of ['rejudge', 'cancel']) {
+    $(document).on('click', `[name="operation"][value="${operation}"]`, (ev) => {
+      ev.preventDefault();
+      const action = $(ev.target).closest('form').attr('action');
+      request.post(action, { operation }).catch((e) => Notification.error(e));
+    });
+  }
 });
 
 export default page;
diff --git a/packages/ui-default/templates/record_main_tr.html b/packages/ui-default/templates/record_main_tr.html
index eed9ef50..dbe315ce 100644
--- a/packages/ui-default/templates/record_main_tr.html
+++ b/packages/ui-default/templates/record_main_tr.html
@@ -10,7 +10,7 @@
         {{ _('Rejudge') }}
       </button> 
       <button type="submit" name="operation" value="cancel" class="link text-maroon lighter">
-        <span class="icon icon-cross"></span>
+        <span class="icon icon-close"></span>
         {{ _('Cancel Score') }}
       </button> |
     </form>