diff --git a/atlas/templates/atlas/collection_detail.html b/atlas/templates/atlas/collection_detail.html
index ffe59ec7..8a0d81fb 100644
--- a/atlas/templates/atlas/collection_detail.html
+++ b/atlas/templates/atlas/collection_detail.html
@@ -44,134 +44,167 @@
 
 {% block content %}
 
-<div class="card mb-3">
-    <div class="card-body">
-        <h2 class="card-title mb-2">{{ collection.name }}</h2>
+<div class="container">
+    <div class="card mb-4">
+        <div class="card-body">
+            <div class="row">
+                <div class="col-md-8">
+                    <h2 class="card-title mb-2">{{ collection.name }}</h2>
 
-        {% include 'exam_notes.html' %}
+                    {% 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">
+                        <span class="badge bg-info text-dark me-2">{{ collection.exam_mode }}</span>
+                        <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-2">
+                        {% 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>
+                    <p class="mb-1">
+                        <span class="badge bg-secondary me-2">{{ collection.get_collection_type_display }}</span>
+                        <span class="badge bg-light text-dark me-2">Self review: {{ collection.self_review }}</span>
+                        {% if collection.open_access %}
+                            <span class="badge bg-success">Open</span>
+                        {% else %}
+                            <span class="badge bg-warning text-dark">Restricted</span>
+                        {% endif %}
+                    </p>
 
-        {% if collection.prerequisites.exists %}
-            <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>
+                    {% if collection.prerequisites.exists %}
+                        <div class="mt-3 mb-2">
+                            <strong>Prerequisites</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>
+                    {% endif %}
+                </div>
+
+                <div class="col-md-4 d-flex flex-column align-items-md-end mt-3 mt-md-0">
+                    <div class="mb-2 w-100 text-md-end">
+                        {% if collection.collection_type == "VIV" %}
+                            <a href="{% url 'atlas:collection_viva' collection.pk %}" class="btn btn-primary mb-2">Start Viva</a>
+                        {% else %}
+                            <div class="d-inline-block">
+                                <a class="btn btn-outline-secondary btn-sm" href="{{ collection.get_take_url }}" id="take-url-link">Open</a>
+                                <button
+                                    _="on click
+                                         writeText(#take-url-link's href) on navigator.clipboard
+                                         put 'copied url!' into me
+                                         wait 1s
+                                         put 'copy link' into me"
+                                    class="btn btn-sm btn-outline-secondary ms-1">Copy link</button>
+                            </div>
+                        {% endif %}
+                    </div>
+
+                    {% if collection.prerequisites.exists %}
+                        <div class="w-100 text-md-end">
+                            <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>
+                        </div>
+                    {% endif %}
+                </div>
             </div>
-
-            <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 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>
 
+    <div class="row">
+        <div class="col-12">
+            <h3 class="mb-3">Cases</h3>
 
-<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="list-group sortable" id="full-question-list">
+                {% for casedetail in casesdetails %}
+                    <div class="list-group-item list-group-item-action mb-2 p-3 d-flex justify-content-between align-items-start" data-question_pk={{ casedetail.case.pk }}>
+                        <div>
+                            <div class="fw-bold">
+                                <a href="{% url 'atlas:collection_case_view' pk=collection.pk case_number=forloop.counter0 %}">Case {{ forloop.counter }}</a>
+                                <span class="ms-2">{{ casedetail.case.title }}</span>
+                            </div>
+                            <div class="small text-muted mt-1">
+                                {% if casedetail.case.series.count == 0 %}
+                                    <span class="text-warning">No series attached</span>
+                                {% else %}
+                                    {{ casedetail.case.series.count }} series
+                                {% endif %}
+                                {% if casedetail.question_schema %}
+                                    &nbsp;•&nbsp;<span class="text-success">Questions defined</span>
+                                {% endif %}
+                            </div>
+                        </div>
 
-            <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 class="ms-3 d-flex align-items-center">
+                            {% partial casedetails-management-links %}
+                        </div>
+                    </div>
+                {% endfor %}
             </div>
+        </div>
+    </div>
 
-            <div class="ms-auto">
-                {% partial casedetails-management-links %}
+    {% if can_edit %}
+        <div class="row mt-4">
+            <div class="col-12 d-flex gap-2">
+                <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-outline-secondary">
+                        Edit case order / Remove cases
+                </button>
+
+                <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>
             </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>
+        <div class="row mt-3">
+            <div class="col-12">
+                <details>
+                    <summary>Answer management</summary>
 
-        <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>
+                    <div class="alert alert-danger mt-3">
+                        <p class="mb-1">Manage answers for this collection.</p>
+                        <small class="text-muted">Please note these are permanent and cannot be undone.</small>
+                    </div>
+
+                    <div class="d-flex gap-2">
+                        <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 btn-sm"
+                        >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 btn-sm">
+                                Reset user answers</button>
+                    </div>
+
+                    <div id="user-list" class="mt-3"></div>
+                </details>
+            </div>
+        </div>
+    {% endif %}
+
+    {% include 'exam_overview_js.html' %}
+</div>
 
-    </details>
-{% endif %}
-{% include 'exam_overview_js.html' %}
 {% endblock %}