diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index afc87cec..15f8624d 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -204,34 +204,34 @@
         border: 1px solid rgba(0,0,0,0.06);
         text-align: left;
     }
-    
+
     /* Enhanced series block with interactive features */
     .series-block-interactive {
         transition: all 0.2s ease;
         cursor: pointer;
     }
-    
+
     .series-block-interactive:hover {
         box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
         border-color: rgba(13, 110, 253, 0.3);
     }
-    
+
     .series-block-actions {
         display: flex;
         flex-wrap: wrap;
         gap: 0.25rem;
         margin-top: 0.5rem;
     }
-    
+
     .series-block-actions .btn {
         padding: 0.25rem 0.5rem;
         font-size: 0.75rem;
     }
-    
+
     .series-block-actions .btn-xs {
         min-width: auto;
     }
-    
+
     /* Also support dark theme when site sets a theme attribute/class */
     .atlas[data-bs-theme="dark"] .series-block,
     [data-bs-theme="dark"] .series-block,
@@ -244,7 +244,7 @@
         border-color: rgba(255,255,255,0.03) !important;
         color: #e6eef8 !important;
     }
-    
+
     .atlas[data-bs-theme="dark"] .series-block-interactive:hover,
     [data-bs-theme="dark"] .series-block-interactive:hover,
     body[data-bs-theme="dark"] .series-block-interactive:hover,
@@ -522,144 +522,144 @@
                         <span class="btn btn-outline-secondary btn-sm series-toolbar-btn">Manage series</span>
                     </summary>
                     <div class="series-actions-body">
-                    <a class="btn btn-sm btn-outline-secondary text-start" href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a>
+                        <a class="btn btn-sm btn-outline-secondary text-start" href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a>
 
-                    <div class="series-selection-toolbar d-flex flex-wrap gap-2">
-                        <button type="button" class="btn btn-sm btn-outline-primary" id="series-select-all-btn">Select all</button>
-                        <button type="button" class="btn btn-sm btn-outline-secondary" id="series-deselect-all-btn">Deselect all</button>
-                    </div>
+                        <div class="series-selection-toolbar d-flex flex-wrap gap-2">
+                            <button type="button" class="btn btn-sm btn-outline-primary" id="series-select-all-btn">Select all</button>
+                            <button type="button" class="btn btn-sm btn-outline-secondary" id="series-deselect-all-btn">Deselect all</button>
+                        </div>
 
