diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
index 1b8efb5d29..0e810c551b 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
@@ -31,6 +31,7 @@ const HoverButtonsContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     gap: theme.spacing(1),
     opacity: 0,
+    transition: 'opacity 0.1s ease-in-out',
 }));
 
 const StyledCard = styled('div')(({ theme }) => ({
@@ -49,13 +50,12 @@ const StyledCard = styled('div')(({ theme }) => ({
     textAlign: 'left',
     overflow: 'hidden',
     position: 'relative',
-    [`&:hover ${CardContent}, &:focus-within ${CardContent}`]: {
+    '&:hover .cardContent, &:focus-within .cardContent': {
         opacity: 0.5,
     },
-    [`&:hover ${HoverButtonsContainer}, &:focus-within ${HoverButtonsContainer}`]:
-        {
-            opacity: 1,
-        },
+    '&:hover .buttonContainer, &:focus-within .buttonContainer': {
+        opacity: 1,
+    },
 }));
 
 const StyledTopRow = styled('div')(({ theme }) => ({
@@ -90,7 +90,7 @@ export const FeatureReleasePlanCard = ({
 
     return (
         <StyledCard>
-            <CardContent>
+            <CardContent className='cardContent'>
                 <StyledTopRow>
                     <StyledIcon>
                         <Icon />
@@ -112,7 +112,7 @@ export const FeatureReleasePlanCard = ({
                 </Truncator>
             </CardContent>
 
-            <HoverButtonsContainer>
+            <HoverButtonsContainer className='buttonContainer'>
                 <Button
                     variant='contained'
                     size='small'