diff --git a/openday_scavenger/puzzles/fourbyfour/static/styles.css b/openday_scavenger/puzzles/fourbyfour/static/styles.css
index 7e62f14..8976ee0 100644
--- a/openday_scavenger/puzzles/fourbyfour/static/styles.css
+++ b/openday_scavenger/puzzles/fourbyfour/static/styles.css
@@ -1,6 +1,6 @@
 
 .word-item {
-    background-color: lightgrey;
+    background-color: #f0f0f0;
     border-radius: 10px;
     height: 100px;
     /* Fixed height for grid items */
@@ -12,7 +12,7 @@
 }
 
 .category-item {
-    background-color: lightgrey;
+    background-color: #203d79;
     border-radius: 10px;
     height: 100px;
     /* Fixed height for grid items */
@@ -25,7 +25,7 @@
     /* Center children vertically */
     text-align: center;
     cursor: pointer;
-
+    color: white;
 }
 
 .category-item strong,
@@ -36,7 +36,7 @@
 }
 
 .selected {
-    background-color: darkgrey;
+    background-color: #0078c1;
     color: white;
 }
 
@@ -53,6 +53,16 @@
     max-width: 768px;
 }
 
+
+.btn-custom {
+    background-color: #35bfc9;
+    color: white;
+}
+.btn-custom:hover {
+    background-color: #2aa3b0;
+    color: white;
+}
+
 @media (max-width: 600px) {
     .container {
         max-width: 100%;
diff --git a/openday_scavenger/puzzles/fourbyfour/templates/index.html b/openday_scavenger/puzzles/fourbyfour/templates/index.html
index ee2527a..dbce0ec 100644
--- a/openday_scavenger/puzzles/fourbyfour/templates/index.html
+++ b/openday_scavenger/puzzles/fourbyfour/templates/index.html
@@ -25,6 +25,7 @@ <h1 class="text-center my-4">Create four groups of four!</h1>
 
     {% if game_over %}
     <div class="alert alert-danger text-center" role="alert">
+        Oh no! Too many mistakes!
         Would you like to <a href="#" class="alert-link" hx-delete="/puzzles/{{ puzzle }}/" hx-target="body"
             hx-swap="outerHTML">start again</a>?
     </div>
@@ -68,6 +69,8 @@ <h1 class="text-center my-4">Create four groups of four!</h1>
 
     </div>
 
+    {% if not register_success %}
+
     <div class="text-center my-4">
         <p>Mistakes remaining:</p>
         {% for _ in range(status.mistakes_available) %}
@@ -88,29 +91,27 @@ <h1 class="text-center my-4">Create four groups of four!</h1>
 
     </div>
 
+    {% endif %}
     {% endif %}
 
     {% if message and register_success %}
-    <div class="alert alert-success text-center" role="alert">
+    <div class="alert alert-success text-center mt-3" role="alert">
         {{ message }}
     </div>
-    {% elif message %}
-    <div class="alert alert-warning text-center" role="alert">
-        {{ message }}
-    {% endif %}
-
-    {% if register_success %}
     <form id="auto-submit-form" class="text-center" method="POST" action="/submission">
         <input hidden type="text" id="name" name="name" value="{{ puzzle }}">
         <input hidden type="text" id="visitor" name="visitor" value="{{ visitor }}">
         <input hidden type="text" id="answer" name="answer" value="{{ status.export_solution() }}">
-        <div id="submit-me" style="visibility: hidden; height: 1px;">Submitting...</div>
+        <button class="btn btn-custom">
+            Register your answer!
+        </button>
     </form>
-    <script>
-        setTimeout(function () {
-            document.getElementById('auto-submit-form').submit();
-        }, 1000); // 1 second delay
-    </script>
+
+    {% elif message %}
+
+    <div class="alert alert-warning text-center" role="alert">
+        {{ message }}
+    </div>
     {% endif %}
 
 </body>