-                    <div class="series-actions-grid d-flex flex-column gap-2">
-                        <button class="btn btn-sm btn-outline-secondary text-start" hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}"
-                                title="order dicom by slice location"
-                                hx-target="#series-action-results"
-                                hx-swap="innerHTML"
-                                hx-confirm="This will reorder all case series based upon slice location"
-                        >
-                            Order dicoms by slice location
-                        </button>
-                        <button class="btn btn-sm btn-outline-primary text-start" hx-post="{% url 'atlas:combine_series' %}"
-                                title="merge series"
-                                hx-include="[name='series-ids']"
-                                hx-target="#series-action-results"
-                                hx-swap="innerHTML"
-                                hx-confirm="This will merge all selected series into one"
-                        >
-                            Merge selected series
-                        </button>
-                        <button class="btn btn-sm btn-outline-secondary text-start" hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}"
-                                title="use dicom dates as series descriptions"
-                                hx-include="[name='series-ids']"
-                                hx-target="#series-action-results"
-                                hx-swap="innerHTML"
-                                hx-confirm="This will use the dicom date as the series description"
-                        >
-                            Use dates as description
-                        </button>
-                        <button hx-post="{% url 'atlas:remove_selected_series_from_case' case.pk %}"
-                                title="remove selected series from this case"
-                                hx-include="[name='series-ids']:checked"
-                                hx-target="#series-action-results"
-                                hx-swap="innerHTML"
-                                hx-confirm="Are you sure you want to remove the selected series from this case? They will not be deleted from the database."
-                                class="btn btn-sm btn-warning text-start"
-                                type="button"
-                        >
-                            Remove selected series from case
-                        </button>
-                        <button hx-post="{% url 'atlas:series_bulk_delete' %}"
-                                title="delete selected series"
-                                hx-include="[name='series-ids']:checked"
-                                hx-target="#series-action-results"
-                                hx-swap="innerHTML"
-                                hx-confirm="Delete the selected series from the database? This cannot be undone."
-                                class="btn btn-sm btn-danger text-start"
-                                type="button">
-                            Delete selected series
-                        </button>
-                        <button type="button"
-                                class="btn btn-sm btn-secondary text-start"
-                                data-bs-toggle="modal"
-                                data-bs-target="#reorderSeriesModal">
-                            Reorder series
-                        </button>
-                    </div>
+                        <div class="series-actions-grid d-flex flex-column gap-2">
+                            <button class="btn btn-sm btn-outline-secondary text-start" hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}"
+                                    title="order dicom by slice location"
+                                    hx-target="#series-action-results"
+                                    hx-swap="innerHTML"
+                                    hx-confirm="This will reorder all case series based upon slice location"
+                            >
+                                Order dicoms by slice location
+                            </button>
+                            <button class="btn btn-sm btn-outline-primary text-start" hx-post="{% url 'atlas:combine_series' %}"
+                                    title="merge series"
+                                    hx-include="[name='series-ids']"
+                                    hx-target="#series-action-results"
+                                    hx-swap="innerHTML"
+                                    hx-confirm="This will merge all selected series into one"
+                            >
+                                Merge selected series
+                            </button>
+                            <button class="btn btn-sm btn-outline-secondary text-start" hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}"
+                                    title="use dicom dates as series descriptions"
+                                    hx-include="[name='series-ids']"
+                                    hx-target="#series-action-results"
+                                    hx-swap="innerHTML"
+                                    hx-confirm="This will use the dicom date as the series description"
+                            >
+                                Use dates as description
+                            </button>
+                            <button hx-post="{% url 'atlas:remove_selected_series_from_case' case.pk %}"
+                                    title="remove selected series from this case"
+                                    hx-include="[name='series-ids']:checked"
+                                    hx-target="#series-action-results"
+                                    hx-swap="innerHTML"
+                                    hx-confirm="Are you sure you want to remove the selected series from this case? They will not be deleted from the database."
+                                    class="btn btn-sm btn-warning text-start"
+                                    type="button"
+                            >
+                                Remove selected series from case
+                            </button>
+                            <button hx-post="{% url 'atlas:series_bulk_delete' %}"
+                                    title="delete selected series"
+                                    hx-include="[name='series-ids']:checked"
+                                    hx-target="#series-action-results"
+                                    hx-swap="innerHTML"
+                                    hx-confirm="Delete the selected series from the database? This cannot be undone."
+                                    class="btn btn-sm btn-danger text-start"
+                                    type="button">
+                                Delete selected series
+                            </button>
+                            <button type="button"
+                                    class="btn btn-sm btn-secondary text-start"
+                                    data-bs-toggle="modal"
+                                    data-bs-target="#reorderSeriesModal">
+                                Reorder series
+                            </button>
+                        </div>
 
