diff --git a/physics/templates/physics/exam_take.html b/physics/templates/physics/exam_take.html
index b8e74a83..83d820fe 100755
--- a/physics/templates/physics/exam_take.html
+++ b/physics/templates/physics/exam_take.html
@@ -204,26 +204,26 @@
             .physics-answer-list li { padding: 0.6rem; }
         }
             /* Question menu item states (small pill buttons) */
-            button.question-menu-item {
-                color: var(--text);
-                border: 1px solid var(--card-border);
-                background: var(--card-bg);
-                padding: 0.25rem 0.5rem;
-                border-radius: 0.35rem;
-                display: inline-flex;
-                align-items: center;
-                gap: 0.4rem;
-            }
-            button.question-menu-item.answered {
-                border-color: var(--success) !important; /* answered -> success border */
-            }
+        button.question-menu-item {
+            color: var(--text);
+            border: 1px solid var(--card-border);
+            background: var(--card-bg);
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.35rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.4rem;
+        }
+        button.question-menu-item.answered {
+            border-color: var(--success) !important; /* answered -> success border */
+        }
             /* flagged items show an icon only; no border change here */
-            button.question-menu-item .question-flag {
-                margin-left: 0.25rem;
-                font-size: 0.85em;
-                color: #ffc107;
-                line-height: 1;
-            }
+        button.question-menu-item .question-flag {
+            margin-left: 0.25rem;
+            font-size: 0.85em;
+            color: #ffc107;
+            line-height: 1;
+        }
     </style>
 {% endblock %}
 
@@ -298,6 +298,16 @@
                 requestAnimationFrame(function(){ el.style.opacity = '1'; });
         // hide after 1.6s
                 setTimeout(function(){ el.style.opacity = '0'; }, 1600);
+                        // Update the question list state locally so the menu reflects answered questions
+                try {
+                    var pos = (typeof window.currentQuestionPos === 'number') ? window.currentQuestionPos : (document.getElementById('question-number') ? parseInt(document.getElementById('question-number').textContent, 10) - 1 : NaN);
+                    if (!isNaN(pos)) {
+                        window.examQuestionAnswered = window.examQuestionAnswered || new Array({{ exam_length }}).fill(false);
+                        window.examQuestionAnswered[pos] = true;
+                        var btn = document.querySelector('#menu-list [data-qn="' + pos + '"]');
+                        if (btn) btn.classList.add('answered');
+                    }
+                } catch (e) { console && console.error && console.error(e); }
             } catch (e) { console && console.error && console.error(e); }
         });
     </script>
diff --git a/physics/templates/physics/exam_take_overview.html b/physics/templates/physics/exam_take_overview.html
index 3ff7987d..93f98170 100644
--- a/physics/templates/physics/exam_take_overview.html
+++ b/physics/templates/physics/exam_take_overview.html
@@ -2,11 +2,11 @@
 
 {% block content %}
     <span id="user-id">
-    {% if not cid %}
-        User: {{request.user}}
-    {% else %}
-        CID: {{cid}}
-    {% endif %}
+        {% if not cid %}
+            User: {{request.user}}
+        {% else %}
+            CID: {{cid}}
+        {% endif %}
     </span>
     {% include "exam_clock.html" %}
 
@@ -14,7 +14,7 @@
 
     {% if exam.publish_results %}
         <div class="alert alert-primary review-mode-alert" role="alert">
-            Exam is in review mode. Score are available 
+            Exam is in review mode. Score are available
             {% if request.user.is_authenticated %}
                 <a href="{% url 'physics:exam_scores_user' pk=exam.id %}">here</a>
 
@@ -24,7 +24,7 @@
         </div>
     {% elif cid_user_exam.completed %}
         <div class="alert alert-primary review-mode-alert" role="alert">
-            Exam completed. Answers are available 
+            Exam completed. Answers are available
             {% if request.user.is_authenticated %}
                 <a href="{% url 'physics:exam_scores_user' pk=exam.id %}">here</a>
 
@@ -37,7 +37,7 @@
             You have unanswered questions.
         </div>
     {% endif %}
-        
+
 
     <div class="overview-text">{{answer_count}} out of {{exam_length}} questions answered. Unanswered questions are shown in red. <span class="d-block">Click any tile to jump to that question.</span></div>
 
@@ -63,9 +63,9 @@
         {% endfor %}
     </div>
     <div id="time-details">
