diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index d059c53..74532bd 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -73,10 +73,10 @@
                     class="hair-deselect relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm
                     hover:bg-gray-500 hover:border-gray-400
                     focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan
-                    has-[:checked]:bg-cyan has-[:checked]:border-white"
+                    has-[:checked]:bg-cyan has-[:checked]:border-transparent"
                   >
                     <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
-                    <input type="radio" name="hair" :value="null" v-model="selectedHair" :checked="characters.find((c) => c.id == selected_character)?.characterHairId === null" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" />
+                    <input type="radio" name="hair" :value="null" v-model="selectedHair" :checked="characters.find((c) => c.id == selected_character)?.characterHairId === null" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
                   </div>
                   <!-- TODO #255: make radio button so we can set a value, do the same with swatches -->
                   <div
@@ -84,18 +84,18 @@
                     class="relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm
                     hover:bg-gray-500 hover:border-gray-400
                     focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500
-                    has-[:checked]:bg-cyan has-[:checked]:border-white"
+                    has-[:checked]:bg-cyan has-[:checked]:border-transparent"
                   >
                     <img class="w-4 h-4" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Hair sprite" />
-                    <input type="radio" name="hair" :value="hair" v-model="selectedHair" :checked="characters.find((c) => c.id == selected_character)?.characterHairId == hair.id" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" />
+                    <input type="radio" name="hair" :value="hair" v-model="selectedHair" :checked="characters.find((c) => c.id == selected_character)?.characterHairId == hair.id" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
                   </div>
                 </div>
               </div>
               <div class="flex flex-col gap-3 w-full">
                 <span class="text-sm">Hair color</span>
                 <div class="flex gap-2 flex-wrap">
-                  <!-- TODO: replace with hairstyles -->
-                  <button v-for="n in 10" class="bg-white w-6 h-6 rounded-sm"></button>
+                  <!-- 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" />
                 </div>
               </div>
             </div>