-                    <details class="series-move-panel border rounded p-2">
-                        <summary class="small fw-semibold">Move selected series to another case</summary>
-                        {% if move_series_form %}
-                            <form id="move-selected-series-form" class="d-flex flex-column gap-2 mt-2">
-                                {{ move_series_form.destination_case }}
-                                <div class="small text-muted">Click any case row below to select the destination case.</div>
-                                <div id="selected-move-case" class="small text-muted">No destination case selected.</div>
-                                {% case_search_widget collection=None input_id='move-series-case-search-input' target_id='move-series-case-search-results' show_select_button=True %}
-                                <button type="button"
-                                        id="move-selected-series-submit"
-                                        class="btn btn-sm btn-outline-primary text-start"
-                                        disabled
-                                        hx-post="{% url 'atlas:move_selected_series_to_case' case.pk %}"
-                                        hx-include="[name='series-ids']:checked, #move-selected-series-form [name='destination_case']"
-                                        hx-target="#series-action-results"
-                                        hx-swap="innerHTML"
-                                        hx-confirm="Move selected series to the chosen destination case?">
-                                    Move selected series
-                                </button>
-                            </form>
-                            <script>
-                                (function () {
-                                    if (window.__moveSeriesCaseSelectionBound) return;
-                                    window.__moveSeriesCaseSelectionBound = true;
+                        <details class="series-move-panel border rounded p-2">
+                            <summary class="small fw-semibold">Move selected series to another case</summary>
+                            {% if move_series_form %}
+                                <form id="move-selected-series-form" class="d-flex flex-column gap-2 mt-2">
+                                    {{ move_series_form.destination_case }}
+                                    <div class="small text-muted">Click any case row below to select the destination case.</div>
+                                    <div id="selected-move-case" class="small text-muted">No destination case selected.</div>
+                                    {% case_search_widget collection=None input_id='move-series-case-search-input' target_id='move-series-case-search-results' show_select_button=True %}
+                                    <button type="button"
+                                            id="move-selected-series-submit"
+                                            class="btn btn-sm btn-outline-primary text-start"
+                                            disabled
+                                            hx-post="{% url 'atlas:move_selected_series_to_case' case.pk %}"
+                                            hx-include="[name='series-ids']:checked, #move-selected-series-form [name='destination_case']"
+                                            hx-target="#series-action-results"
+                                            hx-swap="innerHTML"
+                                            hx-confirm="Move selected series to the chosen destination case?">
+                                        Move selected series
+                                    </button>
+                                </form>
+                                <script>
+                                    (function () {
+                                        if (window.__moveSeriesCaseSelectionBound) return;
+                                        window.__moveSeriesCaseSelectionBound = true;
 
-                                    function applyMoveCaseSelection(casePk, caseTitle) {
-                                        if (!casePk) return;
+                                        function applyMoveCaseSelection(casePk, caseTitle) {
+                                            if (!casePk) return;
 
-                                        const form = document.getElementById('move-selected-series-form');
-                                        const hiddenInput = form ? form.querySelector("[name='destination_case']") : null;
-                                        const label = document.getElementById('selected-move-case');
-                                        const results = document.getElementById('move-series-case-search-results');
-                                        if (!hiddenInput) return;
+                                            const form = document.getElementById('move-selected-series-form');
+                                            const hiddenInput = form ? form.querySelector("[name='destination_case']") : null;
+                                            const label = document.getElementById('selected-move-case');
+                                            const results = document.getElementById('move-series-case-search-results');
+                                            if (!hiddenInput) return;
 
-                                        hiddenInput.value = casePk;
-                                        if (label) {
-                                            label.innerHTML = 'Selected destination: <strong>' + caseTitle + ' (' + casePk + ')</strong>';
-                                            label.classList.remove('text-muted');
+                                            hiddenInput.value = casePk;
+                                            if (label) {
+                                                label.innerHTML = 'Selected destination: <strong>' + caseTitle + ' (' + casePk + ')</strong>';
+                                                label.classList.remove('text-muted');
+                                            }
+
+                                            if (results) {
+                                                results.querySelectorAll('.list-group-item[data-case-pk]').forEach(function (item) {
+                                                    item.classList.toggle('active', String(item.getAttribute('data-case-pk')) === String(casePk));
+                                                });
+                                            }
+
+                                            syncMoveSeriesSubmitState();
                                         }
 
-                                        if (results) {
-                                            results.querySelectorAll('.list-group-item[data-case-pk]').forEach(function (item) {
-                                                item.classList.toggle('active', String(item.getAttribute('data-case-pk')) === String(casePk));
-                                            });
+                                        function syncMoveSeriesSubmitState() {
+                                            const form = document.getElementById('move-selected-series-form');
+                                            const hiddenInput = form ? form.querySelector("[name='destination_case']") : null;
+                                            const submitBtn = document.getElementById('move-selected-series-submit');
+                                            if (!hiddenInput || !submitBtn) return;
+                                            submitBtn.disabled = !hiddenInput.value;
                                         }
 
+                                        document.body.addEventListener('case:selected', function (e) {
+                                            try {
+                                                const detail = e.detail || {};
+                                                const casePk = detail.casePk;
+                                                const caseTitle = detail.caseTitle || ('Case #' + casePk);
+                                                applyMoveCaseSelection(casePk, caseTitle);
+                                            } catch (err) {
+                                                console.error('Move series case:selected handler error', err);
+                                            }
+                                        });
+
                                         syncMoveSeriesSubmitState();
-                                    }
-
-                                    function syncMoveSeriesSubmitState() {
-                                        const form = document.getElementById('move-selected-series-form');
-                                        const hiddenInput = form ? form.querySelector("[name='destination_case']") : null;
-                                        const submitBtn = document.getElementById('move-selected-series-submit');
-                                        if (!hiddenInput || !submitBtn) return;
-                                        submitBtn.disabled = !hiddenInput.value;
-                                    }
-
-                                    document.body.addEventListener('case:selected', function (e) {
-                                        try {
-                                            const detail = e.detail || {};
-                                            const casePk = detail.casePk;
-                                            const caseTitle = detail.caseTitle || ('Case #' + casePk);
-                                            applyMoveCaseSelection(casePk, caseTitle);
-                                        } catch (err) {
-                                            console.error('Move series case:selected handler error', err);
-                                        }
-                                    });
-
-                                    syncMoveSeriesSubmitState();
-                                })();
-                            </script>
-                        {% else %}
-                            <div class="text-muted small mt-2">Case move options are unavailable in this view.</div>
-                        {% endif %}
-                    </details>
+                                    })();
+                                </script>
+                            {% else %}
+                                <div class="text-muted small mt-2">Case move options are unavailable in this view.</div>
+                            {% endif %}
+                        </details>
                     </div>
                     <div class="alert alert-info mt-2" id="series-action-alert" style="display:none;">
                         <span id="series-action-results" ></span>
@@ -1780,119 +1780,118 @@
         padding: 0 1.1rem 1.1rem;
     }
     .series-toolbar {
-        display: grid;
-        grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
+        display: flex;
+        flex-wrap: wrap;
         gap: .75rem;
-        align-items: start;
     }
     .series-toolbar-btn {
-        width: 100%;
-        justify-content: center;
+        min-width: 160px;
     }
     .series-card-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        gap: .85rem;
-        align-items: stretch;
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        gap: 1rem;
     }
     .series-block {
-        min-width: 0;
+        display: contents;
     }
     .series-card-shell {
         display: flex;
         flex-direction: column;
-        gap: .65rem;
-        height: 100%;
-        padding: .85rem;
-        border: 1px solid rgba(255,255,255,0.08);
-        border-radius: .9rem;
-        background: rgba(15,23,42,0.22);
-        box-shadow: 0 10px 24px rgba(0,0,0,0.08);
+        gap: .5rem;
+        padding: 1rem;
+        border: 1px solid rgba(255,255,255,0.1);
+        border-radius: .75rem;
+        background: rgba(15,23,42,0.3);
     }
     .series-card-main {
-        display: grid;
-        grid-template-columns: 84px minmax(0, 1fr);
-        gap: .85rem;
+        display: flex;
+        align-items: flex-start;
+        gap: .75rem;
         width: 100%;
         border: 0;
         background: transparent;
         padding: 0;
         text-align: left;
         color: inherit;
+        cursor: pointer;
+        flex-shrink: 0;
     }
     .series-card-main:hover .series-card-description,
     .series-card-main:focus-visible .series-card-description {
-        color: var(--bs-emphasis-color, #fff);
+        color: #fff;
     }
     .series-card-main:focus-visible {
-        outline: 2px solid rgba(13,110,253,0.55);
-        outline-offset: 4px;
-        border-radius: .6rem;
+        outline: 2px solid rgba(13,110,253,0.6);
+        outline-offset: 2px;
     }
     .series-card-thumb-wrap {
-        width: 84px;
+        flex-shrink: 0;
+        width: 72px;
+        height: 72px;
     }
     .series-card-thumb {
-        width: 84px;
-        height: 84px;
+        width: 100%;
+        height: 100%;
         object-fit: cover;
-        border-radius: .75rem;
-        border: 1px solid rgba(255,255,255,0.12);
+        border-radius: .5rem;
+        border: 1px solid rgba(255,255,255,0.1);
         display: block;
-        background: rgba(255,255,255,0.04);
     }
     .series-card-thumb-placeholder {
+        width: 100%;
+        height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--bs-secondary-color, #6c757d);
-        font-size: 1.35rem;
+        font-size: 1.25rem;
+        background: rgba(255,255,255,0.04);
+        border: 1px solid rgba(255,255,255,0.1);
+        border-radius: .5rem;
     }
     .series-card-content {
+        flex: 1;
         min-width: 0;
         display: flex;
         flex-direction: column;
-        gap: .35rem;
+        gap: .2rem;
     }
     .series-card-heading {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: .45rem .6rem;
+        font-size: .95rem;
+        font-weight: 600;
+        line-height: 1.2;
     }
     .series-card-series-number {
         font-weight: 700;
     }
     .series-card-image-count {
         font-size: .8rem;
-        color: var(--bs-secondary-color, #6c757d);
+        color: #adb5bd;
     }
     .series-card-description {
-        font-size: .95rem;
-        line-height: 1.35;
-        color: rgba(255,255,255,0.88);
+        font-size: .85rem;
+        line-height: 1.3;
+        color: #d4d8dd;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
-        text-overflow: ellipsis;
-        min-height: 2.55em;
     }
     .series-card-controls {
         display: flex;
-        flex-wrap: wrap;
         gap: .5rem;
-        align-items: center;
-        justify-content: space-between;
     }
     .series-card-controls .btn {
-        flex: 1 1 auto;
+        flex: 1;
+        min-width: 0;
+        padding: .35rem .5rem;
+        font-size: .8rem;
     }
     .series-block.highlight-series .series-card-shell,
     .series-block:hover .series-card-shell {
-        border-color: rgba(13,110,253,0.45);
-        box-shadow: 0 14px 28px rgba(13,110,253,0.12);
-        transform: translateY(-1px);
+        border-color: rgba(13,110,253,0.5);
+        background: rgba(13,110,253,0.08);
     }
     .series-actions[open] {
         border: 2px solid #0d6efd;
@@ -1939,28 +1938,28 @@
     }
     @media (max-width: 991.98px) {
         .series-toolbar {
-            grid-template-columns: 1fr;
+            flex-direction: column;
+        }
+        .series-toolbar-btn {
+            width: 100%;
+        }
+        .series-card-grid {
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
         }
     }
     @media (max-width: 575.98px) {
-        .series-panel-summary {
-            flex-direction: column;
-            align-items: flex-start;
+        .series-card-grid {
+            grid-template-columns: 1fr;
         }
-        .series-panel-badge {
-            min-width: 0;
-        }
-        .series-card-main {
-            grid-template-columns: 72px minmax(0, 1fr);
-        }
-        .series-card-thumb-wrap,
-        .series-card-thumb {
-            width: 72px;
-            height: 72px;
+        .series-card-thumb-wrap {
+            width: 60px;
+            height: 60px;
         }
         .series-card-controls {
             flex-direction: column;
-            align-items: stretch;
+        }
+        .series-card-controls .btn {
+            width: 100%;
         }
     }
     @media (prefers-color-scheme: dark) {