diff --git a/src/views/AccountManagement/ModalAccountEditCreate.vue b/src/views/AccountManagement/ModalAccountEditCreate.vue
index 2912c4a..119848b 100644
--- a/src/views/AccountManagement/ModalAccountEditCreate.vue
+++ b/src/views/AccountManagement/ModalAccountEditCreate.vue
@@ -125,7 +125,8 @@
         </main>
         <footer class="flex row footer justify-end pr-[32px] pb-8">            
             <button class="cancel-btn rounded rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
-                flex justify-center items-center text-[#4E5969] font-medium"
+                flex justify-center items-center text-[#4E5969] font-medium
+                hover:bg-[#64748B] hover:border-[#CBD5E1] hover:text-[#FFFFFF]"
                 @click="onCancelBtnClick"
             >
                 {{ i18next.t("Global.Cancel") }}
diff --git a/src/views/AccountManagement/ModalHeader.vue b/src/views/AccountManagement/ModalHeader.vue
index e687921..a35ef2f 100644
--- a/src/views/AccountManagement/ModalHeader.vue
+++ b/src/views/AccountManagement/ModalHeader.vue
@@ -3,9 +3,11 @@
         border-b border-b-[1px] border-[#CBD5E1]
     ">
         <h1 class="flex text-base font-bold"> {{ headerText }}</h1>
-        <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer"
-            @click="closeModal"
-        />
+        <div class="w-8 h-8 bg-transparent hover:bg-[#e9ecef] rounded-full relative flex justify-center items-center">
+            <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer absolute"
+                @click="closeModal"
+            />
+        </div>        
     </header>
 </template>