diff --git a/proto/anki/scheduler.proto b/proto/anki/scheduler.proto
index ecd68fa3e..418920ec7 100644
--- a/proto/anki/scheduler.proto
+++ b/proto/anki/scheduler.proto
@@ -313,6 +313,7 @@ message NextCardDataResponse {
     bool autoplay = 7;
     bool marked = 13;
     optional TypedAnswer typed_answer = 12;
+    uint32 max_time_ms = 14;
 
     repeated card_rendering.AVTag question_av_tags = 8;
     repeated card_rendering.AVTag answer_av_tags = 9;
diff --git a/rslib/src/scheduler/service/mod.rs b/rslib/src/scheduler/service/mod.rs
index f1cf80b80..74525549a 100644
--- a/rslib/src/scheduler/service/mod.rs
+++ b/rslib/src/scheduler/service/mod.rs
@@ -492,6 +492,7 @@ impl crate::services::SchedulerService for Collection {
                         args: answer.0,
                     }),
                     marked,
+                    max_time_ms: deck_config.inner.cap_answer_time_to_secs * 1000,
 
                     // Filled by python
                     front: "".to_string(),
diff --git a/ts/routes/reviewer/reviewer-bottom/Timer.svelte b/ts/routes/reviewer/reviewer-bottom/Timer.svelte
index 92bd7c67c..f9ea65819 100644
--- a/ts/routes/reviewer/reviewer-bottom/Timer.svelte
+++ b/ts/routes/reviewer/reviewer-bottom/Timer.svelte
@@ -4,21 +4,38 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import type { ReviewerState } from "../reviewer";
-    import { onMount } from "svelte";
+    import { onDestroy } from "svelte";
 
     export let state: ReviewerState;
 
     let text = "";
+    let cls = "";
 
     function step() {
-        text = formatTime(Date.now() - state.beginAnsweringMs);
+        let time = Date.now() - state.beginAnsweringMs;
+        const maxTime = state._cardData?.maxTimeMs ?? 0;
+        if (time >= maxTime) {
+            time = maxTime;
+            cls = "overtime";
+        } else {
+            cls = "";
+        }
+        text = formatTime(time);
     }
 
-    onMount(() => {
-        const interval = setInterval(step, 1000);
-        return () => {
-            clearInterval(interval);
-        };
+    let interval: ReturnType<typeof setInterval> | undefined = undefined;
+    function startTimer() {
+        clearInterval(interval);
+        interval = setInterval(step, 1000);
+        text = formatTime(0);
+        cls = "";
+        console.log("startTimer");
+    }
+
+    state.cardData.subscribe(startTimer);
+
+    onDestroy(() => {
+        clearInterval(interval);
     });
     step();
 
@@ -30,15 +47,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<span>
-    <div>
-        {text}
-    </div>
-</span>
+<div class={cls}>
+    {text}
+</div>
 
 <style>
     div {
         width: 88px;
         text-align: center;
     }
+
+    .overtime {
+        color: red;
+    }
 </style>