-    Start time: {{cid_user_exam.start_time}}<br/>
-    Last change time: {{cid_user_exam.end_time}}<br/>
-    Completed: {{cid_user_exam.completed}}
+        Start time: {{cid_user_exam.start_time}}<br/>
+        Last change time: {{cid_user_exam.end_time}}<br/>
+        Completed: {{cid_user_exam.completed}}
     </div>
 
     {% if not cid_user_exam.completed %}
@@ -97,69 +97,69 @@
 {% endblock %}
 
 {% block css %}
-<style>
+    <style>
     /* Overview page specific styles */
-    .overview-text {
-        margin-bottom: 1rem;
-        font-weight: 500;
-    }
+        .overview-text {
+            margin-bottom: 1rem;
+            font-weight: 500;
+        }
 
-    .physics-finish-list {
-        display: grid;
+        .physics-finish-list {
+            display: grid;
         /* Limit the maximum width of each tile so buttons don't stretch too wide on large screens.
            Each tile will be between 80px and 140px. The grid will wrap responsively. */
-        grid-template-columns: repeat(auto-fit, minmax(80px, 140px));
-        justify-content: start;
-        gap: .5rem;
-        align-items: stretch;
-        margin-bottom: 1rem;
-    }
+            grid-template-columns: repeat(auto-fit, minmax(80px, 140px));
+            justify-content: start;
+            gap: .5rem;
+            align-items: stretch;
+            margin-bottom: 1rem;
+        }
 
-    .overview-question-btn {
+        .overview-question-btn {
         /* Fill the grid cell but the cell itself is capped by the grid-template-columns above. */
-        width: 100%;
-        box-sizing: border-box;
-        text-align: left;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        padding: .5rem .75rem;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-    }
+            width: 100%;
+            box-sizing: border-box;
+            text-align: left;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            padding: .5rem .75rem;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
 
     /* Flagged question indicator: use border colour to signal a flagged item */
-    .overview-question-btn.flagged {
-        border-color: #ffc107 !important;
-        box-shadow: 0 1px 2px rgba(255,193,7,0.06);
-        background: rgba(255,193,7,0.03);
-    }
+        .overview-question-btn.flagged {
+            border-color: #ffc107 !important;
+            box-shadow: 0 1px 2px rgba(255,193,7,0.06);
+            background: rgba(255,193,7,0.03);
+        }
 
     /* Unanswered questions should draw attention */
-    .overview-question-btn[title] {
-        border-color: #dc3545 !important;
-        color: #dc3545 !important;
-        background: rgba(220,53,69,0.03);
-    }
+        .overview-question-btn[title] {
+            border-color: #dc3545 !important;
+            color: #dc3545 !important;
+            background: rgba(220,53,69,0.03);
+        }
 
-    #time-details {
-        font-size: .95rem;
-        color: #9aa0a6;
-        margin-top: .5rem;
-    }
+        #time-details {
+            font-size: .95rem;
+            color: #9aa0a6;
+            margin-top: .5rem;
+        }
 
     /* Make the finish button stand out on small screens */
-    .btn-primary.mt-3 {
-        min-width: 160px;
-    }
-
-    @media (max-width: 575.98px) {
-        .physics-finish-list {
-            /* On very small screens allow slightly narrower tiles but still wrap */
-            grid-template-columns: repeat(auto-fit, minmax(70px, 110px));
+        .btn-primary.mt-3 {
+            min-width: 160px;
         }
-        .overview-question-btn { font-size: .95rem }
-    }
-</style>
+
+        @media (max-width: 575.98px) {
+            .physics-finish-list {
+            /* On very small screens allow slightly narrower tiles but still wrap */
+                grid-template-columns: repeat(auto-fit, minmax(70px, 110px));
+            }
+            .overview-question-btn { font-size: .95rem }
+        }
+    </style>
 {% endblock %}
diff --git a/physics/templates/physics/partials/exam_take_fragment.html b/physics/templates/physics/partials/exam_take_fragment.html
index 08410727..f6ade5d7 100644
--- a/physics/templates/physics/partials/exam_take_fragment.html
+++ b/physics/templates/physics/partials/exam_take_fragment.html
@@ -86,6 +86,8 @@
             try {
                 var qnum = document.getElementById('question-number');
                 if (qnum) { qnum.textContent = '{{ pos|add:"1" }}'; }
+                // expose current question index for global listeners
+                window.currentQuestionPos = {{ pos }};
                 var qstem = document.getElementById('question-stem');
                 if (qstem) { qstem.innerHTML = '{{ question.stem|escapejs }}'; }
             } catch (err) {