diff --git a/physics/templates/physics/exam_take_overview.html b/physics/templates/physics/exam_take_overview.html
index 93f98170..8780ee71 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,19 +37,20 @@
             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>
 
     <div class="physics-finish-list" role="list">
         {% for question, answer, flagged in question_answer_tuples %}
             {% comment %} Use an anchor styled as a button rather than nesting button inside anchor (invalid HTML). Keep link targets unchanged. {% endcomment %}
-            {% if not cid %}
+                {% if not cid %}
                 <a role="listitem" href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}"
                    class="overview-question-btn btn btn-outline-secondary {% if flagged %}flagged{% endif %}"
                    aria-label="Go to question {{ forloop.counter }}"
                    {% if not answer %}title="You have not answered this question" aria-current="false"{% endif %}>
-                    {{forloop.counter}}{% if answer and answer.answer %}: {{answer.answer}}{% endif %}
+                    <span class="qn-num">{{forloop.counter}}</span>{% if answer and answer.answer %}<span class="qn-ans">: {{answer.answer}}</span>{% endif %}
+                    {% if flagged %}<span class="question-flag" aria-hidden="true">⚑</span>{% endif %}
                 </a>
 
             {% else %}
@@ -57,15 +58,16 @@
                    class="overview-question-btn btn btn-outline-secondary {% if flagged %}flagged{% endif %}"
                    aria-label="Go to question {{ forloop.counter }}"
                    {% if not answer %}title="You have not answered this question" aria-current="false"{% endif %}>
-                    {{forloop.counter}}{% if answer and answer.answer %}: {{answer.answer}}{% endif %}
+                    <span class="qn-num">{{forloop.counter}}</span>{% if answer and answer.answer %}<span class="qn-ans">: {{answer.answer}}</span>{% endif %}
+                    {% if flagged %}<span class="question-flag" aria-hidden="true">⚑</span>{% endif %}
                 </a>
             {% endif %}
         {% 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 +99,71 @@
 {% 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);
-        }
+    /* Flagged questions show only the flag icon; do not change border color */
+
+    .overview-question-btn .question-flag {
+        margin-left: auto;
+        font-size: 0.95rem;
+        color: #ffc107;
+        line-height: 1;
+    }
 
     /* 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;
-        }
+    .btn-primary.mt-3 {
+        min-width: 160px;
+    }
 
-        @media (max-width: 575.98px) {
-            .physics-finish-list {
+    @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 }
+            grid-template-columns: repeat(auto-fit, minmax(70px, 110px));
         }
-    </style>
+        .overview-question-btn { font-size: .95rem }
+    }
+</style>
 {% endblock %}