diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 8d4bf48..8a1c91d 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -4,7 +4,7 @@
     <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-[80px] px-[80px]">
       <div class="filler"></div>
       <div class="flex justify-center flex-wrap gap-[60px] w-full max-h-[650px] overflow-auto" v-if="!isLoading">
-        <div v-for="character in characters" :key="character.id" class="character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
+        <div v-for="character in characters" :key="character.id" class="group m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
           <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
           <label class="font-bold absolute left-1/2 top-[20px] max-w-[130px] translate-x-[-50%] translate-y-[-50%] text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
           <!-- @TODO : Add a confirmation dialog -->
@@ -16,7 +16,7 @@
             <img class="drop-shadow-20" draggable="false" src="/assets/avatar/default/0.png" />
           </div>
           <span class="absolute bottom-[20px] w-full text-center translate-y-1/2 z-10 drop-shadow-text">Lvl. {{ character.level }}</span>
-          <div class="selected-character absolute max-w-0 w-[65%] h-[3px] bg-white rounded-[3px] left-1/2 bottom-[-15px] translate-x-[-50%] transition-all ease-in-out duration-300"></div>
+          <div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-[65%] h-[3px] bg-white rounded-[3px] left-1/2 bottom-[-15px] translate-x-[-50%] transition-all ease-in-out duration-300"></div>
         </div>
 
         <div class="character new-character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-gray-50 bg-opacity-50 bg-no-repeat shadow-character" v-if="characters.length < 4">
@@ -32,7 +32,7 @@
       </div>
 
       <div class="button-wrapper flex gap-[30px]" v-if="!isLoading">
-        <button class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200" :disabled="!selected_character" @click="select_character()">
+        <button class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan disabled:hover:bg-opacity-50 disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]" :disabled="!selected_character" @click="select_character()">
           PLAY
           <img class="h-[30px] drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" />
         </button>
@@ -114,28 +114,3 @@ onBeforeUnmount(() => {
   socket.connection.off('character:create:success')
 })
 </script>
-
-<style lang="scss">
-.character {
-  &.active {
-    .selected-character {
-      @apply max-w-[170px];
-    }
-  }
-}
-
-.button-wrapper {
-  button {
-    &:disabled {
-      @apply bg-cyan bg-opacity-50 cursor-not-allowed;
-      &:hover {
-        @apply gap-[15px];
-      }
-    }
-
-    &:hover {
-      @apply gap-[20px];
-    }
-  }
-}
-</style>