diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index bb0e3b2c..9c7a5de8 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -187,11 +187,32 @@ option {
 }
 
 input[type="checkbox"] {
-  width: initial;
+  display: none;
 
   &,
   & + label {
     vertical-align: middle;
+    cursor: pointer;
+
+    &:before {
+      content: "\2714";
+      border: 2px solid var(--fg-color);
+      border-radius: 4px;
+      display: inline-flex;
+      height: 16px;
+      width: 16px;
+      align-items: center;
+      justify-content: center;
+      margin: 8px 8px 8px 0;
+      color: transparent;
+      transition: .2s;
+    }
+  }
+
+  &:checked + label:before {
+    background-color: var(--ac-color);
+    border-color: var(--ac-color);
+    color: var(--act-color);
   }
 }
 
diff --git a/pages/settings.vue b/pages/settings.vue
index c5a11311..fa6b17d7 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -19,10 +19,13 @@
               <swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
             </span>
           </div>
-          <p>
-            <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
-            <label for="disableFrameColors">Enable multi-colored frames</label>
-          </p>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <h3 class="title">Frames</h3>
+          <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
+          <label for="disableFrameColors">Enable multi-color</label>
         </li>
       </ul>
     </pw-section>