diff --git a/src/features/armor-optimization/components/PermutationsList.tsx b/src/features/armor-optimization/components/PermutationsList.tsx
index 2189b99..875d0e4 100644
--- a/src/features/armor-optimization/components/PermutationsList.tsx
+++ b/src/features/armor-optimization/components/PermutationsList.tsx
@@ -44,24 +44,16 @@ const StyledCard = styled(Card)(({ theme }) => ({
     height: '18.5vh',
   },
   backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  backdropFilter: 'blur(10px)',
   alignItems: 'center',
   justifyContent: 'center',
-  transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)',
+  transition: 'transform 0.2s ease-out, box-shadow 0.2s ease-out',
   position: 'relative',
   overflow: 'hidden',
+  willChange: 'transform, box-shadow',
   ':hover': {
     cursor: 'pointer',
-    transform: 'scale(1.05) translateY(-5px)',
-    boxShadow: '0 15px 30px rgba(191, 149, 63, 0.4), 0 10px 10px rgba(191, 149, 63, 0.3)',
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    '&::before': {
-      opacity: 1,
-    },
-    '& > *': {
-      position: 'relative',
-      zIndex: 2,
-    },
+    transform: 'translateY(-3px)',
+    boxShadow: '0 6px 12px rgba(191, 149, 63, 0.2)',
   },
   '&::before': {
     content: '""',
@@ -70,9 +62,13 @@ const StyledCard = styled(Card)(({ theme }) => ({
     left: 0,
     right: 0,
     bottom: 0,
-    background: 'linear-gradient(45deg, rgba(191, 149, 63, 0.3), rgba(251, 245, 183, 0.1))',
+    background: 'linear-gradient(45deg, rgba(191, 149, 63, 0.1), rgba(251, 245, 183, 0.1))',
     opacity: 0,
-    transition: 'opacity 0.3s ease',
+    transition: 'opacity 0.2s ease-out',
+    pointerEvents: 'none',
+  },
+  ':hover::before': {
+    opacity: 1,
   },
 }));