diff --git a/resources/assets/js/components/MicroApps/modal.vue b/resources/assets/js/components/MicroApps/modal.vue
index 07654a4c8..8576b4e1b 100644
--- a/resources/assets/js/components/MicroApps/modal.vue
+++ b/resources/assets/js/components/MicroApps/modal.vue
@@ -319,6 +319,7 @@ export default {
         border: 1px solid var(--modal-capsule-bor-color);
         border-radius: 16px;
         transition: box-shadow 0.2s, background 0.2s;
+        will-change: box-shadow, background;
 
         &:hover {
             background: var(--modal-capsule-hov-bgcolor);
diff --git a/resources/assets/sass/components/drawer-overlay.scss b/resources/assets/sass/components/drawer-overlay.scss
index 93b8739d4..92d5db520 100644
--- a/resources/assets/sass/components/drawer-overlay.scss
+++ b/resources/assets/sass/components/drawer-overlay.scss
@@ -84,13 +84,14 @@ body {
                 opacity: 0.8;
                 width: 24px;
                 height: 24px;
-                transition: all 0.3s;
+                transition: transform 0.3s, opacity 0.3s;
+                will-change: transform, opacity;
             }
 
             &:hover {
                 > svg {
-                    opacity: 1;
                     transform: rotate(-90deg);
+                    opacity: 1;
                 }
             }
         }