diff --git a/atlas/templates/atlas/collection_detail.html b/atlas/templates/atlas/collection_detail.html
index fdc5d855..ffe59ec7 100644
--- a/atlas/templates/atlas/collection_detail.html
+++ b/atlas/templates/atlas/collection_detail.html
@@ -43,112 +43,135 @@
 {% endpartialdef %}
 
 {% block content %}
-    <h2>{{collection.name}}</h2>
 
-    {% include 'exam_notes.html' %}
+<div class="card mb-3">
+    <div class="card-body">
+        <h2 class="card-title mb-2">{{ collection.name }}</h2>
+
+        {% include 'exam_notes.html' %}
+
+        <p class="mb-1"><strong>Exam mode:</strong> {{ collection.exam_mode }}
+            <small class="text-muted">(open access: {{ collection.exam_open_access }})</small>
+        </p>
+
+        <p class="mb-1">
+            {% include "generic/partials/exams/exam_status.html#publish-results" %}
+            {% include "generic/partials/exams/exam_status.html#exam-active" %}
+        </p>
+
+        <p class="mb-1"><strong>Collection Type:</strong> {{ collection.get_collection_type_display }}</p>
+        <p class="mb-1"><strong>Self review:</strong> {{ collection.self_review }}</p>
+        <p class="mb-1"><strong>Open access:</strong> {{ collection.open_access }}</p>
 
-    <div>
-        Exam mode: {{collection.exam_mode}} (open access: {{collection.exam_open_access}})<br />
-        {% include "generic/partials/exams/exam_status.html#publish-results" %}
-        {% include "generic/partials/exams/exam_status.html#exam-active" %}
-        Collection Type: {{collection.get_collection_type_display}}<br />
-        Self review: {{collection.self_review}}<br />
-        Open access: {{collection.open_access}}<br />
         {% if collection.prerequisites.exists %}
