diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index c78b434..2203ec7 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -23,6 +23,14 @@ body {
 
   // Disable pinch zoom
   touch-action: pan-x pan-y;
+
+  // Add custom focus outline
+  *:focus-visible {
+    @apply outline-gray-300;
+    @apply outline;
+    @apply outline-offset-2;
+    @apply rounded-sm;
+  }
 }
 
 h1,
@@ -58,13 +66,20 @@ input {
     appearance: textfield;
   }
   &[type='number']::-webkit-inner-spin-button,
-  &[type='number']::-webkit-outer-spin-button {
+  &[type='number']::-webkit-outer-spin-button,
+  &[type='radio']{
     -webkit-appearance: none;
   }
 }
 
 .input-field {
-  @apply px-4 py-2.5 text-base leading-5 focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300;
+  @apply px-4 py-2.5 text-base leading-5 bg-gray border border-solid border-gray-500 rounded text-gray-300;
+  &:focus-visible {
+    @apply outline-none border-cyan rounded bg-gray-900;
+  }
+  &::placeholder {
+    @apply focus-visible:text-gray-300/50;
+  }
   &.inactive {
     @apply bg-gray-600/50 hover:cursor-not-allowed;
     &::placeholder {
diff --git a/src/components/login/LoginForm.vue b/src/components/login/LoginForm.vue
index 9d9345d..58d9e46 100644
--- a/src/components/login/LoginForm.vue
+++ b/src/components/login/LoginForm.vue
@@ -5,7 +5,7 @@
         <input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
         <div class="relative">
           <input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
-          <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
+          <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-5 h-4 top-1/2 -translate-y-1/2 bg-no-repeat bg-center"></button>
         </div>
         <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
       </div>
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 6759906..48a13b7 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -16,12 +16,12 @@
         <div class="flex w-full h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
           <div class="w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 border-r border-solid border-gray-500 rounded-bl-md relative">
             <div class="absolute right-full -top-px flex gap-1 flex-col">
-              <div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: selected_character == character.id }">
+              <div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500" :class="{ active: selected_character == character.id }">
                 <img src="/assets/avatar/default/head.png" class="w-9 h-9 object-contain absolute top-1/2 -translate-y-1/2" alt="Player head" />
-                <input class="opacity-0 h-full w-full absolute m-0 z-10 hover:cursor-pointer" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
+                <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
               </div>
               <div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
-                <button class="p-0 h-full w-full flex flex-col justify-between" @click="isModalOpen = true">
+                <button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0" @click="isModalOpen = true">
                   <img class="w-6 h-6 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" draggable="false" src="/assets/icons/plus-icon.svg" />
                 </button>
               </div>
@@ -30,7 +30,7 @@
               <input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selected_character)?.name" />
               <div class="flex flex-col gap-4 items-center">
                 <div class="flex flex-col gap-3">
-                  <div class="bg-[url('/assets/ui-elements/character-select-ui-shape.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
+                  <div class="character-frame w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
                     <button class="ml-6 w-4 h-8 p-0">
                       <img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
                     </button>
@@ -63,11 +63,11 @@
               <div class="flex flex-col gap-3 w-full">
                 <span class="text-sm">Hairstyle</span>
                 <div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar">
-                  <button class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400">
+                  <button class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 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">
                     <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
                   </button>
                   <!-- TODO: replace with hairstyles -->
-                  <button v-for="n in 30" class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400"></button>
+                  <button v-for="n in 30" class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 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"></button>
                 </div>
               </div>
               <div class="flex flex-col gap-3 w-full">