diff --git a/generic/templates/generic/exam_cids.html b/generic/templates/generic/exam_cids.html
index f4b063d4..75994107 100644
--- a/generic/templates/generic/exam_cids.html
+++ b/generic/templates/generic/exam_cids.html
@@ -1,160 +1,162 @@
-<div id="history-modal"
-     class="modal modal-blur fade"
-     style="display: none"
-     aria-hidden="false"
-     tabindex="-1">
-    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
-        <h2>Exam user history:
-            <span id="history-user"></span>
-        </h2>
-        <div class="modal-content"></div>
-    </div>
-</div>
+{% block content %}
+    <div class="container py-3">
+        <div class="row mb-3">
+            <div class="col-12 d-flex justify-content-between align-items-center">
+                <h3 class="mb-0">Candidates for {{ exam.get_exam_name }}</h3>
+                <div>
+                    <a class="btn btn-sm btn-outline-light" href="{% url exam.app_name|add:':exam_cids_edit' exam.pk %}">Edit Exam CIDs</a>
+                    <a class="btn btn-sm btn-outline-light ms-2" href="{% url exam.app_name|add:':exam_users_edit' exam.pk %}">Edit Exam Users</a>
+                </div>
+            </div>
+        </div>
 
-<div class="card text-white bg-dark">
-    <h3>CID candidates</h3>
-    {% if cid_users %}
-        <p>{{cid_user_count}} CID candidates.</p>
-
-        <div id="htmx-info"></div>
-
-        <ol class="cid-candidate-list">
-            {% for cid in cid_users %}
-
-                <li class="cid-user" data-cid={{cid.cid}}>
-                    <div class="cid-data d-flex align-items-center">
-                        <i class="bi bi-clock-history me-2"
-                           title="View user exam history"
-                           hx-get="{% url exam.app_name|add:':exam_user_status_cid' exam.id cid.cid %}"
-                           hx-target=".modal-content"
-                           data-bs-toggle="modal"
-                           data-bs-target="#history-modal"
-                           _="on htmx:afterOnLoad put {{cid.cid}} into #history-user.innerHTML "
-                        ></i>
-                        <span class="d-inline-flex align-items-center flex-nowrap">
-                            <a class="cid-link me-1" href="{% url 'generic:update_cid' cid.pk %}">{{cid.cid}}</a>
-                            <span class="text-muted">[{{cid.passcode}}]</span>
-                            <a title="View CID exam details" class="ms-2 d-inline-block cid-detail-link" hx-get="{% url 'generic:cid_user_exam_partial' exam.app_name exam.id cid.cid %}" hx-target=".modal-content" data-bs-toggle="modal" data-bs-target="#history-modal" role="button"><i class="bi bi-box-arrow-up-right"></i></a>
-                        </span>
-                    </div>
-                    <div class="cid-name">{{cid.name}}</div>
-                    <div class="cid-email">Email: {{cid.email}}</div>
-                </li>
-
-            {% endfor %}
-        </ol>
-    {% else %}
-        <p>This exam has no CID candidates. Add some with the below link.</p>
-    {% endif %}
-
-
-    <a href="{% url exam.app_name|add:':exam_cids_edit' exam.pk %}">Edit Exam CIDs</a>
-</div>
-<br/>
-
-<div class="card text-white bg-dark">
-    <h3>User candidates</h3>
-    {% if user_users %}
-        <p>{{user_user_count}} User candidates.</p>
-
-        <ol class="user-candidate-list">
-            {% for user in user_users %}
-
-                <li class="user-user" data-user="{{user.username}}">
-
-                    <div>
-                        <i class="bi bi-clock-history"
-                           title="View user exam history"
-                           hx-get="{% url exam.app_name|add:':exam_user_status_user' exam.id user.id %}"
-                           hx-target=".modal-content"
-                           data-bs-toggle="modal"
-                           data-bs-target="#history-modal"
-                           _="on htmx:afterOnLoad put {{cid.cid}} into #history-user.innerHTML "
-                        ></i>
-                        {% if request.user.is_superuser %}
-                            <a href='{% url "account_profile" user.username %}'><i class="bi bi-link"></i></a>
+        <div class="row">
+            <div class="col-lg-6 mb-3">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <h5 class="card-title">CID candidates <small class="text-muted">({{ cid_user_count }})</small></h5>
+                        <div id="htmx-info"></div>
+                        {% if cid_users %}
+                            <ul class="list-group list-group-flush">
+                                {% for cid in cid_users %}
+                                    <li class="list-group-item">
+                                        <div class="d-flex align-items-start justify-content-between">
+                                            <div>
+                                                <div class="d-flex align-items-center">
+                                                    <i class="bi bi-clock-history text-muted me-2" title="View user exam history"
+                                                       hx-get="{% url exam.app_name|add:':exam_user_status_cid' exam.id cid.cid %}"
+                                                       hx-target=".modal-content"
+                                                       data-bs-toggle="modal"
+                                                       data-bs-target="#history-modal"
+                                                       _="on htmx:afterOnLoad put {{cid.cid}} into #history-user.innerHTML "
+                                                    ></i>
+                                                    <a class="fw-bold me-2 cid-link" href="{% url 'generic:update_cid' cid.pk %}">{{ cid.cid }}</a>
+                                                    <span class="text-muted">[{{ cid.passcode }}]</span>
+                                                    <a class="ms-3" title="View CID exam details" hx-get="{% url 'generic:cid_user_exam_partial' exam.app_name exam.id cid.cid %}" hx-target=".modal-content" data-bs-toggle="modal" data-bs-target="#history-modal"><i class="bi bi-box-arrow-up-right"></i></a>
+                                                </div>
+                                                <div class="small text-muted mt-1">{{ cid.name }}</div>
+                                                <div class="small">Email: {{ cid.email }}</div>
+                                            </div>
+                                            <div class="text-end small">
+                                                {% if cid.login_email_sent %}
+                                                    <span class="badge bg-success">Email sent</span>
+                                                {% else %}
+                                                    <span class="badge bg-secondary">Not sent</span>
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% else %}
+                            <p class="text-muted">This exam has no CID candidates. Add some with the edit link above.</p>
                         {% endif %}
