diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
index a6bcf8d244..2c9b93aa37 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
@@ -20,7 +20,20 @@ const StyledName = styled(StringTruncator)(({ theme }) => ({
     marginBottom: theme.spacing(0.5),
 }));
 
-const StyledCard = styled(Button)(({ theme }) => ({
+const CardContent = styled('div')(({ theme }) => ({
+    width: '100%',
+    transition: 'opacity 0.2s ease-in-out',
+}));
+
+const HoverButtonsContainer = styled('div')(({ theme }) => ({
+    position: 'absolute',
+    right: theme.spacing(2),
+    display: 'flex',
+    gap: theme.spacing(1),
+    opacity: 0,
+}));
+
+const StyledCard = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
@@ -35,9 +48,14 @@ const StyledCard = styled(Button)(({ theme }) => ({
     borderRadius: theme.spacing(1),
     textAlign: 'left',
     overflow: 'hidden',
-    '&:hover, &:focus': {
-        borderColor: theme.palette.primary.main,
+    position: 'relative',
+    [`&:hover ${CardContent}, &:focus-within ${CardContent}`]: {
+        opacity: 0.5,
     },
+    [`&:hover ${HoverButtonsContainer}, &:focus-within ${HoverButtonsContainer}`]:
+        {
+            opacity: 1,
+        },
 }));
 
 const StyledTopRow = styled('div')(({ theme }) => ({
@@ -50,34 +68,69 @@ const StyledTopRow = styled('div')(({ theme }) => ({
 interface IFeatureReleasePlanCardProps {
     template: IReleasePlanTemplate;
     onClick: () => void;
+    onPreviewClick?: (e: React.MouseEvent) => void;
 }
 
 export const FeatureReleasePlanCard = ({
     template: { name, description },
     onClick,
+    onPreviewClick,
 }: IFeatureReleasePlanCardProps) => {
     const Icon = getFeatureStrategyIcon('releasePlanTemplate');
 
+    const handleUseClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onClick();
+    };
+
+    const handlePreviewClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (onPreviewClick) {
+            onPreviewClick(e);
+        }
+    };
+
     return (
-        <StyledCard onClick={onClick}>
-            <StyledTopRow>
-                <StyledIcon>
-                    <Icon />
-                </StyledIcon>
-                <StyledName text={name} maxWidth='200' maxLength={25} />
-            </StyledTopRow>
-            <Truncator
-                lines={1}
-                title={description}
-                arrow
-                sx={{
-                    fontSize: (theme) => theme.typography.caption.fontSize,
-                    fontWeight: (theme) => theme.typography.fontWeightRegular,
-                    width: '100%',
-                }}
-            >
-                {description}
-            </Truncator>
+        <StyledCard>
+            <CardContent>
+                <StyledTopRow>
+                    <StyledIcon>
+                        <Icon />
+                    </StyledIcon>
+                    <StyledName text={name} maxWidth='200' maxLength={25} />
+                </StyledTopRow>
+                <Truncator
+                    lines={1}
+                    title={description}
+                    arrow
+                    sx={{
+                        fontSize: (theme) => theme.typography.caption.fontSize,
+                        fontWeight: (theme) =>
+                            theme.typography.fontWeightRegular,
+                        width: '100%',
+                    }}
+                >
+                    {description}
+                </Truncator>
+            </CardContent>
+
+            <HoverButtonsContainer>
+                <Button
+                    variant='contained'
+                    size='small'
+                    onClick={handleUseClick}
+                    tabIndex={0}
+                >
+                    Use
+                </Button>
+                <Button
+                    variant='outlined'
+                    size='small'
+                    onClick={handlePreviewClick}
+                >
+                    Preview
+                </Button>
+            </HoverButtonsContainer>
         </StyledCard>
     );
 };