diff --git a/shorts/templates/shorts/exam_scores_user.html b/shorts/templates/shorts/exam_scores_user.html
index 3afd3f79..eb5fd585 100644
--- a/shorts/templates/shorts/exam_scores_user.html
+++ b/shorts/templates/shorts/exam_scores_user.html
@@ -8,13 +8,15 @@
             <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''>
             </div>
             <div class="history"></div>
-            <div>
+            <div class="answers-section">
                 <details>
                     <summary>Sample Answers:</summary>
                     <span class="answers">
                     </span>
                 </details>
             </div>
+            <div class="question-feedback">
+            </div>
         </div>
     </div>
     <div class="shorts">
@@ -85,6 +87,11 @@
                         if (data.history) {
                             $(".question-display-block .history").empty().append(`History:<pre>${data.history}</pre>`);
                         }
+                        if (data.feedback) {
+                            $(".question-display-block .question-feedback").empty().append(`Feedback:<pre>${data.feedback}</pre>`);
+                        } else {
+                            $(".question-display-block .question-feedback").empty();
+                        }
                         console.log(data)
                         if (data.answers && data.answers.length > 0) {
                             // Format: [[answer, score], ...]
diff --git a/shorts/templates/shorts/mark_answer.html b/shorts/templates/shorts/mark_answer.html
index e8b9df9d..5c14cced 100644
--- a/shorts/templates/shorts/mark_answer.html
+++ b/shorts/templates/shorts/mark_answer.html
@@ -174,37 +174,71 @@
         <span class="ml-3 text-muted">({{ unmarked|length }} answer{{ unmarked|length|pluralize }} left to mark)</span>
     </div>
 
-    <details closed>
-        <summary title="click to view/hide the question details">Question Details</summary>
-        <p class="pre-whitespace"><b>History:</b> {{ question.history }}</p>
-        <p class="pre-whitespace"><b>Region:</b> {{ question.get_regions }}</p>
-        <p class="pre-whitespace"><b>Examination:</b> {{ question.get_examinations }}</p>
-        <p class="pre-whitespace"><b>Abnormality:</b> {{ question.get_abnormalities }}</p>
-        <div class="pre-whitespace multi-image-block"><b>Images:</b>
-            {% for image in question.images.all %}
-                <span class="image-block">
-                    Image {{ forloop.counter }}{% if image.description %} ({{image.description}}){% endif %}{% if image.feedback_image %} [feedback image]{% endif %}:
-                    <div class="dicom-image shorts-img {% if image.feedback_image %}feedback-img{% endif %}"
-                         data-url="{{ remote_url }}{{ image.image.url}}"></div>
-                </span>
-            {% endfor %}
-        </div>
-        <p class="pre-whitespace"><b>Feedback:</b> {{ question.feedback }}</p>
-    </details>
-    <div class="marking-block">
-        <details open>
-            <summary title="click to view/hide the mark scheme">Marking Guidance</summary>
-            {{ question.marking_guidance | safe}}
-        </details>
-        <details open>
-            <summary title="click to view/hide user answers">User answer</summary>
-            <div>
-                <div class="shorts-answer">
-                    <pre>{{answer.answer}}</pre>
+    <!-- Enable Bootstrap dark mode using 'bg-dark', 'text-light', and dark card classes -->
+    <div class="card mb-4 bg-dark text-light border-secondary">
+        <details>
+            <summary class="card-header bg-secondary text-light" title="Click to view/hide the question details">
+                <strong>Question Details</strong>
+            </summary>
+            <div class="card-body">
+                <p class="pre-whitespace mb-2"><b>History:</b> {{ question.history }}</p>
+                <p class="pre-whitespace mb-2"><b>Region:</b> {{ question.get_regions }}</p>
+                <p class="pre-whitespace mb-2"><b>Examination:</b> {{ question.get_examinations }}</p>
+                <p class="pre-whitespace mb-2"><b>Abnormality:</b> {{ question.get_abnormalities }}</p>
+                <div class="pre-whitespace multi-image-block mb-2"><b>Images:</b>
+                    <div class="row">
+                        {% for image in question.images.all %}
+                            <div class="col-md-4 mb-2">
+                                <div class="card h-100 bg-dark text-light border-secondary">
+                                    <div class="card-body p-2">
+                                        <span class="image-block">
+                                            <strong>Image {{ forloop.counter }}</strong>
+                                            {% if image.description %} ({{image.description}}){% endif %}
+                                            {% if image.feedback_image %}
+                                                <span class="badge bg-info text-dark">Feedback image</span>
+                                            {% endif %}
+                                            <div class="dicom-image shorts-img {% if image.feedback_image %}feedback-img{% endif %} mt-2"
+                                                 data-url="{{ remote_url }}{{ image.image.url}}"></div>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
                 </div>
+                <p class="pre-whitespace mb-0"><b>Feedback:</b> {{ question.feedback }}</p>
             </div>
         </details>
     </div>
+
+    <div class="row mb-4">
+        <div class="col-md-6">
+            <div class="card h-100 bg-dark text-light border-secondary">
+                <details open>
+                    <summary class="card-header bg-secondary text-light" title="Click to view/hide the mark scheme">
+                        <strong>Marking Guidance</strong>
+                    </summary>
+                    <div class="card-body">
+                        {{ question.marking_guidance | safe }}
+                    </div>
+                </details>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="card h-100 bg-dark text-light border-secondary">
+                <details open>
+                    <summary class="card-header bg-secondary text-light" title="Click to view/hide user answers">
+                        <strong>User Answer</strong>
+                    </summary>
+                    <div class="card-body">
+                        <div class="shorts-answer">
+                            <pre class="mb-0 text-light bg-dark border-0">{{ answer.answer }}</pre>
+                        </div>
+                    </div>
+                </details>
+            </div>
+        </div>
+    </div>
     <div class="marking">
         <form method="POST" class="post-form">{% csrf_token %}
             <input type="hidden" name="form_id" value="mark_form">