diff --git a/drakul/base/static/css/main.css b/drakul/base/static/css/main.css
index 526feca..e6907cb 100644
--- a/drakul/base/static/css/main.css
+++ b/drakul/base/static/css/main.css
@@ -1,16 +1,4 @@
-/* https://django-crispy-forms.readthedocs.io/en/latest/crispy_tag_forms.html#change-required-fields */
-.asteriskField {
-    display: none;
-}
-
-.w-14 {
-	width: 14.285% !important;  /* Like Bootstrap's .w-{25,50,75,100}, but for 1/7th of the width */
-}
-
-.o-50 {
-    opacity: 0.5;
-}
-
+/* WoW class-coloured text */
 .class-druid {color: #ff7d0a;}
 .class-hunter {color: #abd473;}
 .class-mage {color: #69ccf0;}
@@ -21,75 +9,179 @@
 .class-warlock {color: #9482c9;}
 .class-warrior {color: #c79c6e;}
 
-.class-druid-bg {
+
+/* WoW class-coloured buttons */
+.btn-druid, .btn-class-1 {
     color: #fff;
     background-color: #ff7d0a;
+    border-color: #ff7d0a;
 }
-.class-hunter-bg {
+.btn-druid:hover, .btn-class-1:hover {
     color: #fff;
-    background-color: #abd473;
+    background-color: #eb7c0a;
+    border-color: #eb7c0a;
 }
-.class-mage-bg {
+
+.btn-hunter, .btn-class-2 {
+    color: #212529;
+    background-color: #abd473;
+    border-color: #abd473;
+}
+.btn-hunter:hover, .btn-class-2:hover {
+    color: #212529;
+    background-color: #98c062;
+    border-color: #98c062;
+}
+
+.btn-mage, .btn-class-3 {
     color: #fff;
     background-color: #69ccf0;
+    border-color: #69ccf0;
 }
-.class-paladin-bg {
+.btn-mage:hover, .btn-class-3:hover {
+    color: #fff;
+    background-color: #67b8dc;
+    border-color: #67b8dc;
+}
+
+.btn-paladin, .btn-class-4 {
     color: #fff;
     background-color: #f58cba;
+    border-color: #f58cba;
 }
-.class-priest-bg {
-    color: #343a40;
+.btn-paladin:hover, .btn-class-4:hover {
+    color: #fff;
+    background-color: #e17aa7;
+    border-color: #e17aa7;
+}
+
+.btn-priest, .btn-class-5 {
+    color: #212529;
     background-color: #ffffff;
+    border-color: #ced4da;
 }
-.class-rogue-bg {
-    color: #343a40;
+.btn-priest:hover, .btn-class-5:hover {
+    color: #212529;
+    background-color: #ebebeb;
+    border-color: #ced2d6;
+}
+
+.btn-rogue, .btn-class-6 {
+    color: #212529;
     background-color: #fff569;
+    border-color: #f5eb63;
 }
-.class-shaman-bg {
+.btn-rogue:hover, .btn-class-6:hover {
+    color: #212529;
+    background-color: #ebe168;
+    border-color: #e1d761;
+}
+
+.btn-shaman, .btn-class-7 {
     color: #fff;
     background-color: #0070de;
+    border-color: #0070de;
 }
-.class-warlock-bg {
+.btn-shaman:hover, .btn-class-7:hover {
+    color: #fff;
+    background-color: #0065ca;
+    border-color: #0065ca;
+}
+
+.btn-warlock, .btn-class-8 {
     color: #fff;
     background-color: #9482c9;
+    border-color: #9482c9;
 }
-.class-warrior-bg {
+.btn-warlock:hover, .btn-class-8:hover {
+    color: #fff;
+    background-color: #816fb5;
+    border-color: #816fb5;
+}
+
+.btn-warrior, .btn-class-9 {
     color: #fff;
     background-color: #c79c6e;
+    border-color: #c79c6e;
+}
+.btn-warrior:hover, .btn-class-9:hover {
+    color: #fff;
+    background-color: #b3895c;
+    border-color: #b3895c;
 }
 
 
 /* Response bg and text colors from https://getbootstrap.com/docs/4.3/utilities/colors/ */
-.response-status-signed-off-bg, .response-status-1-bg {
+.response-status-signed-off-bg, .response-status-1-bg {  /* danger */
     color: #fff;
     background-color: #dc3545;
 }
-.response-status-signed-up-bg, .response-status-2-bg {
+a.response-status-signed-off-bg:focus, a.response-status-1-bg:focus,
+a.response-status-signed-off-bg:hover, a.response-status-1-bg:hover {
+    color: #fff;
+    background-color: #bd2130;
+}
+
+.response-status-signed-up-bg, .response-status-2-bg {  /* info */
     color: #fff;
     background-color: #17a2b8;
 }
-.response-status-stand-by-bg, .response-status-3-bg {
-    color: #343a40;
+a.response-status-signed-up-bg:focus, a.response-status-2-bg:focus,
+a.response-status-signed-up-bg:hover, a.response-status-2-bg:hover {
+    color: #fff;
+    background-color: #117a8b;
+}
+
+.response-status-stand-by-bg, .response-status-3-bg {  /* warning */
+    color: #212529;
     background-color: #ffc107;
 }
-.response-status-confirmed-bg, .response-status-4-bg {
+a.response-status-stand-by-bg:focus, a.response-status-3-bg:focus,
+a.response-status-stand-by-bg:hover, a.response-status-3-bg:hover {
+    color: #212529;
+    background-color: #d39e00;
+}
+
+.response-status-confirmed-bg, .response-status-4-bg {  /* success */
     color: #fff;
     background-color: #28a745;
 }
-.response-status-no-response-bg, .response-status-0-bg {
+a.response-status-confirmed-bg:focus, a.response-status-4-bg:focus,
+a.response-status-confirmed-bg:hover, a.response-status-4-bg:hover {
+    color: #fff;
+    background-color: #1e7e34;
+}
+
+.response-status-no-response-bg, .response-status-0-bg {  /* secondary */
     color: #fff;
     background-color: #6c757d;
 }
-
-.response-character-button {
-    width: 16ch;
+a.response-status-no-response-bg:focus, a.response-status-0-bg:focus,
+a.response-status-no-response-bg:hover, a.response-status-0-bg:hover {
+    color: #545b62;
+    background-color: #545b62;
 }
 
-.raid-response-form .form-group {
-    margin-bottom: 0;
+
+/* https://django-crispy-forms.readthedocs.io/en/latest/crispy_tag_forms.html#change-required-fields */
+.asteriskField {
+    display: none;
 }
 
+
 .raid-calendar td {
     height: 8rem;  /* height works like min-height for td's */
     padding: .5rem;
-}
\ No newline at end of file
+}
+.w-14 {
+    width: 14.285% !important;  /* Like Bootstrap's .w-{25,50,75,100}, but for 1/7th of the width - used for calendar */
+}
+
+.o-50 {
+    opacity: 0.5;
+}
+
+
+.response-character-button {
+    width: 16ch;
+}
diff --git a/drakul/raids/templates/raids/raid_detail.html b/drakul/raids/templates/raids/raid_detail.html
index 9bd9bc0..62d8c32 100644
--- a/drakul/raids/templates/raids/raid_detail.html
+++ b/drakul/raids/templates/raids/raid_detail.html
@@ -20,7 +20,7 @@
 </div>
 {% if response_form %}
     <div class="card">
-        <div class="card-body">
+        <div class="card-body mb-n3">
             <form class="raid-response-form" method="post" action="{% url 'raid_detail' raid.id %}">
                 {% crispy response_form %}
             </form>
@@ -34,19 +34,18 @@
 {% with status=status|default_if_none:"No Response" %}
 <div class="card mb-2">
     <h6 class="card-header response-status-{{ status | slugify }}-bg">{{ status }} ({{ status_responses | length }})</h6>
-    <div class="card-body">
+    <div class="card-body mb-n4">
         {% regroup status_responses by get_role_display as role_responses_list %}
         {% for role, role_responses in role_responses_list %}
         {% if role is not None %}
-            <h6 class="card-title">{{ role }} ({{ role_responses | length }})</h6>
-            <hr>
+            <h6 class="card-title border-bottom pb-2">{{ role }} ({{ role_responses | length }})</h6>
         {% endif %}
         <div class="d-flex flex-wrap">
             {% regroup role_responses by character.klass as class_responses_list %}
             {% for class, class_responses in class_responses_list %}
-            <div class="d-flex flex-column mr-3 mb-3">
+            <div class="d-flex flex-column mr-2 mb-4">
                 {% for response in class_responses %}
-                    <a class="btn btn-secondary response-character-button mb-1 class-{{ response.character.get_klass_display | lower }}-bg" role="button" href="#">
+                    <a class="btn response-character-button mb-1 btn-class-{{ response.character.klass }}" role="button" href="#">
                         {{ response.character.name }}
                         {% if response.note is not None %}&#128489;{% endif %}
                     </a>