2 files changed, 19 insertions, 4 deletions
diff --git a/game/study_player/ui/main.rcss b/game/study_player/ui/main.rcss
index 78b83bf..4c28aa6 100644
--- a/game/study_player/ui/main.rcss
+++ b/game/study_player/ui/main.rcss
@@ -271,6 +271,11 @@ body {
     color: #8c8ca0;
 }
 
+#study-form {
+    display: block;
+    height: 0;
+}
+
 #study-mode-box {
     position: absolute;
     top: 684px;
@@ -284,6 +289,14 @@ body {
     width: 22px;
     height: 22px;
     vertical-align: middle;
+    decorator: none;
+    border: 2px #8c8ca0;
+    background-color: #181825;
+}
+
+#cb-study:checked {
+    background-color: #a6e3a1;
+    border-color: #a6e3a1;
 }
 
 #study-label {
diff --git a/game/study_player/ui/main.rml b/game/study_player/ui/main.rml
index 821293e..f6bc5fe 100644
--- a/game/study_player/ui/main.rml
+++ b/game/study_player/ui/main.rml
@@ -57,10 +57,12 @@
     <!-- ================================================================ -->
     <div id="bottom-bar">
         <div id="help-text">{{help_text}}</div>
-        <div id="study-mode-box">
-            <input type="checkbox" id="cb-study" data-value="study_mode"/>
-            <span id="study-label">Study Mode</span>
-        </div>
+        <form id="study-form">
+            <div id="study-mode-box">
+                <input type="checkbox" id="cb-study" data-checked="study_mode"/>
+                <span id="study-label">Study Mode</span>
+            </div>
+        </form>
     </div>
 
     <!-- ================================================================ -->