diff --git a/packages/ui-default/common/variables.inc.styl b/packages/ui-default/common/variables.inc.styl
index b4e94bf13..9d9b7ecf9 100644
--- a/packages/ui-default/common/variables.inc.styl
+++ b/packages/ui-default/common/variables.inc.styl
@@ -136,8 +136,7 @@ $supplementary-link-color = lighten($text-1-color, 40%)
 
 $pager-border-color = $table-border-color
 
-$nprogress-color = #FFF
-$nprogress-color-floating = $primary-color
+$nprogress-color = $primary-color
 
 $syntax-hl-bg-color = #F8F8F8
 
diff --git a/packages/ui-default/components/nprogress/nprogress.page.styl b/packages/ui-default/components/nprogress/nprogress.page.styl
index 4c6a724e9..bbbab67b4 100644
--- a/packages/ui-default/components/nprogress/nprogress.page.styl
+++ b/packages/ui-default/components/nprogress/nprogress.page.styl
@@ -7,32 +7,19 @@ $spinner-margin = ($nav-item-height - $spinner-size) / 2
 #nprogress .bar
   background: $nprogress-color
   position: fixed
-  z-index: 1031
-  top: 0
+  top: $nav-item-height
+  z-index: 99
   left: 0
   width: 100%
   height: 2px
 
-  &+above(rupture.mobile-cutoff)
-    background: $nprogress-color-floating
-
 #nprogress .peg
-  display: block
-  position: absolute
-  right: 0px
-  width: 100px
-  height: 100%
-  box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color
-  opacity: 1.0
-  transform: rotate(3deg) translate(0px, -4px)
-
-  &+above(rupture.mobile-cutoff)
-    box-shadow: 0 0 10px $nprogress-color-floating, 0 0 5px $nprogress-color-floating
+  display: none
 
 #nprogress .spinner
   display: block
   position: fixed
-  z-index: 1031
+  z-index: 99999
   top: rem($spinner-margin)
   right: rem($spinner-margin)
 
@@ -46,10 +33,6 @@ $spinner-margin = ($nav-item-height - $spinner-size) / 2
   border-radius: 50%
   animation: nprogress-spinner 400ms linear infinite
 
-  &+above(rupture.mobile-cutoff)
-    border-top-color: $nprogress-color-floating
-    border-left-color: $nprogress-color-floating
-
 .nprogress-custom-parent
   overflow: hidden
   position: relative
@@ -63,4 +46,3 @@ $spinner-margin = ($nav-item-height - $spinner-size) / 2
     transform: rotate(0deg)
   100%
     transform: rotate(360deg)
-
diff --git a/packages/ui-default/hydro.js b/packages/ui-default/hydro.ts
similarity index 93%
rename from packages/ui-default/hydro.js
rename to packages/ui-default/hydro.ts
index 1fda69693..722fcfc21 100644
--- a/packages/ui-default/hydro.js
+++ b/packages/ui-default/hydro.ts
@@ -5,6 +5,16 @@ import Notification from 'vj/components/notification';
 import PageLoader from 'vj/misc/PageLoader';
 import delay from 'vj/utils/delay';
 
+declare global {
+  interface Window {
+    UserContext: any;
+    UiContext: any;
+    Hydro: any;
+    // eslint-disable-next-line camelcase
+    node_modules: any;
+  }
+}
+
 const start = new Date();
 window.UserContext = JSON.parse(window.UserContext);
 
diff --git a/packages/ui-default/package.json b/packages/ui-default/package.json
index ad046eab0..938ddc165 100644
--- a/packages/ui-default/package.json
+++ b/packages/ui-default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.24.4",
+  "version": "4.24.5",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
diff --git a/packages/ui-default/pages/contest.page.ts b/packages/ui-default/pages/contest.page.ts
new file mode 100644
index 000000000..4ef353b0b
--- /dev/null
+++ b/packages/ui-default/pages/contest.page.ts
@@ -0,0 +1,21 @@
+import NProgress from 'nprogress';
+import { NamedPage } from 'vj/misc/Page';
+
+export default new NamedPage(['contest_detail', 'contest_detail_problem'], () => {
+  const beginAt = new Date(UiContext.tdoc.beginAt).getTime();
+  const endAt = new Date(UiContext.tdoc.endAt).getTime();
+  NProgress.configure({ trickle: false, showSpinner: false, minimum: 0 });
+  function updateProgress() {
+    const now = Date.now();
+    console.log(now, beginAt, endAt);
+    if (beginAt <= now && now <= endAt) NProgress.set((now - beginAt) / (endAt - beginAt));
+    else if (now > endAt) NProgress.set(1);
+    else {
+      console.log('set');
+      NProgress.set(0);
+    }
+  }
+  NProgress.start();
+  updateProgress();
+  setInterval(updateProgress, 5000);
+});
diff --git a/packages/ui-default/templates/contest_detail.html b/packages/ui-default/templates/contest_detail.html
index 759362ecd..3b4625781 100644
--- a/packages/ui-default/templates/contest_detail.html
+++ b/packages/ui-default/templates/contest_detail.html
@@ -3,6 +3,7 @@
 {% import "components/record.html" as record with context %}
 {% import "components/problem.html" as problem with context %}
 {% block content %}
+{{ set(UiContext, 'tdoc', tdoc) }}
 <div class="row">
   <div class="medium-9 columns">
     <div class="section">
diff --git a/packages/ui-default/templates/problem_detail.html b/packages/ui-default/templates/problem_detail.html
index d023c1359..6dcb77f38 100644
--- a/packages/ui-default/templates/problem_detail.html
+++ b/packages/ui-default/templates/problem_detail.html
@@ -15,6 +15,7 @@
   {{ set(UiContext, 'getSubmissionsUrl', url('record_main', query={fullStatus:'true', pid:pdoc.pid, tid:tdoc.docId})) }}
   {{ set(UiContext, 'getRecordDetailUrl', url('record_detail', rid='{rid}', query={tid:tdoc.docId})) }}
   {{ set(UiContext, 'pretestConnUrl', "/record-conn?pretest=1&uidOrName=" + handler.user._id + "&pid=" + pdoc.docId + "&domainId=" + handler.domainId + "&tid=" + tdoc.docId) }}
+  {{ set(UiContext, 'tdoc', tdoc) }}
 {% else %}
   {{ set(UiContext, 'canViewRecord', true) }}
   {{ set(UiContext, 'postSubmitUrl', url('problem_submit', pid=pdoc.docId)) }}
diff --git a/packages/ui-default/types.ts b/packages/ui-default/types.ts
new file mode 100644
index 000000000..db9dfd507
--- /dev/null
+++ b/packages/ui-default/types.ts
@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+declare let UserContext: any;
+declare let UiContext: any;
+declare let Hydro: any;
+// eslint-disable-next-line camelcase
+declare let node_modules: any;