diff --git a/generic/templates/generic/examcollection_detail.html b/generic/templates/generic/examcollection_detail.html
index 2f91165e..17aa224d 100755
--- a/generic/templates/generic/examcollection_detail.html
+++ b/generic/templates/generic/examcollection_detail.html
@@ -2,106 +2,148 @@
 
 {% block content %}
 
-    <h1>
-        {{ object.name }}
-        {% if object.date %}
-            [{{object.date}}]
-        {% endif %}
-    </h1>
+    <div class="container py-4">
+        <div class="row align-items-start mb-3">
+            <div class="col">
+                <h1 class="h3 mb-0">{{ object.name }} {% if object.date %}<small class="text-muted">[{{ object.date }}]</small>{% endif %}</h1>
+                <div class="small text-muted mt-1">Authors: {{ object.get_authors }}</div>
+            </div>
+            <div class="col-auto">
+                <div class="btn-group" role="group" aria-label="collection-actions">
+                    <a class="btn btn-outline-primary btn-sm" href="{% url 'generic:examcollection_edit' object.pk %}"><i class="bi bi-pencil"></i> Edit</a>
+                    <a class="btn btn-outline-secondary btn-sm" href="{% url 'generic:examcollection_clone' object.pk %}"><i class="bi bi-files"></i> Clone</a>
+                    <a class="btn btn-outline-danger btn-sm" href="{% url 'generic:examcollection_delete' object.pk %}"><i class="bi bi-trash"></i> Delete</a>
+                </div>
+            </div>
+        </div>
 
-    <p>
-        <a href="{% url 'generic:examcollection_edit' object.pk %}">Edit</a>
-        <a href="{% url 'generic:examcollection_clone' object.pk %}">Clone</a>
-        <a href="{% url 'generic:examcollection_delete' object.pk %}">Delete</a>
-    </p>
-
-    <div>Authors: {{ object.get_authors }}</div>
-
-    <p>This collection contains the following exams<p>
+        <p class="lead small text-muted">This collection contains the following exams</p>
 
 
 
 
         {% if object.anatomy_exams.all %}
-            <h2>Anatomy Exams:</h2>
-            {% with exams=object.anatomy_exams.all app_name="anatomy" %}
-                {% include "exam_list.html#exam-list" %}
-            {% endwith %}
-                
-            <a href="{% url 'anatomy:exam_list_collection' object.pk %}">View exam list</a>
-
-
-            <div class="add-marker">
-            <button class="btn-sm add-marker-button" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'anatomy' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker to Anatomy Exams</button>
+            <div class="card mb-3">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <strong>Anatomy Exams</strong>
+                    <div class="btn-group">
+                        <a class="btn btn-sm btn-outline-secondary" href="{% url 'anatomy:exam_list_collection' object.pk %}">View exam list</a>
+                        <button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'anatomy' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
+                    </div>
+                </div>
+                <div class="card-body p-2">
+                    {% with exams=object.anatomy_exams.all app_name="anatomy" %}
+                        {% include "exam_list.html#exam-list" %}
+                    {% endwith %}
+                </div>
+                <div class="card-footer add-marker small"></div>
             </div>
         {% endif %}
 
         {% if object.longs_exams.all %}
-            <h2>Longs Exams:</h2>
-            {% with exams=object.longs_exams.all app_name="longs" %}
-                {% include "exam_list.html#exam-list" %}
-            {% endwith %}
-            <a href="{% url 'longs:exam_list_collection' object.pk %}">View exam list</a>
-            <div class="add-marker">
-            <button class="btn-sm add-marker-button" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'longs' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker to Longs Exams</button>
+            <div class="card mb-3">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <strong>Longs Exams</strong>
+                    <div class="btn-group">
+                        <a class="btn btn-sm btn-outline-secondary" href="{% url 'longs:exam_list_collection' object.pk %}">View exam list</a>
+                        <button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'longs' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
+                    </div>
+                </div>
+                <div class="card-body p-2">
+                    {% with exams=object.longs_exams.all app_name="longs" %}
+                        {% include "exam_list.html#exam-list" %}
+                    {% endwith %}
+                </div>
+                <div class="card-footer add-marker small"></div>
             </div>
         {% endif %}
 
         {% if object.rapids_exams.all %}
-            <h2>Rapids Exams:</h2>
-            {% with exams=object.rapids_exams.all app_name="rapids" %}
-                {% include "exam_list.html#exam-list" %}
-            {% endwith %}
-            <a href="{% url 'rapids:exam_list_collection' object.pk %}">View exam list</a>
-            <div class="add-marker">
-            <button class="btn-sm add-marker-button" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'rapids' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker to Rapids Exams</button>
+            <div class="card mb-3">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <strong>Rapids Exams</strong>
+                    <div class="btn-group">
+                        <a class="btn btn-sm btn-outline-secondary" href="{% url 'rapids:exam_list_collection' object.pk %}">View exam list</a>
+                        <button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'rapids' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
+                    </div>
+                </div>
+                <div class="card-body p-2">
+                    {% with exams=object.rapids_exams.all app_name="rapids" %}
+                        {% include "exam_list.html#exam-list" %}
+                    {% endwith %}
+                </div>
+                <div class="card-footer add-marker small"></div>
             </div>
         {% endif %}
 
         {% if object.shorts_exams.all %}
