diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 5e3a1d2..ee2a4ec 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -14,7 +14,7 @@
           <p class="m-0">Maximum of 4 characters can be created per player</p>
         </div>
         <div class="flex w-full max-lg:flex-col lg:h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
-          <div class="lg:min-w-[285px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-tr-md lg:rounded-bl-md relative">
+          <div class="lg:min-w-[285px] max-lg:min-h-[383px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-tr-md lg:rounded-bl-md relative">
             <div class="absolute right-full -top-px flex gap-1 flex-col">
               <div
                 v-for="character in characters"
@@ -63,7 +63,7 @@
               </div>
             </div>
           </div>
-          <div class="flex-1 lg:w-2/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center max-lg:rounded-bl-md rounded-r-md">
+          <div class="flex-1 lg:w-2/3 max-lg:min-h-[212px] h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center max-lg:rounded-bl-md rounded-r-md">
             <div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-10" v-if="selectedCharacterId">
               <div class="flex flex-col gap-3 w-full">
                 <span class="text-sm">Hairstyle</span>