diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 17c5494..e517789 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -88,7 +88,7 @@
                 <span class="text-sm">Hair color</span>
                 <div class="flex gap-2 flex-wrap">
                   <!-- TODO: replace with hair colors -->
-                  <input type="radio" name="hair-color" v-for="n in 10" class="bg-white w-6 h-6 m-0 rounded-sm hover:cursor-pointer" />
+                  <input type="radio" name="hair-color" v-for="n in 10" class="bg-red w-6 h-6 m-0 rounded-sm hover:cursor-pointer checked:outline checked:outline-1 checked:outline-white" />
                 </div>
               </div>
             </div>