diff --git a/packages/hydrooj/src/handler/record.ts b/packages/hydrooj/src/handler/record.ts
index 298ec5b90..8955665ca 100644
--- a/packages/hydrooj/src/handler/record.ts
+++ b/packages/hydrooj/src/handler/record.ts
@@ -153,9 +153,14 @@ class RecordDetailHandler extends ContestDetailBaseHandler {
 
     @param('rid', Types.ObjectId)
     @param('download', Types.Boolean)
+    @param('rev', Types.ObjectId, true)
     // eslint-disable-next-line consistent-return
-    async get(domainId: string, rid: ObjectId, download = false) {
-        const rdoc = this.rdoc;
+    async get(domainId: string, rid: ObjectId, download = false, rev?: ObjectId) {
+        let rdoc = this.rdoc;
+        const allRev: ObjectId[] = (await record.collHistory.find({ rid }).project({ _id: 1 }).toArray()).map((i) => i._id);
+        if (rev && allRev.some((i) => i.equals(rev))) {
+            rdoc = { ...rdoc, ...omit(await record.collHistory.findOne({ _id: rev }), ['_id']) };
+        }
         let canViewDetail = true;
         if (rdoc.contest?.toString().startsWith('0'.repeat(23))) {
             if (rdoc.uid !== this.user._id) throw new PermissionError(PERM.PERM_READ_RECORD_CODE);
@@ -198,7 +203,7 @@ class RecordDetailHandler extends ContestDetailBaseHandler {
         } else if (download) return await this.download();
         this.response.template = 'record_detail.html';
         this.response.body = {
-            udoc, rdoc: canViewDetail ? rdoc : pick(rdoc, ['_id', 'lang', 'code']), pdoc, tdoc: this.tdoc,
+            udoc, rdoc: canViewDetail ? rdoc : pick(rdoc, ['_id', 'lang', 'code']), pdoc, tdoc: this.tdoc, rev, allRev,
         };
     }
 
diff --git a/packages/ui-default/templates/record_detail.html b/packages/ui-default/templates/record_detail.html
index 1d48bb6a2..b708a5ecd 100644
--- a/packages/ui-default/templates/record_detail.html
+++ b/packages/ui-default/templates/record_detail.html
@@ -1,7 +1,7 @@
 {% import "components/problem.html" as problem with context %}
 {% extends "layout/basic.html" %}
 {% block content %}
-{% if typeof(rdoc['status']) === 'number' %}
+{% if typeof(rdoc['status']) === 'number' and not rev %}
   {{ set(UiContext, 'socketUrl', "record-detail-conn?domainId=" + rdoc.domainId + "&rid=" + rdoc._id) }}
 {% endif %}
 <div class="row">
@@ -106,6 +106,29 @@
         {% endif %}
       </div>
     </div>
+    {% if allRev|length %}
+      <div class="section side">
+        <div class="section__header">
+          <h1 class="section__title">{{ _('History') }}</h1>
+        </div>
+        <div class="section__body no-padding">
+          <ol class="menu">
+            <li class="menu__item">
+              <a href="?rev=" {% if not rev %}style="border-color: #4690d0;"{% endif %} class="menu__link">
+                {{ _('Latest Version') }}
+              </a>
+            </li>
+            {% for r in allRev %}
+            <li class="menu__item">
+              <a href="?rev={{ r }}" {% if rev and rev.equals(r) %}style="border-color: #4690d0;"{% endif %} class="menu__link">
+                {{ _('Version') }} {{ loop.index }}
+              </a>
+            </li>
+            {% endfor %}
+          </ol>
+        </div>
+      </div>
+    {% endif %}
   </div>
 </div>
 {% endblock %}