diff --git a/src/pages/02_personnel-management/person-info/MainPage.vue b/src/pages/02_personnel-management/person-info/MainPage.vue
index 1a621b58..c59aedb2 100644
--- a/src/pages/02_personnel-management/person-info/MainPage.vue
+++ b/src/pages/02_personnel-management/person-info/MainPage.vue
@@ -205,7 +205,7 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
         rounded
         bordered
         v-if="currentUser"
-        style="box-shadow: var(--shadow-2)"
+        style="box-shadow: var(--shadow-2); overflow-y: auto; max-height: 50vw"
       >
         <div class="row q-col-gutter-md">
           <q-select
@@ -507,7 +507,7 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
 
 .info-bg {
   background-color: var(--surface-1);
-  height: 45vw;
+  height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
 }
@@ -519,9 +519,9 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
 }
 
 .btn-delete {
-  color: hsl(var(--info-bg));
+  color: hsl(var(--negative-bg));
   background-color: var(--surface-1);
   border-radius: var(--radius-2);
-  border: 1px solid hsl(var(--info-bg));
+  border: 1px solid hsl(var(--negative-bg));
 }
 </style>