-            <h2>Shorts Exams:</h2>
-            {% with exams=object.shorts_exams.all app_name="shorts" %}
-                {% include "exam_list.html#exam-list" %}
-            {% endwith %}
-            <a href="{% url 'shorts:exam_list_collection' object.pk %}">View exam list</a>
-            <div class="add-marker">
-            <button class="btn-sm add-marker-button" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'shorts' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker to Shorts Exams</button>
+            <div class="card mb-3">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <strong>Shorts Exams</strong>
+                    <div class="btn-group">
+                        <a class="btn btn-sm btn-outline-secondary" href="{% url 'shorts:exam_list_collection' object.pk %}">View exam list</a>
+                        <button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'shorts' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
+                    </div>
+                </div>
+                <div class="card-body p-2">
+                    {% with exams=object.shorts_exams.all app_name="shorts" %}
+                        {% include "exam_list.html#exam-list" %}
+                    {% endwith %}
+                </div>
+                <div class="card-footer add-marker small"></div>
             </div>
         {% endif %}
 
         {% if object.physics_exams.all %}
-            <h2>Physics Exams:</h2>
-            {% with exams=object.physics_exams.all app_name="physics" %}
-                {% include "exam_list.html#exam-list" %}
-            {% endwith %}
-            <a href="{% url 'physics:exam_list_collection' object.pk %}">View exam list</a>
+            <div class="card mb-3">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <strong>Physics Exams</strong>
+                    <a class="btn btn-sm btn-outline-secondary" href="{% url 'physics:exam_list_collection' object.pk %}">View exam list</a>
+                </div>
+                <div class="card-body p-2">
+                    {% with exams=object.physics_exams.all app_name="physics" %}
+                        {% include "exam_list.html#exam-list" %}
+                    {% endwith %}
+                </div>
+            </div>
         {% endif %}
 
         {% if object.sbas_exams.all %}
-            <h2>SBAs Exams:</h2>
-            {% with exams=object.sbas_exams.all app_name="sbas" %}
-                {% include "exam_list.html#exam-list" %}
-            {% endwith %}
-            <a href="{% url 'sbas:exam_list_collection' object.pk %}">View exam list</a>
+            <div class="card mb-3">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <strong>SBAs Exams</strong>
+                    <a class="btn btn-sm btn-outline-secondary" href="{% url 'sbas:exam_list_collection' object.pk %}">View exam list</a>
+                </div>
+                <div class="card-body p-2">
+                    {% with exams=object.sbas_exams.all app_name="sbas" %}
+                        {% include "exam_list.html#exam-list" %}
+                    {% endwith %}
+                </div>
+            </div>
         {% endif %}
 
         <br/>
-    <div id="bulk-add-groups">
-    <button class="btn-sm" hx-get="{% url 'generic:exam_collection_bulk_add_groups' object.pk %}" hx-target="#bulk-add-groups" hx-swap="innerHTML">Add groups to exams</button>
-    </div>
+        <div class="d-flex gap-2 mt-3">
+            <div id="bulk-add-groups">
+                <button class="btn btn-sm btn-outline-secondary" hx-get="{% url 'generic:exam_collection_bulk_add_groups' object.pk %}" hx-target="#bulk-add-groups" hx-swap="innerHTML">Add groups to exams</button>
+            </div>
 
-    <div id="add-user">
-    <button hx-get="{% url 'generic:exam_collection_add_author' object.pk %}" hx-target="#add-user" hx-swap="innerHTML">Add author to all exams</button>
-    </div>
+            <div id="add-user">
+                <button class="btn btn-sm btn-outline-secondary" hx-get="{% url 'generic:exam_collection_add_author' object.pk %}" hx-target="#add-user" hx-swap="innerHTML">Add author to all exams</button>
+            </div>
+        </div>
 
-    {% include 'exam_overview_js.html' %}
+        {% include 'exam_overview_js.html' %}
+
+    </div> {# .container end #}
 
 {% endblock %}
 
 {% block css %}
     <style>
-        .add-marker-button {
-            opacity: 0.5;
-        }
+        /* subtle visual tweaks for the new layout */
+        .card-body .exam-list { margin: 0; }
+        .card .card-footer.add-marker { min-height: 1.5rem; }
+        .card-header strong { font-weight: 600; }
     </style>
 {% endblock %}
\ No newline at end of file