diff --git a/generic/templates/generic/exam_overview_headers.html b/generic/templates/generic/exam_overview_headers.html
index ac166cd5..d63f8671 100644
--- a/generic/templates/generic/exam_overview_headers.html
+++ b/generic/templates/generic/exam_overview_headers.html
@@ -3,6 +3,7 @@
 <div class="container-fluid mb-3">
     <div class="row align-items-start">
         <div class="col-12 col-md-8">
+            {# Responsive: title stacks above metadata on small screens; use h4 for compactness #}
             <h1 class="h4 mb-1">Exam: {{ exam }}</h1>
             {% include 'exam_notes.html' %}
 
@@ -32,6 +33,7 @@
             {% endif %}
 
             <div class="mt-2 small text-muted">
+
                 This exam has <strong>{{ question_number }}</strong> questions &nbsp;•&nbsp;
                 Time limit: <strong>{{ exam.time_limit }}</strong> seconds (<span title="Time per question: {% widthratio exam.time_limit question_number 1 %} seconds">per question</span>)
             </div>
@@ -42,13 +44,31 @@
                     {% if exam.exam_open_access %}
                         <div class="small text-muted">Available to all registered users.</div>
                     {% else %}
-                        <div class="small">Cid candidates: <a href="{{exam.get_cid_edit_url}}">{{candidate_count.0}}</a>, User candidates: <a href="{{exam.get_user_edit_url}}">{{candidate_count.1}}</a></div>
+                        {# Improved candidate counts: use compact buttons with badges and icons; stack on xs, inline on md+ #}
+                        <div class="small">
+                            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center gap-2">
+                                <div class="text-muted d-none d-md-block me-md-2">Candidates:</div>
+
+                                <a href="{{ exam.get_cid_edit_url }}" class="btn btn-sm btn-outline-primary d-inline-flex align-items-center" title="CID candidates">
+                                    <i class="bi bi-person-badge" aria-hidden="true"></i>
+                                    <span class="ms-1 d-none d-sm-inline">CID</span>
+                                    <span class="badge bg-secondary ms-2" aria-label="CID candidates count">{{ candidate_count.0 }}</span>
+                                </a>
+
+                                <a href="{{ exam.get_user_edit_url }}" class="btn btn-sm btn-outline-success d-inline-flex align-items-center" title="User candidates">
+                                    <i class="bi bi-people" aria-hidden="true"></i>
+                                    <span class="ms-1 d-none d-sm-inline">Users</span>
+                                    <span class="badge bg-secondary ms-2" aria-label="User candidates count">{{ candidate_count.1 }}</span>
+                                </a>
+                            </div>
+                        </div>
                     {% endif %}
                 {% endif %}
             </div>
         </div>
 
         <div class="col-12 col-md-4">
+            {# Cards stack vertically on mobile, align on md+ using gap utilities #}
             <div class="d-flex flex-column gap-2">
                 <div class="card">
                     <div class="card-body p-2">
@@ -94,7 +114,8 @@
                 </div>
                 <div class="card">
                     <div class="card-header p-2">
-                        <a class="d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#open-access-bulk" role="button" aria-expanded="false" aria-controls="open-access-bulk">
+                        {# Use d-block on small screens so the summary text wraps nicely; md uses flex for spacing #}
+                        <a class="d-block d-md-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#open-access-bulk" role="button" aria-expanded="false" aria-controls="open-access-bulk">
                             <span>Open access (questions)</span>
                             <small class="text-muted">Expand to change selected questions open access status</small>
                         </a>
@@ -104,8 +125,8 @@
                             <form hx-post="{% url 'generic:generic_exam_set_open_access' %}" hx-target="#action-result" hx-swap="innerHTML" class="row g-2 align-items-center">
                                 <input type="hidden" name="type" value="sbas" />
                                 <input type="hidden" name="exam_id" value="{{ exam.pk }}" />
-                                <div class="col-12 col-md-8 small text-muted">Select questions on the list above (checkboxes) then click one of the actions below.</div>
-                                <div class="col-12 col-md-8 d-flex gap-2 justify-content-md-end">
+                                <div class="col-12 small text-muted">Select questions on the list above (checkboxes) then click one of the actions below.</div>
+                                <div class="col-12 d-flex flex-column flex-md-row gap-2 justify-content-md-end">
                                     <button class="btn btn-sm btn-outline-success" type="submit" name="set_open_access" value="true" hx-include="input[name='selection']:checked">Set Open Access = True</button>
                                     <button class="btn btn-sm btn-outline-danger" type="submit" name="set_open_access" value="false" hx-include="input[name='selection']:checked">Set Open Access = False</button>
                                     <button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#open-access-bulk">Close</button>