diff --git a/physics/templates/physics/exam_take.html b/physics/templates/physics/exam_take.html
index 4ad5faee..ea8c2bd8 100755
--- a/physics/templates/physics/exam_take.html
+++ b/physics/templates/physics/exam_take.html
@@ -98,7 +98,7 @@
{% endif %}
-
+
@@ -171,6 +171,7 @@
--bg: #ffffff;
--text: #212529;
--muted: #6c757d;
+ --secondary: #6c757d;
--card-bg: #ffffff;
--card-border: #e9ecef;
--primary: #0d6efd;
@@ -294,6 +295,17 @@
.mt-2 .save { margin-right: 0.5rem; }
.mt-2 .save.btn.btn-default { background: var(--feedback-bg); border: 1px solid var(--card-border); color: var(--text); }
+ /* Overview button - make it stand out using the primary color */
+ #overview-button { background: var(--primary); border-color: var(--primary); color: #fff; }
+ #overview-button:hover { filter: brightness(0.95); box-shadow: 0 3px 8px rgba(13,110,253,0.18); }
+
+ /* Previous / Next button colors */
+ .mt-2 button[name="previous"] { background: var(--secondary); border-color: var(--secondary); color: #fff; }
+ .mt-2 button[name="previous"]:hover { filter: brightness(0.95); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
+
+ .mt-2 button[name="next"] { background: var(--primary); border-color: var(--primary); color: #fff; }
+ .mt-2 button[name="next"]:hover { filter: brightness(0.95); box-shadow: 0 3px 8px rgba(13,110,253,0.18); }
+
/* Small helper: make labels wrap nicely on small screens */
@media (max-width: 576px) {
/* On small screens, stack the label and input for readability */