diff --git a/src/pages/Character.vue b/src/pages/Character.vue
index d3bd45e..9684543 100644
--- a/src/pages/Character.vue
+++ b/src/pages/Character.vue
@@ -38,7 +38,8 @@
           <img
             :src="selectedCharacter.img"
             :alt="selectedCharacter.name"
-            class="w-40 h-60 object-contain relative z-30 pb-16"
+            class="w-40 h-60 object-contain relative z-30"
+            :class="screenWidth <= 400 ? 'pb-16' : 'pb-14'"
           />
         </div>
 
@@ -121,7 +122,16 @@ export default {
      profileListSelected(profile) {
       this.selectedProfile = profile;
       this.showModal = false;
+    },
+    handleResize() {
+      this.screenWidth = window.innerWidth;
     }
   },
+  mounted() {
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.handleResize);
+  },
 };
 </script>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index d7dcc2f..7a6201d 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -42,7 +42,7 @@
           <img
             :src="selectedCharacter.img"
             :alt="selectedCharacter.name"
-            class="w-40 h-60 object-contain relative z-30 pb-16"
+            class="w-40 h-60 object-contain relative z-30 pb-12"
           />
         </div>
         <div class="flex flex-row items-start justify-between gap-12 w-full pt-5 absolute bottom-2 left-2 pr-5">