-                        {{user.username}}</div>
-                    <div>Email: {{user.email}}</div>
-                </li>
+                    </div>
+                </div>
+            </div>
 
-            {% endfor %}
-        </ol>
-    {% else %}
-        <p>This exam has no User candidates. Add some with the below link.</p>
-    {% endif %}
-    <a href="{% url exam.app_name|add:':exam_users_edit' exam.pk %}">Edit Exam Users</a>
+            <div class="col-lg-6 mb-3">
+                <div class="card h-100">
+                    <div class="card-body">
+                        <h5 class="card-title">User candidates <small class="text-muted">({{ user_user_count }})</small></h5>
+                        {% if user_users %}
+                            <ul class="list-group list-group-flush">
+                                {% for user in user_users %}
+                                    <li class="list-group-item d-flex justify-content-between align-items-start">
+                                        <div>
+                                            <div class="d-flex align-items-center">
+                                                <i class="bi bi-clock-history text-muted me-2" title="View user exam history"
+                                                   hx-get="{% url exam.app_name|add:':exam_user_status_user' exam.id user.id %}"
+                                                   hx-target=".modal-content"
+                                                   data-bs-toggle="modal"
+                                                   data-bs-target="#history-modal"
+                                                   _="on htmx:afterOnLoad put {{cid.cid}} into #history-user.innerHTML "
+                                                ></i>
+                                                {% if request.user.is_superuser %}
+                                                    <a class="me-2" href='{% url "account_profile" user.username %}'><i class="bi bi-link"></i></a>
+                                                {% endif %}
+                                                <span class="fw-bold">{{ user.username }}</span>
+                                            </div>
+                                            <div class="small">Email: {{ user.email }}</div>
+                                        </div>
+                                        <div class="small text-muted">&nbsp;</div>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% else %}
+                            <p class="text-muted">This exam has no User candidates. Add some with the edit link above.</p>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
 
-</div>
+        {% if user_exam_data %}
+            <div class="row">
+                <div class="col-12">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 class="card-title">Submitted candidates</h5>
+                            <p class="small text-muted">The following candidate submissions have been received. Candidates with submissions are highlighted above.</p>
+                            <ul id="submitted-candidates" class="list-unstyled small">
+                                {% for user_data in user_exam_data %}
+                                    <li data-cid="{{user_data.cid_user}}" data-user="{{user_data.user_user}}">CID: {{user_data.cid_user}} / User: {{user_data.user_user}} / Start: {{user_data.start_time}} / End: {{user_data.end_time}}</li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
 
