diff --git a/anatomy/templates/anatomy/anatomyquestionanswer_form.html b/anatomy/templates/anatomy/anatomyquestionanswer_form.html
index 39b9f683..a29ace80 100644
--- a/anatomy/templates/anatomy/anatomyquestionanswer_form.html
+++ b/anatomy/templates/anatomy/anatomyquestionanswer_form.html
@@ -28,32 +28,60 @@
 {% if object %}
     {% include 'anatomy/question_link_header.html' %}
 {% endif %}
-<h2>Question Answers</h2>
-<details class="help-text">
-    <summary><i class="bi bi-info-circle"></i> Help</summary>
-<p>This page can be used to add and modify answers associated with a question. Answers in here will be used for automarking submitted answers so it is best not to remove. Updating an answer here will not automatically update a submitted answers (scores cache would need to be refreshed)</p>
-</details>
-<form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
-    {% csrf_token %}
-    <h3>Answers:</h3>
-    <div id="form_set">
-        {% for form in answer_formset %}
-        <ul class="no-error answer-formset">
-            {{form.non_field_errors}}
-            {{form.errors}}
-            {{ form.as_ul }}
-        </ul>
-        {% endfor %}
+<div class="card mb-4">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h2 class="mb-0">Question Answers</h2>
+        <small class="text-muted">Manage answer keys for auto-marking</small>
+    </div>
+    <div class="card-body">
+        <details class="help-text mb-3">
+            <summary><i class="bi bi-info-circle"></i> Help</summary>
+            <p class="mb-0">This page can be used to add and modify answers associated with a question. Answers here are used for auto-marking submitted responses; avoid removing entries unless you intend to re-score submissions.</p>
+        </details>
+
+        <form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
+            {% csrf_token %}
+
+            <h3 class="h5 mt-2">Answers</h3>
+            <div id="form_set" class="mt-3">
+                {% for form in answer_formset %}
+                    <div class="answer-card mb-3 p-3 border rounded bg-body-secondary">
+                        {{form.non_field_errors}}
+                        {{form.errors}}
+                        <div class="answer-fields">
+                            {{ form.as_ul }}
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+
+            {{ answer_formset.management_form }}
+
+            <div class="d-flex gap-2 align-items-center mt-3">
+                <button type="button" id="add_more" class="btn btn-outline-secondary btn-sm">Add another answer</button>
+                <input type="submit" class="submit-button btn btn-primary btn-sm ms-auto" value="Save answers" name="submit">
+            </div>
+        </form>
+
+        <div id="empty_form" class="d-none">
+            <div class='answer-card p-3 mb-3 border rounded bg-body-secondary'>
+                {{ answer_formset.empty_form.as_ul }}
+            </div>
+        </div>
     </div>
-    {{ answer_formset.management_form }}
-    <input type="button" value="Add More Answers" id="add_more">
-    <p>
-    <input type="submit" class="submit-button btn btn-primary" value="Submit" name="submit">
-    </p>
-</form>
-<div id="empty_form" style="display:none">
-    <ul class='no_error answer-formset'>
-        {{ answer_formset.empty_form.as_ul }}
-    </ul>
 </div>
+{% endblock %}
+
+{% block css %}
+<style>
+    /* Answer card layout */
+    .answer-card label { font-weight: 600; }
+    .answer-card li { list-style: none; margin-bottom: .5rem; }
+    .answer-card input[type="text"], .answer-card textarea, .answer-card select { width: 100%; }
+    .help-text summary { cursor: pointer; font-weight:600; }
+    /* Make the Add button more prominent on small screens */
+    @media (max-width: 576px) {
+        .submit-button { width: 100%; }
+    }
+</style>
 {% endblock %}
\ No newline at end of file