diff --git a/atlas/models.py b/atlas/models.py
index 6a52aeec..8dc94dbe 100644
--- a/atlas/models.py
+++ b/atlas/models.py
@@ -415,6 +415,18 @@ class Case(models.Model, AuthorMixin):
         }
         pass
 
+    def get_viva_details(self):
+        return {
+            "title": self.title,
+            "description": self.description,
+            "history": self.history,
+            "discussion": self.discussion,
+            "report": self.report,
+        }
+
+    def get_viva_details_json(self):
+        return json.dumps(self.get_viva_details())
+
 
 def extract_image_dicom_json_from_ds(ds, url, image_index):
     to_keep = [
diff --git a/atlas/templates/atlas/collection_viva.html b/atlas/templates/atlas/collection_viva.html
index 14b78680..a457a6e4 100644
--- a/atlas/templates/atlas/collection_viva.html
+++ b/atlas/templates/atlas/collection_viva.html
@@ -1,52 +1,64 @@
 {% extends 'atlas/exams.html' %}
 
 {% block content %}
-    <h3>Cases</h3>
     <details class="help-text">
         <summary>Instructions</summary>
         <p>Click on the 'Show' button to view the case in the viewer. Click on the 'Open' button to open the case in a new window.</p>
         <p>Opening a second case will replace the first case in the viewer or window.</p>
         <p>It is also possible to open a single series in the viewer or window by clicking on the 'Show' or 'Open' button next to the series.</p>
     </details>
-                    {% comment %} <button class="show-collection no-padding" data-title="{{case.title}}" data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:collection_dicom_json' collection.pk %}">Show Collection</button> {% endcomment %}
-
-    <ol id="" class="sortable">
-        {% for case in cases %}
-            <li data-question_pk={{case.pk}}>
-                <div>Case {{forloop.counter}}: {{case.title}} &nbsp;
-                    <button class="show-case no-padding" data-title="{{case.title}}" data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Show</button>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm">
+                <h3>Cases</h3>
+                <ol id="" class="sortable">
+                    {% for case in cases %}
+                        <li data-question_pk={{case.pk}}>
+                            <div class="case-item" data-title="{{case.title}}" data-case={{case.pk}} data-type="case" data-case-json='{{case.get_viva_details_json}}'>Case {{forloop.counter}}: {{case.title}} &nbsp;
+                                {% comment %} <button class="show-case no-padding"  data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Show</button> {% endcomment %}
 {% comment %}                 <button class="send-message no-padding" data-title="{{case.title}}" data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Open</button> {% endcomment %}
-                    <button class="open-case no-padding" data-title="{{case.title}}" data-target="{% url 'atlas:collection_viva_case' collection.pk forloop.counter0 %}">Open</button>
-                    <br />
-                    <div class="pre-whitespace multi-image-block">
-                        <details><summary>Series:</summary>
-                        {% for series in case.series.all %}
-                            <span class="series-block">
-                                <span>
-                                    <span class="series-block-series-number">Series {{ forloop.counter }}:</span><br>
-                                        {{series.get_block}}
-                                        <br />
-                                    <button class="show-series no-padding blue" data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:series_dicom_json' series.pk %}">
-                                        show
-                                    </button>
-                                    <button class="open-series no-padding blue" data-target="{% url 'atlas:collection_viva_series' collection.pk series.pk %}">
-                                        open
-                                    </button>
-                                    <br>
-                                </span>
-                            </span>
-                        {% endfor %}
-                        </details>
-                    </div>
+                                <button class="open-case no-padding"  data-target="{% url 'atlas:collection_viva_case' collection.pk forloop.counter0 %}">Open</button>
+                                <br />
+                                <div class="pre-whitespace multi-image-block">
+                                    <details><summary>Series:</summary>
+                                        {% for series in case.series.all %}
+                                            <span class="series-block">
+                                                <span>
+                                                    <span class="series-block-series-number">Series {{ forloop.counter }}:</span><br>
+                                                    {{series.get_block}}
+                                                    <br />
+{% comment %}                                                     <button class="show-series no-padding text-secondary border-secondary" data-case={{case.pk}} data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:series_dicom_json' series.pk %}">
+                                                        show
+                                                    </button> {% endcomment %}
+                                                    <button class="open-series no-padding text-secondary border-secondary" data-type="series" data-series={{forloop.counter}} data-case={{case.pk}} data-target="{% url 'atlas:collection_viva_series' collection.pk series.pk %}">
+                                                        open
+                                                    </button>
+                                                    <br>
+                                                </span>
+                                            </span>
+                                        {% endfor %}
+                                    </details>
+                                </div>
+                            </div>
+                        </li>
+
+                    {% endfor %}
+                </ol>
+            </div>
+            <div class="col-sm">
+
+                <div class="sticky-top">
+                    <h3>Currently showing</h3>
+                    <div id="current-case-title"></div>
+                    <div id="current-case-series"></div>
+                    <div id="current-case-history"></div>
+                    <div id="current-case-discussion"></div>
+                    <div id="current-case-report"></div>
                 </div>
-            </li>
-
-        {% endfor %}
-    </ol>
-
-    <h2 id="case-title"></h2>
-    <iframe id="viewer" style="width: 100%; height: 500px; border: none"/>
 
+                <iframe id="viewer" style="width: 100%; height: 500px; border: none"/>
+            </div>
+        </div>
 {% endblock %}
 
 
@@ -55,29 +67,34 @@
         var win2 = false;
 
         $(document).ready(function() {
-            const bc = new BroadcastChannel("test_channel");
+            //const bc = new BroadcastChannel("test_channel");
             console.log('ready')
-            $('.show-collection').click(function() {
+            $('.show-collection, .show-case, .show-series').click(function() {
                 var url = $(this).data('target');
                 console.log('clicked', url)
                 $('#case-title').text($(this).data('title'));
                 $('#viewer').attr('src', url)
             });
-            $('.show-case').click(function() {
-                var url = $(this).data('target');
-                console.log('clicked', url)
-                $('#case-title').text($(this).data('title'));
-                $('#viewer').attr('src', url)
-            });
-            $('.show-series').click(function() {
-                var url = $(this).data('target');
-                console.log('clicked', url)
-                $('#case-title').text("Series: " + $(this).data('title'));
-                $('#viewer').attr('src', url)
-            });
             $('.open-case, .open-series').click(function() {
                 var url = $(this).data('target');
-                bc.postMessage(url);
+
+
+                let c = $(this).closest(".case-item");
+
+                case_details = c.data('case-json');
+                console.log(case_details);
+
+                $('#current-case-title').text("Case: "+c.data('title'));
+                $("#current-case-history").text("History: "+case_details['history']);
+                $("#current-case-discussion").text("Discussion: "+case_details['discussion']);
+                $("#current-case-report").text("Report: "+case_details['report']);
+
+                if ($(this).data('type') == 'case') {
+                    $('#current-case-series').text("Series: All");
+                } else {
+                    $('#current-case-series').text("Series: " + $(this).data('series'));
+                }
+                //bc.postMessage(url);
                 if (win2 == false || win2.closed) {
                     win2 = openSecondaryWindow(url);
                     console.log('opened', win2)