-<br/>
+        <div class="row mt-3">
+            <div class="col-12">
+                <button class="btn btn-sm btn-outline-secondary" title="View all user exam history" hx-get="{% url exam.app_name|add:':exam_user_status' exam.id %}" hx-target=".modal-content" data-bs-toggle="modal" data-bs-target="#history-modal">Exam history <i class="bi bi-clock-history"></i></button>
+            </div>
+        </div>
 
-{% if user_exam_data %}
-    <div class="card text-white bg-dark">
-        <details>
-            <summary>
-                <h3>Submitted candidates</h3>
-            </summary>
-            The following candidate submissions have been received. Candidates with submissions will be shown in green above.
-            <ul id="submitted-candidates">
-                {% for user_data in user_exam_data %}
-                    <li data-cid="{{user_data.cid_user}}" data-user="{{user_data.user_user}}">
-                        CID: {{user_data.cid_user}} /
-                        User: {{user_data.user_user}} /
-                        Start time: {{user_data.start_time}} /
-                        End time: {{user_data.end_time}} /
-
-                    </li>
-                {% endfor %}
-            </ul>
-        </details>
+        <!-- HTMX modal for history / partials -->
+        <div id="history-modal" class="modal fade" tabindex="-1" aria-hidden="true">
+            <div class="modal-dialog modal-lg modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Exam user history: <span id="history-user"></span></h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body"></div>
+                </div>
+            </div>
+        </div>
     </div>
-    <br/>
-{% endif %}
-<span
-    title="View all user exam history"
-    hx-get="{% url exam.app_name|add:':exam_user_status' exam.id %}"
-    hx-target=".modal-content"
-    data-bs-toggle="modal"
-    data-bs-target="#history-modal"
-    _="on htmx:afterOnLoad put {{cid.cid}} into #history-user.innerHTML "
->
-    Exam history <i class="bi bi-clock-history"></i>
-</span>
-
+{% endblock %}
 
 
 {% block js %}
     <script>
-        $(document).ready(function() {
-    // Highlight users that have submitted answers
-            $("#submitted-candidates li").each(function(n, el) {
-                console.log(el);
-                if (el.dataset.cid != "None") {
-                    $(`.cid-user[data-cid=${el.dataset.cid}]`).addClass("submitted")
-                }
-                if (el.dataset.user != "None") {
-                    $(`.user-user[data-user="${el.dataset.user}"]`).addClass("submitted")
-                }
+        document.addEventListener('DOMContentLoaded', function(){
+            // Highlight users that have submitted answers
+            document.querySelectorAll('#submitted-candidates li').forEach(function(el){
+                try{
+                    const cid = el.dataset.cid;
+                    const user = el.dataset.user;
+                    if(cid && cid !== 'None'){
+                        // highlight matching cid element(s)
+                        document.querySelectorAll(`.list-group-item`).forEach(function(li){ if(li.querySelector('.cid-link') && li.querySelector('.cid-link').textContent.trim() === cid.toString()) li.classList.add('submitted'); });
+                    }
+                    if(user && user !== 'None'){
+                        document.querySelectorAll('.list-group-item').forEach(function(li){ if(li.textContent.includes(user)) li.classList.add('submitted'); });
+                    }
+                }catch(e){ console.error(e); }
             });
-
-        })
+        });
     </script>
-    <style>
-        /* Ensure action links are inline-block and don't overlap following content */
-        .cid-data .cid-detail-link, .cid-data .cid-link { display: inline-block; }
-        .cid-name { margin-top: 0.25rem; }
-    </style>
-{% endblock js %}
+{% endblock %}
 
 
 {% block css %}
     <style>
-        .submitted {
-            color: green;
-        }
+        .cid-name { margin-top: 0.25rem; }
+        .cid-link { font-size: 1.05rem; }
+        .submitted { color: green; }
     </style>
-{% endblock css %}
-
-
-
+{% endblock %}
\ No newline at end of file