diff --git a/physics/templates/physics/exam_take_overview.html b/physics/templates/physics/exam_take_overview.html
index 14f6012c..300b6085 100644
--- a/physics/templates/physics/exam_take_overview.html
+++ b/physics/templates/physics/exam_take_overview.html
@@ -39,14 +39,26 @@
     {% endif %}
         
 
-    <div class="overview-text">{{answer_count}} out of {{exam_length}} questions answered. Unanswered questions are shown in red. <p>Click to go to a question.</p></div>
-    <div class="physics-finish-list">
+    <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 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 %}
-                <a href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}"><button {% if not answer %}class="unanswered" title="You have not answered this question"{% endif %}>{{forloop.counter}}: {{answer.answer}}</button></a>
+                <a role="listitem" href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}"
+                   class="overview-question-btn btn btn-outline-secondary"
+                   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 %}
+                </a>
 
             {% else %}
-                <a href="{% url 'physics:exam_take' pk=exam.id sk=forloop.counter0 cid=cid passcode=passcode %}"><button {% if not answer %}class="unanswered" title="You have not answered this question"{% endif %}>{{forloop.counter}}: {{answer.answer}}</button></a>
+                <a role="listitem" href="{% url 'physics:exam_take' pk=exam.id sk=forloop.counter0 cid=cid passcode=passcode %}"
+                   class="overview-question-btn btn btn-outline-secondary"
+                   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 %}
+                </a>
             {% endif %}
         {% endfor %}
     </div>
@@ -58,9 +70,9 @@
 
     {% if not cid_user_exam.completed %}
         {% if not cid %}
-            <button hx-get="{% url 'physics:exam_complete_user' pk=exam.id %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
+            <button class="btn btn-primary mt-3" hx-get="{% url 'physics:exam_complete_user' pk=exam.id %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
         {% else %}
-            <button hx-get="{% url 'physics:exam_complete' pk=exam.id cid=cid passcode=passcode %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
+            <button class="btn btn-primary mt-3" hx-get="{% url 'physics:exam_complete' pk=exam.id cid=cid passcode=passcode %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
         {% endif %}
     {% endif %}
 
@@ -83,3 +95,57 @@
         })
     </script>
 {% endblock %}
+
+{% block css %}
+<style>
+    /* Overview page specific styles */
+    .overview-text {
+        margin-bottom: 1rem;
+        font-weight: 500;
+    }
+
+    .physics-finish-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+        gap: .5rem;
+        align-items: stretch;
+        margin-bottom: 1rem;
+    }
+
+    .overview-question-btn {
+        text-align: left;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: .5rem .75rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    /* Unanswered questions should draw attention */
+    .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;
+    }
+
+    /* Make the finish button stand out on small screens */
+    .btn-primary.mt-3 {
+        min-width: 160px;
+    }
+
+    @media (max-width: 575.98px) {
+        .physics-finish-list {
+            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+        }
+        .overview-question-btn { font-size: .95rem }
+    }
+</style>
+{% endblock %}