-            Prerequisite collections:
-            <ul>
-                {% for prereq in collection.prerequisites.all %}
-                    <li>
-                        <a href="{% url 'atlas:collection_detail' prereq.pk %}">{{ prereq.name }}</a>
-                        &nbsp;
-                    </li>
-                {% endfor %}
-            </ul>
-
-        <p>
-            <button
-                title="Sync users from all prerequisite collections into this collection"
-                hx-post="{% url 'atlas:collection_sync_prerequisite_users' collection.pk %}"
-                hx-swap="outerHTML"
-                class="btn btn-sm btn-secondary"
-            >Sync prerequisite users</button>
-        </p>
-        {% endif %}
-    </div>
-
-
-    {% if collection.collection_type == "VIV" %}
-        <p><a href='{% url "atlas:collection_viva" collection.pk %}'><button class="btn btn-primary">Start Viva</button></a>
-    {% else %}
-        <p>This collection will be available to view/take <a href='{{collection.get_take_url}}' id="take-url">here</a>{% if not collection.active %} (when active){% endif %} <button
-            _="on click
-               writeText(#take-url's href) on navigator.clipboard
-               put 'copied url!' into me
-               wait 1s
-               put 'copy url' into me"
-            class="btn btn-sm">copy link</button>
-            <p>Review collection <a href='{% url "atlas:collection_viva" collection.pk %}'>here</a>
-    {% endif %}
-
-
-
-
-    <h3>Cases</h3>
-    <ol id="full-question-list" class="sortable">
-        {% for casedetail in casesdetails %}
-            <li data-question_pk={{casedetail.case.pk}}>
-
-
-                <a href="{% url 'atlas:collection_case_view' pk=collection.pk case_number=forloop.counter0 %}">Case {{forloop.counter}}</a>
-                :
-                {% if casedetail.case.series.count == 0 %}
-                    &nbsp;<i class="bi bi-exclamation-circle text-warning" title="No series attached to this case"></i>&nbsp;
-                {% endif %}
-                {{casedetail.case.title}}&nbsp;
-
-                {% partial casedetails-management-links %}
-
-            </li>
-
-        {% endfor %}
-    </ol>
-
-
-
-
-    {% if can_edit %}
-        <p><button id='button-edit-order' title='click and drag questions to change order' data-posturl="{% url 'atlas:exam_json_edit' pk=collection.pk %}">Edit case order / Remove cases</button></p>
-        <p><button id='button-add-case'
-                   title='click to add a case to this collection'
-                   hx-get="{% url 'atlas:add_case_to_collection' collection.pk %}" hx-swap="innerHTML" hx-target="#case-list">
-            Add case
-        </button>
-            <div id='case-list'></div>
-        </p>
-
-        <details>
-            <summary>Answer management</summary>
-
-            <div class="alert alert-danger">
-                <p>Manage answers for this collection. </p>
-
-                Please note these are permanant and cannot be undone.
+            <div class="mb-2">
+                <strong>Prerequisite collections:</strong>
+                <ul class="mb-0">
+                    {% for prereq in collection.prerequisites.all %}
+                        <li>
+                            <a href="{% url 'atlas:collection_detail' prereq.pk %}">{{ prereq.name }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
             </div>
 
-            <button title="This will clear all user answers and attempts"
-                    hx-post="{% url 'atlas:collection_reset_answers' collection.pk %}"
+            <p>
+                <button
+                    title="Sync users from all prerequisite collections into this collection"
+                    hx-post="{% url 'atlas:collection_sync_prerequisite_users' collection.pk %}"
                     hx-swap="outerHTML"
-                    hx-confirm="Are you sure you want to reset all answers? This action cannot be undone."
-            >Reset all answers</button>
+                    class="btn btn-sm btn-secondary"
+                >Sync prerequisite users</button>
+            </p>
+        {% endif %}
 
-            <button title="This will specific user answers and attempts"
-                    hx-post="{% url 'atlas:collection_reset_answers_user_list' collection.pk %}"
-                    hx-swap="innerHTML"
-                    hx-target="#user-list"
-            >Reset user answers</button>
-            <div id="user-list"></div>
+        <div class="mt-3">
+            {% if collection.collection_type == "VIV" %}
+                <a href="{% url 'atlas:collection_viva' collection.pk %}" class="btn btn-primary">Start Viva</a>
+            {% else %}
+                <p class="mb-1">This collection will be available to view/take <a href="{{ collection.get_take_url }}" id="take-url">here</a>{% if not collection.active %} (when active){% endif %}
+                    <button
+                        _="on click
+                           writeText(#take-url's href) on navigator.clipboard
+                           put 'copied url!' into me
+                           wait 1s
+                           put 'copy url' into me"
+                        class="btn btn-sm btn-outline-secondary ms-2">copy link</button>
+                </p>
+                <p class="mb-0">Review collection <a href="{% url 'atlas:collection_viva' collection.pk %}">here</a></p>
+            {% endif %}
+        </div>
+    </div>
+</div>
 
-        </details>
-    {% endif %}
-    {% include 'exam_overview_js.html' %}
+
+<h3>Cases</h3>
+<ol id="full-question-list" class="list-group list-group-numbered sortable">
+    {% for casedetail in casesdetails %}
+        <li class="list-group-item d-flex justify-content-between align-items-start" data-question_pk={{ casedetail.case.pk }}>
+
+            <div class="me-3">
+                <a href="{% url 'atlas:collection_case_view' pk=collection.pk case_number=forloop.counter0 %}">Case {{ forloop.counter }}</a>
+                :
+                {% if casedetail.case.series.count == 0 %}
+                    <i class="bi bi-exclamation-circle text-warning ms-1" title="No series attached to this case"></i>
+                {% endif %}
+                <span class="ms-2">{{ casedetail.case.title }}</span>
+            </div>
+
+            <div class="ms-auto">
+                {% partial casedetails-management-links %}
+            </div>
+        </li>
+    {% endfor %}
+</ol>
+
+
+{% if can_edit %}
+    <p>
+        <button id='button-edit-order'
+                title='click and drag questions to change order'
+                data-posturl="{% url 'atlas:exam_json_edit' pk=collection.pk %}"
+                class="btn btn-sm btn-secondary">
+            Edit case order / Remove cases
+        </button>
+    </p>
+
+    <p>
+        <button id='button-add-case'
+               title='click to add a case to this collection'
+               hx-get="{% url 'atlas:add_case_to_collection' collection.pk %}" hx-swap="innerHTML" hx-target="#case-list"
+               class="btn btn-sm btn-secondary">
+            Add case
+        </button>
+        <div id='case-list'></div>
+    </p>
+
+    <details>
+        <summary>Answer management</summary>
+
+        <div class="alert alert-danger">
+            <p>Manage answers for this collection. </p>
+
+            Please note these are permanant and cannot be undone.
+        </div>
+
+        <button title="This will clear all user answers and attempts"
+                hx-post="{% url 'atlas:collection_reset_answers' collection.pk %}"
+                hx-swap="outerHTML"
+                hx-confirm="Are you sure you want to reset all answers? This action cannot be undone."
+                class="btn btn-danger"
+        >Reset all answers</button>
+
+        <button title="This will specific user answers and attempts"
+                hx-post="{% url 'atlas:collection_reset_answers_user_list' collection.pk %}"
+                hx-swap="innerHTML"
+                hx-target="#user-list"
+                class="btn btn-warning">
+            Reset user answers</button>
+        <div id="user-list"></div>
+
+    </details>
+{% endif %}
+{% include 'exam_overview_js.html' %}
 {% endblock %}